微信小程序WebSocket实现聊天对话功能

本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码，供大家参考，具体内容如下

js

var app = getApp(); var socketOpen = false; var frameBuffer_Data, session, SocketTask; var url = ws://请填写您的长链接接口地址; var upload_url =请填写您的图片上传接口地址 Page({ data: { user_input_text: ,//用户输入文字 inputValue: , returnValue: , addImg: false, //格式示例数据，可为空 allContentList: [], num: 0 }, // 页面加载 onLoad: function () { this.bottom(); }, onShow: function (e) { if (!socketOpen) { this.webSocket() } }, // 页面加载完成 onReady: function () { var that = this; SocketTask.onOpen(res => { socketOpen = true; console.log(监听 WebSocket 连接打开事件。, res) }) SocketTask.onClose(onClose => { console.log(监听 WebSocket 连接关闭事件。, onClose) socketOpen = false; this.webSocket() }) SocketTask.onError(onError => { console.log(监听 WebSocket 错误。错误信息, onError) socketOpen = false }) SocketTask.onMessage(onMessage => { console.log(监听WebSocket接受到服务器的消息事件。服务器返回的消息, JSON.parse(onMessage.data)) var onMessage_data = JSON.parse(onMessage.data) if (onMessage_data.cmd == 1) { that.setData({ link_list: text }) console.log(text, text instanceof Array) // 是否为数组 if (text instanceof Array) { for (var i = 0; i < text.length; i++) { text[i] } } else { } that.data.allContentList.push({ is_ai: true, text: onMessage_data.body }); that.setData({ allContentList: that.data.allContentList }) that.bottom() } }) }, webSocket: function () { // 创建nectSocket({ url: url, data: data, header: { content-type: application/json }, method: post, success: function (res) { console.log(WebSocket连接创建, res) }, fail: function (err) { wx.showToast({ title: 网络异常！, }) console.log(err) }, }) }, // 提交文字utValue, } if (socketOpen) { // 如果打开了socket就发送数据给服务器 sendSocketMessage(data) this.data.allContentList.push({ is_my: { text: this.data.inputValue }}); this.setData({ allContentList: this.data.allContentList, inputValue: }) that.bottom() } }, bindKeyInput: function (e) { this.setData({ inputValue: e.detail.value }) }, onHide: function () { SocketTask.close(function (close) { console.log(关闭 WebSocket 连接。, close) }) }, upimg: function () { var that = this; wx.chooseImage({ sizeType: [original, compressed], success: function (res) { that.setData({ img: res.tempFilePaths }) wx.uploadFile({ url: upload_url, filePath: res.tempFilePaths, name: img, success: function (res) { console.log(res) wx.showToast({ title: 图片发送成功！, duration: 3000 }); } }) that.data.allContentList.push({ is_my: { img: res.tempFilePaths } }); that.setData({ allContentList: that.data.allContentList, }) that.bottom(); } }) }, addImg: function () { this.setData({ addImg: !this.data.addImg }) }, // 获取hei的id节点然后屏幕焦点调转到这个节点 bottom: function () { var that = this; this.setData({ scrollTop: 1000000 }) }, }) //通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。 function sendSocketMessage(msg) { var that = this; console.log(通过 WebSocket 连接发送数据, JSON.stringify(msg)) SocketTask.send({ data: JSON.stringify(msg) }, function (res) { console.log(已发送, res) }) }

wxml

<view class=page_bg wx:if={{block}} bindtap=hide_bg /> <view class=btn_bg wx:if={{block}}> <view wx:for={{link_list}} wx:key=index> <button class=sp_tit id={{index}} bindtap=list_item>查看详情 {{item}} </button> </view> </view> <scroll-view class=history scroll-y=true scroll-with-animation scroll-top={{scrollTop}}> <block wx:key={{index}} wx:for={{allContentList}}> <!-- <view> <text class=time>{{time}}</text> </view> --> <view class=my_right wx:if={{item.is_my}}> <view class=p_r wx:if={{item.is_my.text}}> <text class=new_txt><text class=new_txt_my>{{item.is_my.text}}</text></text> <view class=sanjiao my></view> <image class=new_img src=/images/test.jpg></image> </view> <view class=p_r wx:if={{item.is_my.img}} bindtap=my_audio_click data-id={{index}}> <text class=new_txt> </text> <view class=my_img_bg> <image class=my_audio src={{img}}></image></view> <view class=sanjiao my></view> <image class=new_img src=/images/test.jpg></image> </view> </view> <!-- <view class=you_left id=id_{{allContentList.length}}> --> <view class=you_left id=id_{{allContentList.length}} wx:key={{index}} wx:if={{item.is_ai}}> <view class=p_r> <image class=new_img src=/images/chac.jpg></image> <view class=sanjiao you></view> <view class=new_txt> <view class=new_txt_ai> <!-- {{item.text}} --> <block wx:for={{item.is_two}} wx:key=index> <text wx:if={{item.text}}>{{item.text}}</text> <text wx:if={{item.a.title}} style=color:#0000EE bindtap=link id={{item.a.link}}>{{item.a.title}}</text> </block> </view> </view> </view> </view> </block> </scroll-view> <view class=sendmessage> <image class=voice_icon bindtap=addImg src=/images/jia_img.png></image> <block wx:if={{!addImg}}> <input type=text bindinput=bindKeyInput value={{inputValue}} focus={{focus}} bindfocus=focus confirm-type=done placeholder= /> <button bindtap=submitTo class=user_input_text>发送</button> </block> <block wx:if={{addImg}}> <view class=voice_ing bindtap=upimg>发送图片</view> </block> </view>

css

page { background-color: #f2f2f2; height: 100%; } .jia_img{ height: 80rpx; width: 90rpx; } .time { text-align: center; padding: 5rpx 20rpx 5rpx 20rpx; width: 200rpx; font-size: 26rpx; background-color: #E8E8E8; } .tab{ bottom: 120rpx; } .tab_1{ position: fixed; bottom: 50rpx; width: 200rpx; font-size: 26rpx; left: 50%; margin-left: -45rpx; height: 100rpx; } .tab_2{ right: 30rpx; position: fixed; } /* 聊天 */ .my_right { float: right; margin-top: 30rpx; position: relative; right: 40rpx; } .my_audio{ height: 120rpx; width: 150rpx; position: absolute; right: 150rpx; background: white; top: 20rpx; } .my_img_bg{ height: 150rpx; width: 400rpx; position: relative; right: 0; background: white; top: 20rpx; } .you_left { margin-top: 30rpx; float: left; position: relative; left: 5rpx; } .new_img { width: 100rpx; height: 100rpx; border-radius: 50%; } .new_txt { width: 420rpx; } .new_txt_my{ border-radius: 7px; background-color: #fff; margin-top: 10rpx; padding: 0rpx 30rpx 0rpx 30rpx; float: right; } .new_txt_ai{ border-radius: 7px; background-color: #fff; margin-top: 10rpx; padding: 0rpx 30rpx 0rpx 30rpx; float: left; } .sanjiao { top: 25rpx; position: relative; width: 0px; height: 0px; border-width: 15rpx; border-style: solid; } .my { border-color: transparent transparent transparent #fff; } .you { border-color: transparent #fff transparent transparent; } .sendmessage { width: 100%; z-index: 2; display: flex; position: fixed; bottom: 0px; background-color: #F4F4F6; flex-direction: row; height: 85rpx; } .voice_icon{ width: 60rpx; height: 60rpx; margin: 0 auto; padding: 10rpx 10rpx 10rpx 10rpx; } .voice_ing{ width: 90%; height: 75rpx; line-height: 85rpx; text-align: center; border-radius: 15rpx; border: 1px solid #d0d0d0; } .sendmessage_2 { z-index: 1; position: relative; width: 100%; display: flex; background-color: #F4F4F6; flex-direction: row; height: 85rpx; } .sendmessage input { width: 75%; height: 60rpx; background-color: white; line-height: 60rpx; font-size: 28rpx; border-radius: 10rpx; margin-top: 10rpx; margin-left: 20rpx; border: 1px solid #d0d0d0; padding-left: 20rpx; } .sendmessage button { border: 1px solid white; width: 18%; height: 65rpx; background: #00CC00; color: white; line-height: 65rpx; margin-top: 10rpx; font-size: 28rpx; } .hei{ height: 20rpx; } .history { height: 80%; padding: 20rpx 20rpx 20rpx 20rpx; font-size: 14px; line-height: 50rpx; word-break: break-all; } .icno_kf{ position: fixed; bottom: 160rpx; margin: 0 auto; text-align: center; left: 50%; margin-left: -40rpx; width: 100rpx; height: 100rpx; border-radius: 50% }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。