React Native 웹소켓 채팅 구현

사이드 프로젝트를 하면서 RN으로 채팅을 구현 중이다

 

 

일단 클라이언트에서는 가장 기본인 웹소켓 연결을 구현해봤다

 

우선 웹소켓 연결을 위한 WebSocketProvider를 만들어서 채팅방을 감싸줬습니다.

웹소켓과 관련된 기능들을 함수로 만들까 하다가 어차피 하나의 웹소켓 인스턴스를 사용할 것이기 때문에 클래스를 작성했습니다.

useMemo를 사용해서 토큰이 업데이트 되었을 때 새로운 웹소켓을 생성합니다.

WebSocketContext를 사용해서 채팅방에서 웹소켓을 통해 메시지를 주고 받을 수 있습니다.

import {tokenState} from '@/store/loginAtom';
import React, {createContext, useMemo} from 'react';
import {useRecoilValue} from 'recoil';

type Props = {
  children: React.ReactNode;
};

export const WebSocketContext = createContext<WebSocketClient | null>(null);

export const WebSocketProvider = ({children}: Props) => {
  const token = useRecoilValue(tokenState);

  const webSocket = useMemo(() => {
    if (!token) return null;

    return new WebSocketClient(token.accessToken);
  }, [token]);

  return (
    <WebSocketContext.Provider value={webSocket}>
      {children}
    </WebSocketContext.Provider>
  );
};

export default WebSocketProvider;

 

 

 

WebSocketClient 클래스는 간단합니다.

class WebSocketClient {
  socket: WebSocket | null = null;
  token = '';
  pingInterval: NodeJS.Timeout | null = null;

//생성자에서 토큰을 저장하고 웹소켓 연결 메서드를 호출합니다
  constructor(token: string) {
    this.token = token;
    this.socket = this.connectWebSocket();
  }


//웹소켓 연결 메서드
  connectWebSocket = () => {
    const socket = new WebSocket(
      `요청 uri?authorization=${this.token}`,
    );

    //웹소켓이 연결되면 핑을 설정합니다
    socket.onopen = () => {
      console.log('WebSocket connected');
      this.startPing();
    };

    //웹소켓이 끊겼을 경우, 재연결합니다
    socket.onclose = () => {
      console.log('WebSocket connection closed');
      this.reconnect();
    };

    //받은 메시지를 handleMessage메서드로 넘겨줍니다
    socket.onmessage = e => {
      this.handleMessage(e);
    };

    //에러로 연결이 끊겼을 경우, 재연결합니다
    socket.onerror = err => {
      console.error('WebSocket error:', err);
      this.reconnect();
    };
    
    return socket;
  };

//핑 메서드, 마지막 요청으로부터 30초간 연결이 지속되기 때문에 25초 간격으로 핑
  startPing = () => {
    this.pingInterval = setInterval(() => {
      if (this.socket) {
        this.socket.send(
          JSON.stringify(핑메시지가 들어갈 곳),
        );
      }
    }, 25000);
  };

//핑 인터벌 이벤트를 클리어 하는 메서드
  stopPing = () => {
    if (this.pingInterval) {
      clearInterval(this.pingInterval);
      this.pingInterval = null;
    }
  };

//재연결 메서드
  reconnect = () => {
    console.log('Reconnecting...');
    this.stopPing();
    setTimeout(() => {
      this.connectWebSocket();
    }, 300);
  };

//수신 메시지 핸들 메서드
  handleMessage = (event: WebSocketMessageEvent) => {
    const parse = JSON.parse(event.data);
    console.log(parse);
    //메시지 알아서 핸들
  };

//메시지 전송 메서드
//웹소켓이 연결된 상태에서만 메시지를 전송합니다
  sendMessage = (roomId: number, content: string) => {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      const message = JSON.stringify({action: 'TEXT', roomId, content});
      this.socket.send(message);
    } else {
      console.error('WebSocket is not connected');
    }
  };
}

 

 

사실 웹소켓 통신이 잘 되지는지만 확인한거라서 아직 갈 길이 멀다...

팀원에게 코드리뷰를 받기 전이라서 아마 수정되지 않을까 싶다..

 

 

채팅 퍼블리싱을 다 하고 나면 머리가 아플 것 같다...

채팅 메시지들을 로컬에 저장하고 FCM 처리도 해야 하고,,

 

언제 다하지 ㅎㅎㅎ