socket.io 채팅 (3)

Server

const express = require("express");
const app = express();
const http = require("http");
const {Server} = require("socket.io");
const cors = require("cors");

app.use(cors());

const server = http.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}`)
  
  socket.on("join_room", (data) => {
  	socket.join(data);
  });
  
  	socket.on("send_message", (data) => {
      	socket.to(data.room).emit("receive_message", data)
    })
})

server.listen(3001, () => {
  console.log("SERVER IS RUNNING");
});

Client

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

const socket = io.connect("http://localhost:3001");

function App() {
  const [message, setMessage] = useState("");
  const [messageReceived, setMessageReceived] = useState("")
  const [room, setRoom] = useState("")
  
  	const joinRoom = () => {
    	if (room !== '') {
        	socket.emit("join_room", room)
        }
    }
  
  	useEffect(() => {
    	socket.on("receive_message", (data) => {
       		setMessageReceived(data.message)
        })
    }, [socket])
  
	const sendMessage = () => {
      socket.emit("send_message", { message, room }
    }
    
return (
    <>
      <input onchange = {(event) => {
      	  setRoom(event.target.value);
        }}
      />            
  	  <button onclick={joinRoom}>Join Room</button>
      <input onChange = {(event) => {
          setMessage(event.target.value);
        }}
      />
      <h1>Message: </h1>
      {messageReceived}
      <button onclicl={sendMessage}>Send Message</button>
	</>
}

client에서 room 숫자( 123 )를 입력하고, join Room 버튼을 누르게 되면 서버에서 socket.join( room숫자(123) ) 로 들어갈 수 있게 해준다.
client에서 message를 입력하고, Send Message를 누르게 되면
서버에서 socket.to(data.room ( 123 ) ).emit("receive_message", data) 123방에 들어와있는 다른 사람들에게 message를 보내주게 된다.

• Client 추가사항

  const [currentMsg, setCurrentMsg] = useState("");
  const [msgList, setMsgList] = useState([]);

  const sendMessage = async () => {
    if (currentMsg !== "") {
      // 서버에 보낼 정보
      const messageData = {
        room: room,
        user: user,
        message: currentMsg,
        time:
          new Date(Date.now()).getHours() +
          ":" +
          new Date(Date.now()).getMinutes(),
      };

      await socket.emit("send_msg", messageData);
      setMsgList((list) => [...list, messageData]);
      // message를 서버에 보낸 후, msgList를 수정
    }
  };

  useEffect(() => {
    socket.on("receive_msg", (data) => {
      setMsgList((list) => [...list, data]);
    });
  }, [socket]);
	// socket을 의존성 배열에 넣고, 받아온 데이터를 msgList에 추가해준다.

• 추가
  추가적으로 이러한 코드를 더 작성해줘야 연결이 됐었다. (서버쪽은 확실하지 않다..)

const io = socketIo(http, {
pingInterval: 10000,
pingTimeout: 5000,
cors: {
origin: "*",
methods: ["GET", "POST"],
credentials: true,
transports: ["websocket", "polling"],
},
allowEIO3: true,
});

const socket = io.connect("...", {
  path: "/socket.io",
  transports: ["websocket"],
});