问题描述

最近维护一个老项目，发现项目中有大量重复代码，特别是websocket的调用这一块，同样的代码复制了十几个页面，于是自己封装了一个websocket调用的构造函数。

javascript">export default class CreateWebSocket {constructor(url) {// ws地址this.url = url;// 定义ws对象this.ws = null;// ws定时器this.wsTimer = null;this.onDataReceived = null;this.wsInit();}// 初始化wswsInit = () => {// 销毁wsthis.wsDestroy();// 初始化wsthis.ws = new WebSocket(this.url);// ws连接建立时触发this.ws.addEventListener("open", this.wsOpenHanler);// ws服务端给客户端推送消息this.ws.addEventListener("message", this.wsMessageHanler);// ws通信发生错误时触发this.ws.addEventListener("error", this.wsErrorHanler);// ws关闭时触发this.ws.addEventListener("close", this.wsCloseHanler);};wsOpenHanler = (event) => {console.log("ws建立连接成功");};wsMessageHanler = (e) => {console.log("接收数据", e);//方法1// var event = new CustomEvent("onMessage", { detail: e });// this.ws.dispatchEvent(event);//方法2this.onDataReceived && this.onDataReceived(e);};getData = (callback) => {this.onDataReceived = callback;};//断开重连reconnect = () => {this.wsTimer && clearTimeout(this.wsTimer);this.wsTimer = setTimeout(() => {this.wsInit();}, 5000);};wsErrorHanler = (event) => {console.log(event, "通信发生错误");this.reconnect();};wsCloseHanler = (event) => {console.log(event, "ws连接关闭");this.reconnect();};wsDestroy = () => {if (this.MyWebSocket !== null) {this.ws.removeEventListener("open", this.wsOpenHanler);this.ws.removeEventListener("message", this.wsMessageHanler);this.ws.removeEventListener("error", this.wsErrorHanler);this.ws.removeEventListener("close", this.wsCloseHanler);this.ws.close();this.ws = null;this.wsTimer && clearTimeout(this.wsTimer);}};
}

页面调用

javascript">const socket = new Create('ws://190.201.8.203:80');
//方法一
socket.ws.addEventListener('onMessage', (event) => {//此处写接收到数据后的处理逻辑            
})
//方法二
socket.getData(data=>{//此处写接收到数据后的处理逻辑
})

注意
离开页面一定要卸载ws

javascript">socket && socket.wsDestroy();