리액트에서 Socket.io 구현

클라이언트 파트만 다룸

 

패키지 설치

npm install socket.io-client

 

1. 소켓 인스턴스를 참조할 ref를 생성한다.

const socketRef = useRef<Socket | null>(null);

2. 소켓 인스턴스 생성 / 연결 종료

인스턴스 생성 후 useEffect 클린업을 사용해 컴포넌트가 언마운트되면 연결 종료되도록 설정한다.

    useEffect(() => {
    socketRef.current = io("서버 주소");

    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect();
      }
    };
  }, []);

3. 이벤트 리스너 등록

서버에서 "서버와 맞춘 이벤트 이름" 이벤트를 받았을 때 호출될 콜백 함수를 등록한다.

아래 예시 코드는 채팅 내역을 표현하기 위해 쌓이는 채팅을 상태값으로 관리하는 함수를 작성했다.

  useEffect(() => {
    socketRef.current = io("서버 주소");
    
    socketRef.current.on("서버와 맞춘 이벤트 이름", (message: string) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect();
      }
    };
  }, []);

4. 메세지 전송

.emit("서버와 맞춘 이벤트 이름", InputValue)

서버로 "서버와 맞춘 이벤트 이름" 이벤트와 함께 현재 입력된 메시지(InputValue)를 전송.

아래 예시에선 useState대신 ref를 사용했다.

  const handleSubmit = (e: React.FormEvent) => {
	//...
      socketRef.current?.emit("서버와 맞춘 이벤트 이름", currentInputValue);
      // ...
  };

 

최종 코드

"use client";

import React, { useEffect, useRef, useState } from "react";
import io, { Socket } from "socket.io-client";

const Chat = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const inputValueRef = useRef<HTMLInputElement>(null);
  const socketRef = useRef<Socket | null>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (inputValueRef.current) {
      const currentInputValue = inputValueRef.current.value ?? "";
      socketRef.current?.emit("chat message", currentInputValue);
      inputValueRef.current.value = "";
    }
  };

  useEffect(() => {
    socketRef.current = io("http://localhost:3001");

    socketRef.current.on("chat message", (message: string) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect();
      }
    };
  }, []);

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input ref={inputValueRef} placeholder="메시지를 입력해주세요." />
        <button type="submit">전송</button>
      </form>
    </div>
  );
};

export default Chat;