[TIL] 230109

줌 클론 코딩 강의를 다 보고 채팅 구현 시작...

잠온다...

일단 시작은 했는데 모르겠다^ㅇ^

 

  const connect = () => {
    client.current = new StompJs.Client({
      webSocketFactory: () =>
        new SockJs(`${process.env.REACT_APP_API_URL}/ws-stomp`), // proxy를 통한 접속
      connectHeaders: {
        // Authorization: new Cookies().get('access_token'),
        // 'Refresh-Token': new Cookies().get('refresh_token'),
      },
      debug(str) {
        console.log(str);
      },
      onConnect: () => {
        subscribe();
        if (nickname) {
          client.current.publish({
            destination: '/pub/chat/messages',
            body: JSON.stringify({
              type: 'ENTER',
              roomId: param.roomId,
              sender: nickname,
              message: `${nickname}님이 게임에 참가하셨습니다.`,
            }),
          });
        }
      },
      onStompError: (frame) => {
        console.log(frame);
      },
    });
    client.current.activate();
  };

여기서

      connectHeaders: {
        // Authorization: new Cookies().get('access_token'),
        // 'Refresh-Token': new Cookies().get('refresh_token'),
      },

이 부분은 어떻게 해야할까

*구글링해보니 client 객체를 만드는 부분인 듯

 

websocketfactory

https://learn.microsoft.com/ko-kr/dotnet/api/microsoft.aspnetcore.http.connections.client.httpconnectionoptions.websocketfactory?view=aspnetcore-7.0 

HttpConnectionOptions.WebSocketFactory 속성 (Microsoft.AspNetCore.Http.Connections.Client)

참고 블로그

https://sg-choi.tistory.com/414

[React] WebSocket

https://github.com/stomp-js/stompjs/issues/322

connectHeaders does not add key to the GET request WebSocket handshake · Issue #322 · stomp-js/stompjs

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

Window.sessionStorage - Web API | MDN

 

https://github-wiki-see.page/m/OhMinsSup/tip-review/wiki/ActiveMQ-StompJs-%EC%97%B0%EA%B2%B0%EB%B0%8F-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%8B%9C-(6) 

ActiveMQ StompJs 연결및 사용 예시 (6) - OhMinsSup/tip-review GitHub Wiki

https://yoon-dumbo.tistory.com/22

WebSoket (stompJS+React) 채팅

http://todayleave.blogspot.com/2016/01/stompjs.html

stomp.js 사용하기