websockt stomp SockJS

推荐阅读：

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，变更代码如下：

set brokerURL

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()