在微信小程序中利用WebSocket实现文字交流功能完整源码

一、UI部分 wschat.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>

二、wschat.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)
  })
} 

三、wschat.wxss

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