vue使用sockjs-client+stompjs进行websocket连接的方法

1. 什么是sockjs和stompjs

Sock.js(处理兼容性)

支持浏览器：html5的协议，所以老浏览器不支持

兼容怎么办？ 

Sock.js来了

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

spring也对socketJS提供了支持。

Stomp.js（处理传输协议）

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

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

于是Stomp.js来了

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

以上介绍参考链接：https://blog.csdn.net/weixin_42052388/article/details/80313752

2. vue中的使用方法

 首先是安装相应的npm包：

npm install sockjs-client --save npm install stompjs --save

我现在安装的版本是sockjs-client 1.1.5,stompjs 2.3.3

然后在需要建立websocket连接的组件中引入：

import SockJS from 'sockjs-client'; import Stomp from 'stompjs';

在created生命周期中建立连接：

   created:function(){ let socket = new SockJS('http://192.xxx.xx.xxx:xxxx/gas-eqp'); let stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { stompClient.subscribe('/topic/eqp/register', function (message) { console.warn(message.body); console.warn(JSON.parse(message.body)); }); }); }

好了，完成，就是这么简单。