WebSocket & websockets

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