首页 > 上网技巧 > 电脑小技巧 > 小程序关于多个page使用同一个websocket

小程序关于多个page使用同一个websocket

时间:2019-01-07 08:30 作者:QQ地带 我要评论

最近早做一个外卖的小程序,碰到一个需求,多人下单,为了保证堂食同桌的每个人实时获取到每个人点菜信息,所以使用websocket,小程序也提供了socket的API。
 
自己封装的socket.io.js文件:
 
const callback=()=>{};
 
const initSocket=(option={})=>{
  const { websocket_url, websocket_token } = option;
  const socketTask= wx.connectSocket({
    url: websocket_url,
    success: function (res) {
      console.log(res);
    },
    fail: function (fail) {
      console.log(fail);
    }
  });
  // 发送token
  wx.onSocketOpen(function () {
    wx.sendSocketMessage({
      data: websocket_token,
    })
  })
  wx.onSocketError(function (res) {
    console.log('WebSocket连接打开失败,请检查!')
  })
  // 接收推送
  return socketTask;
}
 
function resiverMessage(context) {
  wx.onSocketMessage(function (data) {
    try{
      context.onMessage(JSON.parse(data.data)) //这里定义一个onMessage方法,用于每个页面的回调
    }catch(e){
          console.log(e);
    }
  })
}
module.exports = {
  initSocket,
  resiverMessage
}
根据不同的座位信息socket的connect的地址,token不同,这里在page1页面通过后台接口获取到当前座位信息的  websocket_url, websocket_token。
 
在小程序page1页面的js中引入,然后初始化socket。连接成功:
 
const { initSocket, resiverMessage} = require('../../utils2/socket.io');
 
 
//res调用接口返回的信息
const { websocket_url, websocket_token } = res;
initSocket({websocket_url, websocket_token }); //初始化
page2也要引入js文件:
 
​const {  resiverMessage} = require('../../utils2/socket.io');
在page1,page2页面分别绑定收到服务端发送信息的时间onMessage,并且在Page()函数中监听:
 
Page({
  data:{},
   onMessage(res){
      this.eatinCart(res);  //这个函数是定义在当前page的处理服务器发送过来的data
  },
  onLoad(){},
  onShow(){
     resiverMessage(this)
  },
  eatinCart(data){...}
 
})
这样切换两个页面时都能用同一个socket处理个子页面的数据。

标签: WebSocket
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告