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

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 () {  // 创建Socket  SocketTask = wx.connectSocket({   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)   },  }) },  // 提交文字 submitTo: function (e) {  let that = this;  var data = {   body: that.data.inputValue,  }   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) })} 

<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>

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%}