江苏龙网

  1. 主页 > 生活百科 > >

小程序websocket开发指南( 三 )

WebSocket

module.exports = {"nested": {"wenlipackage": {"nested": {"Header": {"fields": {            ...          }        },"Frame": {"fields": {            ...          }        }      }    }  }}

  1. 采用Protobuf库编/解码数据
// 引入protobuf模块import * as protobuf from './weichatPb/protobuf'; // 加载awesome.proto对应的jsonimport awesomeConfig from './awesome.js'; // 加载JSON descriptorconst AwesomeRoot = protobuf.Root.fromJSON(awesomeConfig);// Message类，.proto文件中定义了Frame是消息主体const AwesomeMessage = AwesomeRoot.lookupType("Frame");const payload = {test: "123"};const message = AwesomeMessage.create(payload);const array = AwesomeMessage.encode(message).finish();// unit8Array => ArrayBufferconst enMessage = array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)console.log("encodeMessage", enMessage);// buffer 表示通过小程序this.socketTask.onMessage（(msg) => {});接收到的数据const deMessage = AwesomeMessage.decode(new Uint8Array(buffer));console.log("decodeMessage", deMessage);消息通信
一个?websocket?实例的生成需要经过以下步骤：
  1. 建立连接
  • 建立连接后会返回一个websoket实例
  1. 连接打开
  • 连接建立->连接打开是一个异步的过程，在这段时间内是监听不到消息，更是无法发送消息的
  1. 监听消息
  • 监听的时机比较关键，只有当连接建立并生成websocket实例后才能监听
  1. 发送消息
  • 发送当时机也很关键，只有当连接真正打开后才能发送消息
将小程序WebSocket的一些功能封装成一个类，里面包括建立连接、监听消息、发送消息、心跳检测、断线重连等等常用的功能 。
  1. 封装websocket类
export default class websocket {constructor({ heartCheck, isReconnection }) {this.socketTask = null;// websocket实例this._isLogin = false;// 是否连接this._netWork = true;// 当前网络状态this._isClosed = false;// 是否人为退出this._timeout = 10000;// 心跳检测频率this._timeoutObj = null;this._connectNum = 0;// 当前重连次数this._reConnectTimer = null;this._heartCheck = heartCheck;// 心跳检测和断线重连开关，true为启用，false为关闭this._isReconnection = isReconnection;  }  _reset() {}// 心跳重置_start() {} // 心跳开始  onSocketClosed(options) {}  // 监听websocket连接关闭  onSocketError(options) {}  // 监听websocket连接关闭  onNetworkChange(options) {}  // 检测网络变化  _onSocketOpened() {}  // 监听websocket连接打开  onReceivedMsg(callBack) {}  // 接收服务器返回的消息  initWebSocket(options) {}  // 建立websocket连接  sendWebSocketMsg(options) {}  // 发送websocket消息  _reConnect(options) {}  // 重连方法，会根据时间频率越来越慢  closeWebSocket(){}  // 关闭websocket连接} 
  1. 多个page使用同一个?websocket?对象
引入?vuex?维护一个全局?websocket?对象?globalWebsocket?，通过?mapMutations?的?changeGlobalWebsocket?方法改变全局?websocket?对象：
methods: {    ...mapMutations(['changeGlobalWebsocket']),    linkWebsocket(websocketUrl) {// 建立连接this.websocket.initWebSocket({        url: websocketUrl,success(res) { console.log('连接建立成功', res) },fail(err) { console.log('连接建立失败', err) },complate: (res) => {this.changeGlobalWebsocket(res);        }      })    }}
  • 通过WebSocket类建立连接，将tt.connectSocket返回的websocket实例透传出来，全局共享 。
computed: {    ...mapState(['globalWebsocket']),    newGlobalWebsocket() {// 只有当连接建立并生成websocket实例后才能监听if (this.globalWebsocket && this.globalWebsocket.socketTask) {if (!this.hasListen) {this.globalWebsocket.onReceivedMsg((res, data) => {// 处理服务端发来的各类消息this.handleServiceMsg(res, data);          });this.hasListen = true;        }if (this.globalWebsocket.socketTask.readyState === 1) {// 当连接真正打开后才能发送消息        }      }return this.globalWebsocket;    },}，watch: {    newGlobalWebsocket(newVal, oldVal) {if(oldVal && newVal.socketTask && newVal.socketTask !== oldVal.socketTask) {// 重新监听this.globalWebsocket.onReceivedMsg((res, data) => {this.handleServiceMsg(res, data);        });      }    },  },


推荐阅读


上一篇：Windows 10快速使用的几个技巧，让你的操作更快捷

下一篇：面试官经常问AOP，那到底啥是AOP？