[TIL] 최종 팀 프로젝트 03

최하온·2024년 4월 16일
0

TIL

목록 보기
62/71
post-thumbnail

🚨Issue occuring


🚨 front에서 userid를 받아와 user를 구분하는게 아닌 로그인을 하면 인증이 되어있는 상태로 채팅을 할 수 있어야함.

🚨🚨 WebRTC로 N:M 간 통신을 위해 SFU서버, 미디어 서버 구축

💦What I tried


🚨

Guard 사용

  • 브라우저에서 socket 연결 시(chat) 토큰을 받아 올 수가 없음
    → 연결 시에는 아무나 입장하게하고 방에 입장할 때 guard 사용
    → login→channel 입장→chat 이용 이기때문에 기획과 다름

redis를 사용

  • 소켓 연결시 고유한 socket.id를 키로, userid를 값으로 redis에 저장
    → 위에 마찬가지로 Login한 상태면 user가 이미 인증이 되어 있어야함.

🚨🚨

SFU 서버를 직접 구축

Kurento와 mediasoup 등 미디어 서버 사용

💡How solve issue


  1. user가 Login을 할 때 token을 cookie에 담아 전달 후 redis에 저장

2-1. socket 연결 시 cookie 유효성 검사 로직 후 redis에 저장

// Backend
async handleConnection(socket: Socket & { user: User }, data: any) {
    console.log(`connect: ${socket.id}`);
    const cookie = socket.handshake.headers.cookie;

    if (!cookie) {
      throw new WsException('토큰이 없습니다.');
    }
    
    try {
      const token = cookie.split('=')[1];
      const payload = this.jwtService.verify(token, { secret: this.config.get<string>('JWT_SECRET_KEY') });
      const user = await this.userService.findUserByEmail(payload.email);

      socket.user = user;
      const userId = socket.user.id;
      await this.redis.set(`socketId:${socket.id}`, +userId);
      return true;
    } catch (error) {
      throw new WsException(error.message);
    }
  }

2-2. header에 담긴 cookie를 받아 온 뒤 token을 auth에 입력.

// Frontnd
const token = document.cookie;
const roomSocket = io('http://localhost:3000/room', { 
auth: { token: token } 
});

0개의 댓글