socket.io로 통신할 때 기억 해야할 두가지
받는 코드는 on, 보내는 코드는 emit

예제

예제로 빠르게 알아보자 (진짜 쉬움)

아래 코드는 Express를 이용한 백엔드 서버다.

import express from "express";
import { createServer } from 'http';
import { Server } from 'socket.io';

const app = express();
// app.use(cors());

const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
  },
});

io.on('connection', (socket) => {
  // 유저 연결
  console.log(`User Connected: ${socket.id}`);
  
  // client로 부터 send_message를 받았을 때
  socket.on("send_message", (messageFromClient) => {
    console.log(messageFromClient);
    // client로 부터 받은 메세지 다시 전달.
    io.emit('chat_message', {message :messageFromClient})
  });
});

vscode에서socket.on() on에 마우스 커서를 올리면 아래 사진에서 알려주듯이 2개의 파라미터를 필요로한다.

위에서 언급했듯이 on은 클라이언트 => 서버로 받는거다!!

• ev - 이벤트의 이름
• listener - 콜백함수

이벤트의 이름은 말대로 이벤트의 이름을 우리가 짓는거다
아무렇게나 지어도 된다.

콜백함수에는 어떤 행동을 취할건지를 적어주면된다.
나는 emit을 사용해 클라이언트 측에서 준 메세지를 다시 보내줬다.

자 다시 프론트 코드(React)를 보자

import { useEffect, useState } from "react";
import { io } from 'socket.io-client';

const socket = io('http://localhost:3010'); 

function App() {
  const [message, setMessage] = useState("");
  const [receiveMsg, setReceiveMsg] = useState([]);

  useEffect(() => {
    // 메시지를 수신할 때마다 실행
    const handleReceiveMessage = (data) => {
      setReceiveMsg((prevMessages) => [...prevMessages, data.message]);
    };
    
    socket.on("chat_message", handleReceiveMessage);
    
     // (cleanup) 함수 추가
    return () => {
      socket.off("chat_message", handleReceiveMessage);  // 리스너를 제거하여 중복 등록 방지
    };
  }, []);
  
  // client -> server 메세지 보내기
  const sendMsgWithEnter = (e) => {
    if(e.key === "Enter") {
      socket.emit("send_message", message);
      setMessage("");
    }
  }

  return (
    <div>
      <ul>
        {receiveMsg.map((msg, i) => (
          <div key={i}>{msg}</div>
        ))}
      </ul>
      <input 
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        onKeyDown={sendMsgWithEnter}
      />
    </div>
  );
}

export default App;

useEffect안에서 서버에서 보내는 데이터를 on을 통해서 받고있다.

참고로 서버, 클라이언트 간에 ev이름은 동일하게 적어줘야한다.
이벤트 이름이 "chat_message"와 같이 동일해야된다는 말이다.

서버에서 보낼 때
io.emit('chat_message', {message :messageFromClient})
클라이언트에서 받을 때
socket.on("chat_message", handleReceiveMessage)

이렇게 하면 on, emit을 통해
클라이언트 -> 백엔드(socket.io)
백엔드(socket.io) -> 클라이언트

간 소통이 가능해진다.