首页 > 课堂 > 小程序 > 正文

微信小程序实时聊天WebSocket

2020-03-21 16:15:24
字体:
来源:转载
供稿:网友

本文实例为大家分享了微信小程序实时聊天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>

微信小程序,实时聊天,WebSocket

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表