IM & WebSockets

IM & WebSockets

WebSocket API

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

node.js & websokets

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

ws client

new version

"use strict";

/**
 * 
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * 
 * @description WS client
 * @augments 
 * @example 
 * @link 
 * 
 */


const url = `ws://192.168.1.36:8888/`;
let ws = new WebSocket(url);

let log = console.log;

ws.onopen = function(e) {
    log(`已經創建鏈接 open`, ws.readyState);
    log(`e = `, e);
};

ws.onerror = function(e) {
    log(`鏈接異常 error`, ws.readyState);
    log(`e = `, e);
};

ws.onmessage = function(res) {
    log(`收到消息 message`, ws.readyState);
    let data = res.data;
    let origin = res.origin;
    log(`res & e = `, res);
    log(`res.data = `, JSON.stringify(data, null, 4));
    log(`res.origin = `, origin);
};

ws.onclose = function(e) {
    log(`已經關閉鏈接 close`, ws.readyState);
    log(`e = `, e);
};


setTimeout(() => {
    ws.onopen = function(e) {
        log(`已經創建鏈接 open`, ws.readyState);
        log(`e = `, e);
    };
}, 1000 * 1);

// setTimeout(() => {
//     ws.send(`hello server!`);
// }, 3000);

let flag = setInterval(() => {
    ws.send(`hello server!`);
}, 3000);

setTimeout(() => {
    clearInterval(flag);
}, 60 * 1000);

---

websocket & readyState

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState