一。用引入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‘);//连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息 // 获取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"); } } }};用websocket建立远程连接（vue）
原文地址：https://www.cnblogs.com/miaSlady/p/10000295.html