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

740516-20190621223323754-149639731.png

740516-20190621223402969-1689149418.png

740516-20190621223513506-1862866147.png

740516-20190621223521620-508872665.png


// 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

740516-20190729113422710-1196678760.png


转载于:https://www.cnblogs.com/xgqfrms/p/11067070.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值