微信小程序实时聊天WebSocket

本文实例为大家分享了微信小程序实时聊天websocket的具体代码，供大家参考，具体内容如下

1.所有监听事件先在onload监听。

// pages/index/to_news/to_news.js 
var app = getapp();
var socketopen = false;
var sockettask = false;
var url = 'ws://192.168.0.120:7011';
page({
 data: {
  inputvalue: '',
  returnvalue: '',
 },
 onload: function (options) {
 },
 onready: 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)
   },
  })
  if (sockettask) {
   sockettask.onopen(res => {
    console.log('监听 websocket 连接打开事件。', res)
   })
   sockettask.onclose(onclose => {
    console.log('监听 websocket 连接关闭事件。', onclose)
   })
   sockettask.onerror(onerror => {
    console.log('监听 websocket 错误。错误信息', onerror)
   })
   sockettask.onmessage(onmessage => {
    console.log('监听websocket接受到服务器的消息事件。服务器返回的消息', onmessage)
   })
  }
 },
 
 // 提交文字
 submitto: function (e) {
  let that = this;
  that.data.allcontentlist.push({that.data.inputvalue });
  that.setdata({
   allcontentlist: that.data.allcontentlist
  })
  var data = {
   text: that.data.inputvalue
  }
  if (socketopen) {
   // 如果打开了socket就发送数据给服务器
   sendsocketmessage(data)
  }
 },
 bindkeyinput: function (e) {
  this.setdata({
   inputvalue: e.detail.value
  })
 },
 
 onhide: function () {
   sockettask.close(function (close) {
    console.log('关闭 websocket 连接。', close)
   })
 },
})
 
//通过 websocket 连接发送数据，需要先 wx.connectsocket，并在 wx.onsocketopen 回调之后才能发送。
function sendsocketmessage(data) {
 console.log('通过 websocket 连接发送数据')
 if (socketopen) {
  sockettask.send({data: json.stringify(data)
  }, function (res) {
   console.log('已发送', res)
  })
 } else {
  socketmsgqueue.push(msg)
 }
} 

html

<input type="text" bindinput="bindkeyinput" value='{{inputvalue}}' placeholder="" />
<button bindtap="submitto" class='user_input_text'>发送</button>

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