websocket初探

今天是想分享一下关于websocket在nodejs里面的相关实践。

websocket相关的知识大家在搜索引擎上一搜就可以看到非常多，包括成长过程，规范化，替代方案等等都有非常多的介绍，这些我就不介绍了，我会说一下我这次为什么会用到websocket和一个简单的demo。
我这次的业务场景是在页面上展示几台不同的机器的实时运行数据，数据由机器上的传感器上传到数据库中，一般周期为5秒上传一个新的数据，我的前端页面也是这样的一个周期用图表的形式去展示这部分数据（这一部分跟传感器上传数据的事件有些许延迟是没有问题的），图表展示用的是highcharts，我个人还是挺喜欢这个图表库的哈哈。然后顺手在公司原有的highcharts封装的基础上又做了一个实时展示的封装，之后再拿出来分享一下~
nodejs端我用的是ws的依赖，看了下github大概8000star，最近的维护时间是3天前，看起来还是挺靠谱的，用起来也比较顺手，nodejs我用的express服务端渲染的方式来做。

nodejs代码

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
//……中间省略若干……
wss.on('connection', function connection(ws, req) {
   ws.on('message', function incoming(message) {
      //console.log('received: %s', message);
        //这里我用了随机数来模拟服务端的真实数据，事实上需要调用不同的接口来提供数据
        setInterval(function(){
            var a = parseInt(Math.random() * 20)
               ws.send(a);
        },1500)
   });
});

前端代码

var ws1 = new WebSocket("ws://localhost:8080");

ws1.onopen = function(evt) { 
   console.log("Connection open ..."); 
   ws1.send("Hello WebSockets!");
};

ws1.onmessage = function(evt) {
   //实验用的input
   $('input').val(evt.data)
};

然后在前端页面上就按照制定间隔的不停变化inp里面的数据。
这就可以了……？🙄🙄🙄真的吗。。。
当然不是啦，会用这个只能做出来业务啊喂，里面深层次的东西还是要好好学习的啊喂🤩虽然没有深究，最近也比较忙……还是整理了一些

推荐大家看一下这篇文章：
WebSocket 是什么原理？为什么可以实现持久连接？ - Ovear的回答 - 知乎
这里面讲的非常通俗易懂，也很容易明白，另外，顺便安利一下其他替代方案

1、轮询

这种方式是按照一定的时间间隔去发送网络请求，场景再现就是

轮询.png

这样的网络开销非常大，一是不停发请求，在网络情况不好的时候可能就比较惨不忍睹，二是需要服务器有很快的处理速度和资源，有更好的方式为什么还要用这种呢😑

2、长轮询

长轮询是第二代的轮询………………😑大概是进化过的轮询吧，这种方式是个阻塞I/O，长轮询的原理是我发起了一个请求，如果确实有结果返回给我了那我就结束本次轮询，接着发起一次新的轮询；如果这次没有结果，那么我就挂起，一直等待服务器给我一个结果为止，看起来很痴情啊喂。

长轮询.png

3、websocket

这两种都存在各种各样的问题，这个时候就是websocket出场的时候啦啊哈哈哈

websocket

当我们用websocket建立connection之后，服务器就可以源源不断的将各种各样的响应发到客户端，建立了‘双工通信’，而且现在各大浏览器支持的也非常好（不要跟我提IE,前端应该放弃IE。。。。🌚）所以大家在遇到这样需要服务器频繁向客户都按发数据的时候可以考虑这种实现方式~