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