1、简介

SockJS是一个浏览器JavaScript库，提供了一个类似websocket的对象。SockJS为您提供了一个连贯的，跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟，全双工，跨域通信通道。

Sock.JS的一大好处在于提供了浏览器兼容性。优先使用原生WebSocket，如果在不支持websocket的浏览器中，会自动降为轮询的方式

websocket连接已经建立, 由于websocket没有规范payload的格式, 所以应用需要自己去定义payload的格式

websocket的payload可以是文本也可以是二进制. 应用一般会选择用文本.这个文本是什么格式websocket协议本身并没有规定, 由应用自己来定.

于是Stomp.js来了

stomp是一个用于client之间进行异步消息传输的简单文本协议.

2、在vue中的使用

npm 安装
npm install sockjs-client --save
npm install stompjs --save

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
let stompClient
function createWS(_this) {
  const url = xxx
  if (!stompClient) {
    const socket = new SockJS(url)
    // socket.readyState    socket的连接状态
    // socket 也提供了send close等等方法可以在SockJS的库文件中找到
    stompClient = Stomp.over(socket);
  }
  stompClient.connect({}, function (frame) {
    //通过stompClient.subscribe订阅/topic发送的消息
    // 可以写多个
    stompClient.subscribe(`/topic/lxxx`, function (destination) {
      console.log('/topic/locchang----socket---------destination.body', JSON.parse(destination.body))
      const result = JSON.parse(destination.body) // socket 异步返回的数据
    })
    stompClient.subscribe(`/topic/xxx`, function (destination) {
    })
  })
}

function disconnect() { // 断开socket
  if (stompClient) {
    stompClient.disconnect()
    stompClient = null
  }
}

export default {
  createWS,
  disconnect
}