你应该要了解的WebSocket

作者:盲目的拾荒者博客:https://blog.csdn.net/niugang0920

-

之前也了解过webSocket但在实际的项目没有用到过。最近因为项目中涉及浏览器需要定时轮询获取服务器最新数据,因为HTTP协议做不到服务器主动向客户端推送信息,所以传统的做法就是客户端写定时任务获取最新的数据，轮询的效率低，非常浪费资源(因为必须不停连接，或者 HTTP 连接始终打开).

WebSocket介绍

WebSocket协议提供了通过一个套接字实现全双工通信的功能。 除了其他的功能之外， 它能够实现Web浏览器和服务器之间的异步通信。全双工意味着服务器可以发送消息给浏览器， 浏览器也可以发送消息给服务器。

WebSocket通信可以应用于任何类型的应用中， 但是WebSocket最常见的应用场景是实现服务器和基于浏览器的应用之间的通信。 浏览器中的JavaScript客户端开启一个到服务器的连接， 服务器通过这个连接发送更新给浏览器。 相比历史上轮询服务端以查找更新的方案， 这种技术更加高效和自然。

其他特点包括：

建立在 TCP 协议之上，服务器端的实现比较容易。

与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

数据格式比较轻量，性能开销小，通信高效。

可以发送文本，也可以发送二进制数据。

没有同源限制，客户端可以与任意服务器通信。

协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

WebSocket缺点

WebSocket是一个相对比较新的规范。 虽然它早在2011年底就实现了规范化， 但即便如此， 在Web浏览器和应用服务器上依然没有得到一致的支持。 Firefox和Chrome早就已经完整支持WebSocket了， 但是其他的一些浏览器刚刚开始支持WebSocket。 如下列出了几个流行的浏览器支持WebSocket功能的最低版本：

Internet Explorer：10.0

Firefox: 4.0(部分支持),6.0（完整支持） 。

Chrome: 4.0（部分支持),13.0（完整支持） 。

Safari: 5.0(部分支持),6.0（完整支持） 。

Opera: 11.0(部分支持）,12.10（完整支持） 。

iOS Safari: 4.2(部分支持),6.0（完整支持） 。

Android Browser: 4.4。

防火墙代理通常会限制所有除HTTP以外的流量。 它们有可能不支持或者(还)没有配置允许进行WebSocket通信。

WebSocket备选方案

提到WebSocket的备用方案,这恰是SockJS所擅长的。 SockJS是WebSocket技术的一种模拟,在表面上它尽可能对应WebSocket API,但是在底层它非常智能,如果WebSocket技术不可用的话,就会选择另外的通信方式。SockJS会优先选用WebSocket,但是如果WebSocket不可用的话,它将会从如下的方案中挑选最优的可行方案：

XHR流。

XDR流。

iFrame事件源。

iFrame HTML文件。

XHR轮询。

XDR轮询。

iFrame XHR轮询。

JSONP轮询。

好消息是在使用SockJS之前， 我们并没有必要全部了解这些方案。SockJS让我们能够使用统一的编程模型， 就好像在各个层面都完整支持WebSocket一样，SockJS在底层会提供备用方案。

使用STOMP消息

假设HTTP协议并不存在,只能使用TCP套接字来编写Web应用,你可能会疯掉。 当然,我们也许能够完成这一壮举,但是这需要自行设计客户端和服务器端都认可的协议,从而实现有效的通信。 简单来说,这不是一件容易的事情。不过， 幸好我们有HTTP， 它解决了Web浏览器发起请求以及Web服务器响应请求的细节。这样的话,大多数的开发人员并不需要编写低层基于TCP套接字通信的相关代码。

直接使用WebSocket(或SockJS)就很类似于使用TCP套接字来编写Web应用。 因为没有高层级的线路协议(wire protocol),因此就需要我们定义应用之间所发送消息的语义,还需要确保连接的两端都能遵循这些语义。不过,好消息是我们并非必须要使用原生的WebSocket连接。 就像HTTP在TCP套接字之上添加了请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式(frame-based wireformat)层,用来定义消息的语义。乍看上去,STOMP的消息格式非常类似于HTTP请求的结构。 与HTTP请求和响应类似， STOMP帧由命令、 一个或多个头信息以及负载所组成。 例如,如下就是发送数据的一个STOMP帧：

案列

基于SpringWebSocket整合Vue，Vue采用原生WebSocketApI

基于SpringWebSocket SockJS Stomp整合Vue，Vue采用原生stomp

再一次感谢您花费时间阅读这篇文章！祝您在这里阅读愉快！2018年 11月 09日