微信小程序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 

 
  查看详情 {{item}} 
 


 
 
  
  
   
    {{item.is_my.text}}
    
    
   
   
     
    
    
    
    
   
  
  
  
   
    
    
    
     
      
      
       {{item.text}}
       {{item.a.title}}
      
     
    
   
  
 


 
 
  
  发送
 
 
  发送图片
 

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