1司顿、簡介
SockJS是一個瀏覽器JavaScript庫秀撇，提供了一個類似websocket的對象脐恩。SockJS為您提供了一個連貫的，跨瀏覽器的Javascript API壤圃，它在瀏覽器和web服務(wù)器之間創(chuàng)建了一個低延遲陵霉，全雙工，跨域通信通道伍绳。
Sock.JS的一大好處在于提供了瀏覽器兼容性。優(yōu)先使用原生WebSocket乍桂，如果在不支持websocket的瀏覽器中冲杀，會自動降為輪詢的方式
websocket連接已經(jīng)建立, 由于websocket沒有規(guī)范payload的格式, 所以應(yīng)用需要自己去定義payload的格式
websocket的payload可以是文本也可以是二進(jìn)制. 應(yīng)用一般會選擇用文本.這個文本是什么格式websocket協(xié)議本身并沒有規(guī)定, 由應(yīng)用自己來定.
于是Stomp.js來了
stomp是一個用于client之間進(jìn)行異步消息傳輸?shù)暮唵挝谋緟f(xié)議.
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的連接狀態(tài)
// socket 也提供了send close等等方法可以在SockJS的庫文件中找到
stompClient = Stomp.over(socket);
}
stompClient.connect({}, function (frame) {
//通過stompClient.subscribe訂閱/topic發(fā)送的消息
// 可以寫多個
stompClient.subscribe(`/topic/lxxx`, function (destination) {
console.log('/topic/locchang----socket---------destination.body', JSON.parse(destination.body))
const result = JSON.parse(destination.body) // socket 異步返回的數(shù)據(jù)
})
stompClient.subscribe(`/topic/xxx`, function (destination) {
})
})
}
function disconnect() { // 斷開socket
if (stompClient) {
stompClient.disconnect()
stompClient = null
}
}
export default {
createWS,
disconnect
}
