用websocket建立远程连接（vue）

Posted 2021-01-21 米牙

一。用引入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");

  }

  }

 }

};