一。用引入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() {
// 建立连接对象
// 获取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"
);
}
}
}
};