websocket在vue项目中的使用

标签：日志   vue   headers   this   tor   process   验证   假设   配置   

之前与.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函数中放置连接成功后要被调用的函数

websocket在vue项目中的使用

标签：日志   vue   headers   this   tor   process   验证   假设   配置   

原文地址：https://www.cnblogs.com/jocelyn11/p/14272847.html