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);