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)); }); }); }

好了，完成，就是這么簡單。