WebSocket & websockets
https://en.wikipedia.org/wiki/WebSocket
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步。
通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见。
https://caniuse.com/#feat=websockets
https://html.spec.whatwg.org/multipage/comms.html#network
传统轮询 (Traditional Polling)
长轮询 (Long Polling)
服务器发送事件 (Server-Sent Event)
SSE只支持服务器到客户端单向的事件推送.
https://segmentfault.com/a/1190000012948613
https://github.com/Pines-Cheng/share
https://en.wikipedia.org/wiki/Push_technology
http://www.ruanyifeng.com/blog/2017/05/websocket.html
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
https://segmentfault.com/a/1190000012709475#articleHeader20
demo
// todo..."use strict";/** * * @author xgqfrms * @license MIT * @copyright xgqfrms * * @description WS server & node.js * @augments * @example * */const WebSocket = require('ws');const wss = new WebSocket.Server({ // host: "", // path: "", port: 8888});let counter = 1;wss.on('connection', function (ws, req) { console.log("client connected", counter); counter ++; ws.on("message", function (msg) { console.log(`receive message = `, msg); if (ws.readyState === 1) { const json = { "success": true, "message": null, "data": [ { "pro_name": "otc", "pro_instructions": null, "pro_type_name": "front-end", "send_time": null, "incre": true, }, { "pro_name": "ds", "pro_instructions": null, "pro_type_name": "back-end", "send_time": null, "incre": false } ] }; // const json = { // success: true, // message: "success", // data: [] // }; let datas = JSON.stringify(json); // return json datas; ws.send(datas); // ws.send("server returned message!"); } }); let ip = req.connection.remoteAddress; console.log(`ip =`, ip);});
full demo
OK
server
"use strict";/** * * @author xgqfrms * @license MIT * @copyright xgqfrms * * @description WS * @augments * @example * */// const WSGenerator = (datas = [], debug = false) => {// let result = ``;// // do something...// return result;// };// export default WS;// export {// WS,// };const WebSocket = require('ws');const wss = new WebSocket.Server({ // host: "", // path: "", port: 8888});let counter = 1;wss.on('connection', function (ws, req) { console.log("client connected", counter); counter ++; ws.on("message", function (msg) { console.log(`receive message = `, msg); if (ws.readyState === 1) { const json = { "success": true, "message": null, "data": [ { "pro_name": "otc", "pro_instructions": null, "pro_type_name": "front-end", "send_time": null, "incre": true, }, { "pro_name": "ds", "pro_instructions": null, "pro_type_name": "back-end", "send_time": null, "incre": false } ] }; // const json = { // success: true, // message: "success", // data: [] // }; let datas = JSON.stringify(json); // return json datas; ws.send(datas); // ws.send("server returned message!"); } }); let ip = req.connection.remoteAddress; console.log(`ip =`, ip);});
client
"use strict";/** * * @author xgqfrms * @license MIT * @copyright xgqfrms * * @description WS * @augments * @example * */// const WS = (datas = [], debug = false) => {// let result = ``;// // do something...// return result;// };// export default WS;// export {// WS,// };const url = `ws://10.1.64.138:8888/F10_APP/src/test`;let ws = new WebSocket(url);ws.onopen = function(e) { console.log(`已经建立连接 open`, ws.readyState); console.log(`e = `, e);};ws.onerror = function(e) { console.log(`连接异常 error`, ws.readyState); console.log(`e = `, e);};ws.onmessage = function(res) { console.log(`收到消息 message`, ws.readyState); let data = res.data, origin = res.origin; console.log(`res & e = `, res); console.log(`res.data = `, res.data); console.log(`res.origin = `, res.origin);};ws.onclose = function(e) { console.log(`已经关闭连接 close`, ws.readyState); console.log(`e = `, e);};setTimeout(() => { ws.onopen = function(e) { console.log(`已经建立连接 open`, ws.readyState); console.log(`e = `, e); };}, 1000 * 1);