weixin_58412143 2022-03-02 16:28 采纳率: 91.6%
浏览 72
已结题

vue 轴实现SockJS +websocket请求

1Vue里引入  import websocket from '../../utils/websocket.js';**PS:但是好像没有引入进来不知道为什么,确定路径没有写错**
2// 安装并引入相关模块——此部分写在了websocket.js里
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {
 data() {
  return {
  dataList: []
  };
 },
 mounted:function(){
   console.log("09999")
  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('ws://47.94.52.215:8001/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) => {
    console.log("发起websocket连接成功");
    // this.stompClient.subscribe('/pc', (res) => { // 订阅服务端提供的某个topic
    // consolel.log(res.body); // msg.body存放的是服务端发送给我们的信息
    // });
     this.stompClient.subscribe('/topic/chat_msg', (msg) => { // 订阅服务端提供的某个topic
     consolel.log(msg.body); // msg.body存放的是服务端发送给我们的信息
     });
  }, (err) => {
    console.log("发起websocket连接失败");
  });

  },
  disconnect() {
  if (this.stompClient != null) {
   this.stompClient.disconnect();
   console.log("Disconnected");
  }
  }
 }
};

  • 写回答

1条回答 默认 最新

  • weixin_58412143 2022-03-09 15:34
    关注

    1

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月17日
  • 已采纳回答 3月9日
  • 创建了问题 3月2日

悬赏问题

  • ¥15 nslt的可用模型,或者其他可以进行推理的现有模型
  • ¥15 arduino上连sim900a实现连接mqtt服务器
  • ¥15 vncviewer7.0安装后如何正确注册License许可证,激活使用
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并2
  • ¥66 关于人体营养与饮食规划的线性规划模型
  • ¥15 基于深度学习的快递面单识别系统
  • ¥15 Multisim仿真设计地铁到站提醒电路
  • ¥15 怎么用一个500W电源给5台60W的电脑供电
  • ¥15 请推荐一个轻量级规则引擎,配合流程引擎使用,规则引擎负责判断出符合规则的流程引擎模板id
  • ¥15 Excel表只有年月怎么计算年龄