websocket 解决了服务端主动向客户端,传递消息的问题。
为方便使用,下面封装了主要方法
封装:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| class Wsocket { constructor(url) { this.ws = new WebSocket(`ws://${process.env.VUE_APP_SOCKET_URL}/${url}`); this._onCatchErr(); this._onClose(); } onSendMessage(params = "") { if (this.ws.readyState === 1) { this.ws.send(params); } else { this.ws.addEventListener("open", (e) => { console.log(this.ws.readyState); this.ws.send(params); }); } } _onCatchErr() { this.ws.addEventListener("error", function(event) { console.error("Error from server ", event.data); }); } _onClose() { this.ws.addEventListener("close", (e) => { console.log( "websocket 断开: " + e.code + " " + e.reason + " " + e.wasClean ); console.log("Ws has closed"); }); } close() { this.ws.close(); } }
export default Wsocket;
|
使用:
1 2 3 4 5 6 7 8 9
| this.client = new Wsocket('socket/pushMessage')
this.client.senMessage('message')
this.client.ws.addEventListener('message', (event) => { })
this.client.close()
|
websocket API