[Project] Websocket으로 구현한 웹 메신저 - Client.

기술 스택

클라이언트를 만들때 사용할수 있는 기술 스택은 React, Vue, JSP 등이 있다. 대부분 websocket을 지원하기때문에 사용하기 편한것을 선택하면 된다. 나는 사용해본 경험이 있기에 익숙한 React를 선택했다.

웹소켓 연결하기

React에서 웹소켓 통신을 하기위해 react-stomp라는 라이브러리를 사용했다. react 프로젝트 생성후 추가해주도록 하자.

https://www.npmjs.com/package/react-stomp

npm install react-stomp

or

yarn add react-stomp

라이브러리 설치가 끝났다면 웹소켓을 연결할 페이지를 작성할때 컴포넌트를 import하여 사용하면 된다.

import React, { useRef } from 'react'
import SockJsClient from 'react-stomp';

export default function Client(){
    const $websocket = useRef(null); 
    let topics = ['/topic/'+userId];

    return (
        <div>       
            <SockJsClient
              url= 'http://localhost:8080/chat'
              topics={topics}
              onMessage={msg => console.log(msg)}
              ref={$websocket}
            />
        </div>    
    )
}

SockJsClient 컴포넌트를 import후 서버와 연결해준다. url에 springboot로 만들었던 서버의 접근 url을 넣어주고 topic을 설정해준다. topic은 클라이언트와 서버간의 약속같은 개념이다. 특정한 topic을 구독하고 있는 클라이언트가 있을때 서버가 해당 topic에 대해 메시지를 전송하면 그 topic을 구독하고 있는 클라이언트들만 해당 메시지를 받을수 있게된다.
이해하기 어렵다면 라디오를 생각하면 이해하기 쉽다. 방송국(서버)이 특정 주파수(topic)에 맞춰 라디오 방송을 송신한다면 그 주파수(topic)에 채널을 설정한 라디오(클라이언트)에서만 해당 방송을 들을수 있게된다.
나는 클라이언트에 로그인한 사용자의 id로 고유한 topic을 생성하였고 서버에 id를 기반으로 메시지를 전달할 수 있도록 하였다.