微信小程序WebSocket实现聊天对话功能完整源码

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

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 () {
    // 创建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)
  })
} 

 

wxml

 

  
    查看详情 {{item}} 
  



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


  
  
    
    发送
  
  
    发送图片
  

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