websocket 封装在vue中使用

最新推荐文章于 2024-06-21 16:19:05 发布

喜欢白朴

最新推荐文章于 2024-06-21 16:19:05 发布

阅读量652

点赞数 2

分类专栏： vue websocket 文章标签： websocket vue.js

本文链接：https://blog.csdn.net/m0_62351100/article/details/126768980

版权

本文介绍了在Vue项目中如何封装并使用WebSocket进行实时通信，特别是在大屏可视化场景的应用。通过在项目启动时建立连接，并在页面中便捷调用，实现数据的实时更新。

摘要由CSDN通过智能技术生成

最近公司要用websocket 搞一个大屏可视化，找了许多案例才弄明白

import {
    getToken } from '@/utils/auth'

export default class SocketServer {
   
  // 定义单例(单个实例)模式
  static instance = null
  static get Instance() {
   
    if (!SocketServer.instance) {
   //防止创建多个实例对象
      SocketServer.instance = new SocketServer()
    }
    return SocketServer.instance
  }
  // 和服务端连接的socket对象
  ws = null
  // 存储回调函数
  callBackMapping = {
   }
  // 标识是否连接成功
  connection = false
  // 记录重试的次数
  sendRetryCount = 0;

  // 重新连接尝试的次数
  connectRetryCount = 0;
  //  定义连接服务器的方法
  connect() {
   
    // 连接服务器
    if (!window.WebSocket) {
    return console.log('您的浏览器不支持WebSocket') }
    this.ws = new WebSocket("ws:/