웹소켓 연결 기록

next.js로 socket.io를 이용해 채팅을 연결해가는 과정

• socket.io의 트래픽 격리 구분

1)	Event: 이벤트는 소켓 연결을 통해 클라이언트와 서버간에 전송 된 메시지.
	이벤트 이름은 서버와 클라이언트에서 동일하게 선언하여야 함
	(JSON, 문자열, 이진 등 모든 형식의 데이터 포함 가능)
    
    ex) 해당 프로젝트의 경우 "message"

2)	Namespace: 네임 스페이스는 클라이언트와 서버 간의 별도의 통신 채널.
	단일 서버에서 여러 네임 스페이스를 작성할 수 있으며 
    클라이언트는 특정 네임 스페이스에 연결하여 해당 네임 스페이스의 
    다른 클라이언트에게만 이벤트를 수신하거나 방출 할 수 있음
    
    ex) 해당 프로젝트의 경우 : 포트변호 이후
    `http://url주소:포트번호?roomId=${roomId}&category="category"`

1. 소켓을 연결하고 소켓state에 담는다. (서버와 최초 연결)

  const [socket, setSocket] = React.useState<Socket | null>(null);
  const [messages, setMessages] = React.useState<Message[] | []>([]);

  React.useEffect(() => {
    const prevSocket = io(
      `http://url주소:포트번호?roomId=${roomId}&category="category"`,
      {
        transports: ["websocket"],
      }
    );
    setSocket(prevSocket);
  }, [setSocket]);

첫 연결 시 서버에서 알려준 url로 먼저 연결하고 방이름에 따라 이후 분기처리인지, 아니면 처음부터 방이름으로 분기를 하고 시작하는지 헷갈렸는데, 백엔드측에 확인해보니 첫 연결부터 방이름과 카테고리까지 확인 후 연결해주는 서버였다.

2. socket에서 메세지 수신

const messageListener = (message: Message) =>
    setMessages([...messages, message]);

React.useEffect(() => {
    socket?.on("message", messageListener);
  }, [messages, messageListener]);

on : 클라이언트 또는 서버에서 이벤트에 대한 리스너를 등록하는 데 사용. 이벤트 이름과 이벤트를 처리하기 위한 콜백 함수라는(해당 프로젝트에서는 messageListener) 두 가지 이상의 인수가 필요함.

3. socket을 통해 메세지 송신

socket?.emit("message", data)
// 서버에서 설정한 형식에 맞춰 data 생성 후 송신

emit : 클라이언트에서 서버로 또는 서버에서 클라이언트로 이벤트를 보내는 데 사용. 이벤트 이름과 보낼 데이터라는 두 가지 이상의 인수가 필요함.

이슈: WebSocket connection to 'ws://url:8080/ws' failed:
서버와의 WebSocket 연결에 실패했다는 의미, 방이름을 추가해서 연결했더니 연결되었다.

코드가 생각보다 짧게 나오고 서버에서 만든 소켓이랑 형식만 맞추면 되었기때문에 생각보다 간단했다.