热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

微信小程序实时聊天WebSocket

这篇文章主要为大家详细介绍了微信小程序实时聊天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


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


推荐阅读
author-avatar
壹诺彡_壹生
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有