之前與.net工程師聯合實時通信，使用的是基於websocket封裝的signalr，這幾次是和java工程師合作，開始了在vue中使用websocket的體驗。具體怎么配置，在此記錄一下，以備不時之需。
1.package.json的dependencies中添加"sockjs-client"和"stompjs";
2.在需要的頁面中引入：
import SockJS from "sockjs-client";
import Stomp from "stompjs";
3.創建連接：
methods: {
initWebSocket() {
let _this = this;
_this.connect();
// 斷開重連機制,嘗試發送消息,捕獲異常發生時重連
_this.timer = setInterval(() => {
try {
// console.log("建立了連接")
_this.stompClient.send("test");
} catch (err) {
console.log("斷線了: " + err);
_this.connect();
}
}, 5000);
}
4. 連接函數：
connect() {
// debugger
let _this= this;
let sock = new SockJS(process.env.SOCKJS_URL);
let stompClient = Stomp.over(sock);
// 不打印日志
// stompClient.debug = null;
me.stompClient = stompClient;
this.$store.commit("setStompClient", stompClient); //保存在store中的{}
_this.headers = {
// Authorization:getToken() //假設登錄后使用token驗證，傳遞token
};
_this.stompClient.connect(_this.headers, function (frame) {
// 連接成功
// console.log('Connected:' + frame);// connected
//實時信息
// 子組件要觸發的函數
_this.successCallback();
}),
() => {
_this.reconnect(process.env.SOCKJS_URL, _this.successCallback);
};
}
備注：process.env.SOCKJS_URL是指配置在config文件夾中dev.env.js測試環境中的SOCKJS_URL；successCallback函數中放置連接成功后要被調用的函數