웹사이트 검색

자바스크립트 - 웹소켓을 사용한 리액트 네이티브의 최적 아키텍처


저는 React-Native와 WebSocket을 사용하여 암호화폐 거래 앱을 만들고 있습니다. 여기 제가 겪고 있는 일반적인 문제들이 있습니다:

  1. 한 번 클래스 밖에서 webSocket을 할당하면 이벤트가 연결되지 않습니다. 어떻게 싱글톤 WebSocket 인스턴스를 만들 수 있나요? 제 코드는 다음과 같습니다:
class WS {
  webSocket: WebSocket;

  constructor() {
    this.webSocket = new WebSocket('socket_url');
    this.webSocket.binaryType = 'arraybuffer';
  }

  _send(coin: string, type: Subject) {
    const subPackage = new SubscribePackage(`${coin}@${type}`);
    this.webSocket.onopen = () => {
      const message = onSendMessageObjNew(subPackage);
      this.webSocket.send(message);
    };
  }

  _message(callback: (event: MessageEvent<any>) => void) {
    this.webSocket.onmessage = callback;
  }

  _unsubscribe(coin: string, type: Subject) {
    const unsubPackage = new UnsubscribePackage(`${coin}@${type}`);
    const message = onSendMessageObjNew(unsubPackage);
    this.webSocket.send(message);
  }

  _error(callback: (event: Event) => void) {
    this.webSocket.onerror = callback;
  }
}
  1. 저는 전체 프로세스를 더 쉽게 관리할 수 있도록 컴포넌트 안의 모든 코인 조각을 연결하고 있습니다. 저는 전체 연결을 redux 안에 중앙 집중화하고 rtq 스트림 업데이트를 사용하여 캐시하는 것이 최선의 방법이라고 생각하지만, 이렇게 하면 성능 문제가 크게 발생할 것입니다. 어느 방법이 더 나을 것이라고 생각하시나요?
  2. 화면이 포커스를 잃었을 때(다른 화면으로 이동할 때) 특정 이벤트의 구독을 취소하고 싶습니다. 사용자가 같은 화면으로 돌아오면 다시 연결됩니다. 구독을 취소한 동일한 이벤트는 다시 구독되지 않습니다. 제 코드 스니펫은 다음과 같습니다:
const ws = useMemo(() => new WS(), []);
  const onSubscribe = () => {
    if(__DEV__) console.log('onSubscribe called!');

    ws._send(name, Subject.Field);
    ws._message(async event => {
      // data manipulation
    });
    ws._error(event => {
      if (__DEV__) console.log('error event>>>', event);
    });
  };

  const onUnSubscribe = () => {
    ws._unsubscribe(name, Subject.Field);
  };

  const screenListenerHandler = () => {
    navigation.addListener('focus', onSubscribe);
    navigation.addListener('blur', onUnSubscribe);
  };

  useEffect(() => {
    screenListenerHandler();
  }, []);
  1. UI와 JS 스레드를 차단하지 않기 위해 WebSocket 연산을 백그라운드 스레드에서 실행하고 싶습니다. 어떻게 할 수 있거나 가능한가요?

  2. 제가 언급하지 않은 다른 제안이 있으면, 여러분의 실천 방법을 공유해 주세요.