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

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