websocket传递参数(websocket传输文件)

图片授权基于:www.pixabay.com 相关协议

做项目中,需要及时获取数据,来展示在前端页面。
一开始我们采用的是「轮询」的方式,每隔多少秒去请求接口,看接口有没有返回最新数据,以此来保证数据的及时性。
但这样无疑会浪费前端的很多性能,造成太多不必要的浪费。浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会消耗很多的带宽资源。
所以,后面就商量用 WebSocket 协议方式来处理「数据的及时性」。
什么是 WebSocket ?
WebSocket 是一种网络传输协议,WebSocket 可以使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就可以建立持久性的连接,并进行双向数据传输。
ws 和 wss 的区别?

ws 是协议标识符(如果加密,则为wss),后面跟上服务器的地址。

WebSocket 在语法上没有什么困难,可直接上手使用。
1、新建立 WebSocket 连接
let websocket = new WebSocket(\\\"wss://服务器地址\\\");
2、发送数据,open 来建立连接之后,就可以使用 send 来发送信息。
    websocket.onopen = function() {   websocket.send(\\\"Hello WebSocket\\\");};
    3、接收信息,后端返回的信息通过 message 来接收,数据交互可以使用 JSON 或 二进制数据。
      websocket.onmessage = function(data) {  console.log(data.data);};
      4、处理错误,在收到错误后,可以上报错误。并且,可以选择是否重新启动 websocket 来建立连接。
        websocket.onerror = function() {  console.log(\\\"出现错误...\\\");}
        5、关闭
          websocket.onclose = function() {  console.log(\\\"连接关闭...\\\");}
          客户端一个简单的 Demo
          let websocket = new WebSocket(\\\"wss://服务器地址\\\");websocket.onopen = function(evt) {   websocket.send(\\\"连接成功,发送个消息。\\\");};websocket.onmessage = function(data) {  console.log(\\\"获取到数据\\\");};websocket.onerror = function() {  console.log(\\\"出现错误\\\");};websocket.onclose = function() {  console.log(\\\"连接关闭\\\");};
          心跳检测
          如果在运行期间,网络断了,那不就断开连接了么?所以,需要用「心跳检测」来查看连接状态…
          网络上有很多解决方案,可以本地运行一个循环检查,让后端每隔多久返回一个心跳「pong」,如果在规定时间内,收到信息,那就重新发起循环检查,如果没收到,那就是连接断开了,重新发起连接。
          客户端 Demo
          var timer;var startFn = function() {    var ws = new WebSocket(\\\'ws://localhost:3000\\\');    ws.onmessage = function(mes) {        console.log(mes.data);        clearTimeout(timer);//清除计时        timerFn();//开始计时    };    //错误,需要重新发起请求    ws.onerror = function(mes) {        clearTimeout(timer);        timerFn();//重新发起请求    };};var timerFn = function() {    timer = setTimeout(function() {        startFn();//重新发起请求    }, 45000);};startFn()
          服务端 Node.js
            const WebSocket = require(\\\'ws\\\');const WebSocketServer = WebSocket.Server;//创建 websocket 服务器 监听在 3000 端口const wss = new WebSocketServer({port: 3000});// 服务器被客户端连接wss.on(\\\'connection\\\', function(ws) {    // 接收客户端信息并把信息返回发送    ws.on(\\\'message\\\', function(message) {        ws.send(message + \\\' 客户端消息\\\');    });    var senFn = function() {        ws.send(Math.round(Math.random() * 10));        setTimeFn();    };    var setTimeFn = function() {        setTimeout(function() {            senFn();        },40000);    };    setTimeFn();});
            注:WebSocket 只支持 IE10 及以上。

            项目 Git 地址

            git@github.com:cuishunbiao/websocket.git


            推荐阅读

            Ajax 如何下载文件
            聊聊我理解的前端架构

            为什么「局部变量」访问速度快


            参考资料
            [1]https://zh.wikipedia.org/wiki/WebSocket#cite_note-27
            [2]https://www.runoob.com/html/html5-websocket.html
            [3]https://www.ruanyifeng.com/blog/2017/05/websocket.html

            原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34595.html

            (0)
            小道研究's avatar小道研究
            上一篇 2024年4月12日 上午8:22
            下一篇 2024年4月12日 上午8:24

            相关推荐

            发表回复

            您的邮箱地址不会被公开。 必填项已用 * 标注