前端js react 全局websocket 连接类带订阅发布以及使用方法

VIP文章宋德武

已于 2022-09-19 16:33:30 修改

阅读量771

点赞数

文章标签： javascript 前端 react.js

于 2022-09-19 15:10:00 首次发布

本文链接：https://blog.csdn.net/songdewu/article/details/126934203

版权

连接websocket js类，整合聚合发布，其它任意文件进行订阅


//@ts-ignore
import {
    toLogin } from '@/utils/login';
import {
    message } from 'antd';
//@ts-ignore
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
let userId = localStorage.getItem('userId')

interface subscribes {
   
  name: string,
  subscribe: any
}

export class WS {
   

  //链接地址
  socketAddress: string = APP_URL.socketAddress;
  stompClient: any = null;
  socket: any = null;
  messageData: any[] = [];
  conCount: number = 0;
  timerCon: any = null;
  timerStomp:any = null;
  stompCount:number = 0;
  connected: boolean = false;
  subscribeFuns: Map<Function, Function> = new Map();
  subscribes: subscribes[] = []; //{name:'message',subscribe:subscribeFun}
  //链接地址
  urls: {
    name: string, url: string }[] = [
    {
    name: 'message', url: `/user/${
     userId}/topic/message` }, //基地变更消息
    {
    name: 'overTimeMessage', url: `/user/${
     userId}/topic/token/expiration` }, // 离线消息
    {
    name: 'dropLineMessage', url: `/user/${
     userId}/topic/login/repeat` }, // 下线
    {
    name: 'storageMessage', url: `/topic/Storage/message` },  //入库申请
    {
    name: 'chatMessage', url: `/user/${
     userId}/topic/chat` },//聊天消息
  ]

  constructor() {
   
    this.connectWs();

  }

  /**
   * 订阅消息
   * @param fn
   */
  subscribeMessage(fn: Function) {
   
    this.subscribeFuns.set(fn, fn)
  }

  //订阅所有
  subscribeAll(