博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WebSocket & websockets
阅读量:4326 次
发布时间:2019-06-06

本文共 5193 字,大约阅读时间需要 17 分钟。

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

740516-20180528204310982-776610390.png

https://html.spec.whatwg.org/multipage/comms.html#network

传统轮询 (Traditional Polling)

 

长轮询 (Long Polling)

 

服务器发送事件 (Server-Sent Event)

SSE只支持服务器到客户端单向的事件推送.

740516-20180528203656532-1193115565.png


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

image

image

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

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

你可能感兴趣的文章
Eclipse断点调试(上)
查看>>
Spring的aop操作
查看>>
平差方法
查看>>
关于有序guid 的使用
查看>>
arcgis 画图工具
查看>>
[Leetcode]leetcode1-10题随记
查看>>
HDU 4162 Shape Number
查看>>
HDU 5211 Mutiple 水题
查看>>
linux中ctrl+z、ctrl+d和ctrl+c的区别
查看>>
mysql数据库的简单操作
查看>>
走过2013,走进2014
查看>>
修改tomcatlog输出等级
查看>>
数据结构 堆栈
查看>>
微信公众号开发C#系列-6、消息管理-普通消息接受处理
查看>>
RDIFramework.NET V2.9版本 WinFom部分新增与修正的功能
查看>>
AOP实战
查看>>
最大堆,最小堆及堆排序
查看>>
学习日记
查看>>
EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现
查看>>
四则运算--封装5.1
查看>>