浅谈WebSocket

Posted 2020-08-16 鹦哥

      WebSocket是H5提出的为了解决客户端和服务器双工通信的方法。在我们使用HTTP协议通信时，客户端主动向服务器发送请求，得到服务器端数据。为了与服务器端数据保持一致，之前常用的有轮询和长轮询两种方式。轮询是每隔一段时间周期性地向服务器请求数据，其中大部分是无用的请求，占用网络资源严重。而长轮询是发送一个请求，直到服务器返回更新的数据，才断开该连接。对于服务器端频繁更新的情况，长轮询的性能和轮询差不多。

      WebSocket的有点在于，不用等客户端去请求，每当服务器有数据更新时，就会主动把数据发给客户端。它使用websocket协议，网络地址为ws://，而不是http：//。既然是H5提出的技术，那么肯定存在兼容性问题。IE10以上支持。一个简单的检测浏览器支持不支持该技术的方式是 判断window.WebSocket=undefined与否。这里有一篇比较好的文章：http://blog.csdn.net/neco2011/article/details/52766082?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io 。 这篇文章里介绍了浏览器自带的接口使用方法：

if (window.WebSocket){

var socket = new WebSocket("ws://localhost:6677"); //建立连接

socket.onopen = function(){} //连接建立事件

socket.close() //断开连接

socket.onclose = function(){}  //连接关闭事件

socket.send("xxxxx")  //发送消息

socket.onmessage = function(){}  //接收到消息的事件

}

socket.readyState =0,1,2,3分别对应了正在连接，连接成功，正在关闭和已经关闭四种状态。

      WebSocket完全可以取代ajax。send是ajax的发送请求，onmessage就是接收到响应。

       服务器端使用websocket还需要服务器的配合。node提供了ws和socket.io是比较常用的。这两个库其实都提供了服务器和客户端的方法。尤其是socket.io，对浏览器兼容性做了处理，对于不支持websocket的浏览器，能自动降级到ajax。

      用了大约两天时间实现了一个简单的聊天室应用，就是使用了socket.io模块。最大的体会就是，websocket免去了前端发送周期性请求的麻烦，每当有更新时候，可以由后台主动发送更新数据（如，用户在哪个room和space等）。而且socket.io提供的命名空间和房间的概念很实用，可以方便的解决不同space或者room的用户聊天互不干扰的问题。最后附上项目地址，请多多指教。https://github.com/yinggeABC/ChatGroup