웹소켓 봉인 과정을 기록합니다

한 응용 프로그램에서 웹소켓은 일반적으로 하나의 예로 존재한다. 즉, 전체 응용에서 웹소켓의 실례는 시종 유일하다.그러나 때때로 우리가 웹소켓의 실례를 사용해야 할 때, 웹소켓이 아직 실례화되지 않았기 때문에 비동기적인 형식으로 실례를 얻어야 한다.
1. 포장.먼저 socket을 만듭니다.ts 파일

import EventEmitter from 'events'; //   events  
const ee = new EventEmitter();
class Ws {
 private wsUrl: string = '';
 private socket: WebSocket | undefined; // socket 
 private lockReconnect: boolean = false; //  
 private timeout: NodeJS.Timeout | undefined;

 //  socket， ， wsUrl
 public init(wsUrl: string) {
  this.wsUrl = wsUrl;
  this.createWebSocket();
 }

 //  socket 
 public getInstance(): Promise<WebSocket> {
  return new Promise((resolve, reject) => {
   if (this.socket) {
    resolve(this.socket);
   } else {
    ee.on('socket', (state: string) => {
     if (state === 'success') {
      resolve(this.socket);
     } else {
      reject();
     }
    });
   }
  });
 }

 //  socket
 private createWebSocket() {
  try {
   console.log('websocket  ');
   const socket = new WebSocket(this.wsUrl);
   socket.addEventListener('close', () => {
    console.log('websocket  ');
    this.socket = undefined;
    this.reconnect();
   });
   socket.addEventListener('error', () => {
    console.log('websocket  ');
    this.socket = undefined;
    this.reconnect();
   });
   socket.addEventListener('open', () => {
    //  
    // this.heartCheck.start();
    console.log('websocket open');
    this.socket = socket;
    ee.emit('socket', 'success');
   });
   socket.addEventListener('message', (event) => {
    console.log('websocket  ', event);
   });
  } catch (e) {
   console.log('socket catch error', e);
   this.reconnect();
  }
 }

 //  
 private reconnect() {
  if (this.lockReconnect) {
   return;
  }
  console.log('websocket  ');
  this.lockReconnect = true;
  // ， 
  this.timeout && clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
   this.createWebSocket();
   this.lockReconnect = false;
  }, 5000);
 }
}

export default new Ws();

2. 도입 및 사용

import socket from '@/utils/ws';

socket
 .getInstance()
 .then((ws) => {
   //   ws   websocket，  websocket   api
  console.log('getInstance ws', ws);
  ws.addEventListener('message', (event) => {
    console.log('ws  ', event);
   });
 })
 .catch(() => {});

이상은 웹소켓 봉인 과정의 상세한 내용을 한 번 기록하는 것입니다. 웹소켓 봉인에 관한 더 많은 자료는 저희 다른 관련 글에 주목하세요!