共计 1991 个字符，预计需要花费 5 分钟才能阅读完成。
最近有项目需求要用到 websocket, 刚开始以为很简单，但是随着遇到问题，深入了解，才知道 websocket 并不是想象中的那么简单，这篇文章主要是考虑 websocket 在客户端的使用。
1.http 与 websocket
http 超文本传输协议，大家都非常熟悉，http 有 1.0、1.1、2.0 几个版本，从 http1.1 起，默认都开启了 Keep-Alive，保持连接持续性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输 http 数据的 TCP 连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接，这样就降低了资源的消耗优化性能，但是 Keep-Alive 也是有时间限制的，还有一个客户端只能主动发起请求才能获取返回数据，并不能主动接收后台推送的数据，websocket 便应运而生。
websocket 是 html5 新增加特性之一，目的是浏览器与服务端建立全双工的通信方式，解决 http 请求 - 响应带来过多的资源消耗，同时对特殊场景应用提供了全新的实现方式，比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。
http 与 websocket 都是基于 TCP(传输控制协议) 的，websocket 可以看做是对 http 协议的一个补充
2.SockJs
SockJS 是一个 JavaScript 库，为了应对许多浏览器不支持 WebSocket 协议的问题，设计了备选 SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS 会尽可能对应 WebSocket API，但如果 WebSocket 技术不可用的话，会自动降为轮询的方式。
3.Stompjs
STOMP—— Simple Text Oriented Message Protocol——面向消息的简单文本协议。SockJS 为 WebSocket 提供了 备选方案。但无论哪种场景，对于实际应用来说，这种通信形式层级过低。STOMP 协议，来为浏览器 和 server 间的 通信增加适当的消息语义。
4.WebSocket、SockJs、STOMP 三者关系
简而言之，WebSocket 是底层协议，SockJS 是 WebSocket 的备选方案，也是底层协议，而 STOMP 是基于 WebSocket（SockJS）的上层协议。
1、HTTP 协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节，假设 HTTP 协议 并不存在，只能使用 TCP 套接字来 编写 web 应用。
2、直接使用 WebSocket（SockJS）就很类似于 使用 TCP 套接字来编写 web 应用，因为没有高层协议，就需要我们定义应用间所发送消息的语义，还需要确保连接的两端都能遵循这些语义；
3、同 HTTP 在 TCP 套接字上添加请求 - 响应模型层一样，STOMP 在 WebSocket 之上提供了一个基于帧的线路格式层，用来定义消息语义；
5. 使用实例
安装 sockjs-client、stompjs；在这儿要注意一下，我在 ”stompjs”: “^2.3.3″ 这个版本发现，引入 stompjs 会报一个 net 模块找不到，需要在 stompjs 模块根目录下执行 npm install，这个是个奇葩的问题。引入模块：
import SockJS from ‘sockjs-client’;
import Stomp from ‘stompjs’;
// 连接函数
let number = 1;
function reconnect(socketUrl) {
let url = `${BASE_URL}/ws/sdfpoint`; // 连接地址
// 建立连接对象（还未发起连接）
let socket = new SockJS(url);
// 获取 STOMP 子协议的客户端对象
let stompClient = Stomp.over(socket);
// 向服务器发起 websocket 连接并发送 CONNECT 帧
stompClient.connect(
{},// 可添加客户端的认证信息
function connectCallback (){// 连接成功的回调函数
// 订阅频道
stompClient.subscribe(‘/topic/display/control’, function(data){
if (data) {
console.log(‘subscribe data’,data);
}
})
},
function errorCallBack(error){
// 连接失败时再次调用函数
number += 1;
if(number<=10){
reconnect(url);
}
console.log(‘error’,error);
}
)
}
总结：websocket 的实现客户端看起来比较简单，但是需要与后台进行很好的配合和调试才能达到最佳效果。通过 SockJS、Stomp 来进行浏览器兼容，增加消息语义，增强了可用性。要彻底搞懂 websocket，我们还需要深入了解一些底层的原理以及相关的知识。