微信小程序websocket

websocket也就是长连接,使用长连接后服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,那么就可以通过这个技术做一些及时性的功能

例如:聊天室,饭店多人同时点餐等等。

前端在小程序上实现的方式很简单,如下: 代码可以放在app.js里面,通过this.globalData.socketStatus状态来判断是否开启socket

onLaunch(){
  if(this.globalData.socketStatus == 'closed'){
     this.openSocket();
  }
}

 微信小程序websocket方法基本就在这块js里面,不懂得仔细看注释或者去官方文档查看 https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/wx.sendSocketMessage.html

  // websocket
  openSocket() {
    // 打开信道
    wx.connectSocket({
      url: this.globalData.socketUrl,  //后台给你的长连接地址,定义在globalData中
      header:{'content-type': 'application/json'},
      })
      //打开时的动作
      wx.onSocketOpen(() => {
      console.log('WebSocket 已连接');
      this.globalData.socketStatus = 'connected'; //将状态更换成已连接
      let msg = {
         user: '张三'
      }
      if (this.globalData.socketStatus === 'connected') {
        //自定义的发给后台识别的参数
        console.log("sendMsg:",msg)
        wx.sendSocketMessage({
          data: JSON.stringify(msg)
        })
      }
    })
    //断开时的动作
    wx.onSocketClose(() => {
      console.log('WebSocket 已断开');
      this.globalData.socketStatus = 'closed';
    })
    //报错时的动作
    wx.onSocketError(error => {
      console.error('socket error:', error)
    })
    // 监听服务器推送的消息
    wx.onSocketMessage(message => {
      //把JSONStr转为JSON
      message = message.data.replace(" ", "");
      if (typeof message != 'object') {
        message = message.replace(/\ufeff/g, ""); //重点,后台返回来的数据类型需要转成字符串然后再JOSN.parse转成json
        var msg = JSON.parse(message);
        message = msg;
      }
      var pages = getCurrentPages().pop(); //获取到当前页面
      if (pages.onMessage){  //当前页面是否有onMessage方法,如果有就执行,实时获取后台返回的数据
        pages.onMessage(message);
      }
    })
  },

 index.js中可通过onMessage方法获取实时数据

onMessage(message){
    console.log('getMsg:',message)
},

index.js中发送数据使用 wx.sendSocketMessage方法

// webscoket发送数据
  sendMessage() {
    let msg = {
     name: '李四'
    }
    if (app.globalData.socketStatus === 'connected') {
      //自定义的发给后台识别的参数
      console.log("sendMsg:",msg)
      wx.sendSocketMessage({ //发送
        data: JSON.stringify(msg)
      })
    }
  },

 

posted @ 2021-01-05 14:45  yanghaogogogo  阅读(1665)  评论(0编辑  收藏  举报