推荐阅读：
MDN websockt
阮一峰 WebSocket
Inspecting web sockets 控制面板查看 websocket 情况
STOMP Over WebSocket 为什么要用 STOMP 和 API
stomp-js api-docs
使用 websocket 的时候要注意浏览器兼容性，因此很多实践的文章
都选择使用 sockjs 这个库
SockJS is a JavaScript library (for browsers) that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server, with WebSockets or without. This necessitates the use of a server, which this is one version of, for Node.js.
除了 sockjs 之外，还有一个联合使用的库 @stomp/stompjs
这是因为 WebSockets are "TCP for the Web".
In general JavaScript engines in browsers are not friendly to binary protocols, so using STOMP is a good option because it is a text-oriented protocol.
所以可在 WebSockets 上层使用 stomp（Simple (or Streaming) Text Orientated Messaging Protocol）
伪代码，参考 STOMP Over WebSocket
/*****
* 创建 socket 实例
* 使用 Stomp 协议得到 stompClient
* stompClient 进行连接
* stompClient 订阅
* stompClient 取消订阅
* stompClient 断开链接
* socket 实例关闭
*/
import SockJS from 'sockjs-client';
import { Stomp } from '@stomp/stompjs';
this.socketIns = new SockJS(`url`);
this.stompClient = Stomp.over(this.socketIns);
this.stompClient.connect(
// headers
{},
// 连接成功回调函数.
this.connectCallback,
// 链接失败 TODO
);
connectCallback () {
if (this.stompClient.connected) {
// 订阅
this.subscription = this.stompClient.subscribe(url, this.subscribeCallback);
}
}
// 订阅回调
subscribeCallback (res) {
// JSON 解析
const data = JSON.parse(res.body);
}
// 取消订阅
this.subscription && this.subscription.unsubscribe()
// 断开链接
this.stompClient && this.stompClient.disconnect()
// 实例关闭
this.socketIns && this.socketIns.close();
写完发现有个 warning
Stomp.over did not receive a factory, auto reconnect will not work. Please see https://stomp-js.github.io/api-docs/latest/classes/Stomp.html#over
实现自动连接，文档建议给 Stomp.over 的参数传递一个函数，函数内返回一个 websocket 的实例，类似如下代码
this.stompClient = Stomp.over(() => {
this.socketIns = new SockJS(`url`)
return this.socketIns
});
但是不建议这么做，因为下个主版本不支持这种写法了，建议使用 client.webSocketFactory，变更代码如下：
import { Client } from '@stomp/stompjs'
this.stompClient = new Client({
brokerURL: ``,
})
this.stompClient.webSocketFactory = () => {
this.socketIns = new SockJS(`url`)
return this.socketIns
}
// 连接回调
this.stompClient.onConnect = this.connectCallback
// 触发连接
this.stompClient.activate()
// 订阅 取消订阅 不变
// 断开连接 deactivate 是异步方法
this.stompClient && this.stompClient.deactivate()
