WebSocket双向通信

WebSocket 可以实现浏览器和服务器之间双向通信的持久性连接。使用此 API&＃xff0c;您可以向服务器发送消息并接收事件驱动的响应&＃xff0c;而无需通过轮询服务器的方式以获得响应。还可以实现实时推送和跨域。

 WebSocket 支持传输的数据格式为&＃xff1a;字符串、Blob、ArrayBuffer、ArrayBufferView。

对不支持 WebSocket 的低版本浏览器&＃xff0c;可以使用 Socket.io 第三方插件。

兼容性

IE9&＃43;

语法

var socket &＃61; new WebSocket(url [, protocols]); // 返回一个 WebSocket 对象

• url: websocket服务器地址。网页协议和websocket协议最好对应&＃xff0c;http 对应 ws&＃xff0c;https 对应 wss。
• protocols: 一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议&＃xff0c;这样单个服务器可以实现多个 WebSocket 子协议&＃xff08;例如&＃xff0c;您可能希望一台服务器能够根据指定的协议&＃xff08;protocol&＃xff09;处理不同类型的交互&＃xff09;。如果不指定协议字符串&＃xff0c;则假定为空字符串。

使用 new WebSocket() 示例

const socket &＃61; new WebSocket(&＃39;ws://localhost:8080&＃39;);
// socket.binaryType &＃61; &＃39;arraybuffer&＃39;; // 如果传输的是二进制数据&＃xff0c;要定义二进制数据类型socket.onopen &＃61; function (event) {const data &＃61; JSON.stringify({msg: &＃39;Hello&＃39;});socket.send(data);
};socket.onmessage &＃61; function (event) {try {const data &＃61; JSON.parse(event.data);} catch (error) {}
};socket.onerror &＃61; function (event) {console.log(&＃39;出错啦&＃xff01;&＃39;, event);
};socket.onclose &＃61; function () {console.log(&＃39;websocket关闭&＃39;);
};

关闭连接前最好检查一下 socket.bufferedAmount 是否为0&＃xff0c;以防还有数据要传输。 

使用 socket.io 示例

npm i -S socket.io socket.io-client

Client

mySocket.js &＃xff08;封装 socket&＃xff0c;方便被emit调用&＃xff09;

import io from &＃39;socket.io-client&＃39;;/**
* Socket 对象
**/
class mySocket {constructor() {this.socket &＃61; null;}/*** socket 连接 connect* &＃64;param {String} ip**/connect(ip [, options]) {this.socket &＃61; io.connect(ip, {reconnection: true,reconnectionDelay: 500,reconnectionAttempts: 5,timeout: 40000,path: &＃39;/notice&＃39;,query: {}})}/*** socket 监听 on* &＃64;param {String} type* &＃64;param {Function} func**/on(type, func) {if (this.socket) {this.socket.on(type, func);} else {throw new Error(&＃39;socket 未连接&＃39;);}}/*** socket 事件触发 emit* &＃64;param {String} type* &＃64;param {Object} params**/emit(type,params) {if (this.socket) {this.socket.emit(type, params);} else {throw new Error(&＃39;socket 未连接&＃39;);}}/*** socket 关闭 close**/close() {this.socket && this.socket.close();}
}export default new mySocket();


index.js 

import socket from &＃39;utils/mySocket&＃39;;Http.get(Api.getSocketInfo).then((res) &＃61;> {// res.data &＃61; 192.118.10.80?JSESSIONID&＃61;b21205400b108b16econst socketUrl &＃61; window.location.protocol &＃43; &＃39;//&＃39; &＃43; res.data &＃43; &＃39;&shopId&＃61;1;// 连接&＃xff08;socket连接的地址可以请求后台获取&＃xff09;socket.connect(socketUrl);// socket 连接成功socket.on(&＃39;connect&＃39;, () &＃61;> {console.log(&＃39;socket连接成功&＃xff0c;URL&＃xff1a;&＃39;, socketUrl);});// socket 消息接收socket.on(&＃39;msgEvent&＃39;, (data) &＃61;> {data &＃61; JSON.parse(data);// to do sth ...// socket 发送消息try {socket.emit(&＃39;emitMessage&＃39;, {shopId: &＃39;1&＃39;,orderId: &＃39;32542321&＃39;});} catch (e) {throw new Error(e);}}
}


Server

var app &＃61; require(&＃39;express&＃39;)();
var server &＃61; require(&＃39;http&＃39;).Server(app);
var io &＃61; require(&＃39;socket.io&＃39;)(server);server.listen(8001, ()&＃61;>{console.log(&＃39;webSocket server listening on port 8001&＃39;)
});app.get(&＃39;/&＃39;, (req, res)&＃61;>{res.sendFile(__dirname &＃43; &＃39;/index.html&＃39;);
});io.on(&＃39;connection&＃39;, (socket)&＃61;>{socket.emit(&＃39;news&＃39;, { hello: &＃39;world&＃39; });socket.on(&＃39;otherEvent&＃39;, (data)&＃61;>{console.log(data);});
});

参考

• ​​​​​​​​​​​​​​Introduction | Socket.IO
• WebSocket - Web API 接口参考 | MDN