一。用引入js方式
1 在main.js中引入
//引入websocket
import '@/assets/js/sockjs.min.js';
import '@/assets/js/stomp.min.js';
2 在代码里书写
//与服务器建立==>监听是否被扫
scanConnect(){
this.refreshConnect();
var socket = new SockJS('http://118.178.118.114/zjzwfw-zwmp-api/endpoint-websocket');
this.stompClient = Stomp.over(socket);
var _self=this;
_self.stompClient.connect({'token':sessionStorage.getItem('token')}, function (frame) {
console.log(11, _self.stompClient);
});
});
},
//取消与服务器端的链接
disconnect(){
if (this.stompClient != null) {
this.stompClient.disconnect();
console.log("Disconnected",this.stompClient);
}
},
二。用npm构建
// 安装命令行: npm install sockjs-client 和npm install @stomp/stompjs
// 安装并引入相关模块
import SockJS from ``'sockjs-client'``;
import Stomp from ``'stompjs'``;
export ``default {
data() {
return {
dataList: []
};
},
mounted:``function``(){
this``.initWebSocket();
},
beforeDestroy: ``function () {
// 页面离开时断开连接,清除定时器
this``.disconnect();
clearInterval(``this``.timer);
},
methods: {
initWebSocket() {
this``.connection();
let self = ``this``;
// 断开重连机制,尝试发送消息,捕获异常发生时重连
this``.timer = setInterval(() => {
try {
self.stompClient.send(``"test"``);
} ``catch (err) {
console.log(``"断线了: " + err);
self.connection();
}
}, 5000);
},
removeTab(targetName) {
console.log(targetName)
},
connection() {
// 建立连接对象
this``.socket = ``new SockJS(``'[http://xxxxxx:8089/ws](http://xxxxxx:8089/ws)'``);//连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
// 获取STOMP子协议的客户端对象
this``.stompClient = Stomp.over(``this``.socket);
// 定义客户端的认证信息,按需求配置
var headers = {
login: ``'mylogin'``,
passcode: ``'mypasscode'``,
// additional header
'client-id'``: ``'my-client-id'
};
// 向服务器发起websocket连接
this``.stompClient.connect(headers,(frame) => {
this``.stompClient.subscribe(``'/topic/chat_msg'``, (msg) => { ``// 订阅服务端提供的某个topic
consolel.log(msg.body); ``// msg.body存放的是服务端发送给我们的信息
});
}, (err) => {
});
},
disconnect() {
if (``this``.stompClient != ``null``) {
this``.stompClient.disconnect();
console.log(``"Disconnected"``);
}
}
}
};
