Socket.io 연습하기1

간단한 실시간 채팅을 만들기 위해 Socket.io를 공부해보기로 했다.
검색을 해보니 예시가 꽤 많았다. 하지만 나의 얕은 지식으로 놀랄만한 일이 발생했다.
최근에 계속 공부하던 Next.js로는 어려워 보였기 때문이다.
서버가 필요하다는 내용을 보고 위기를 느꼈지만 다행히 express를 사용한 많은 예시들이 도움이 되었다.

이곳저곳 돌아다니며 수많은 복붙을 시도하다가 결국 공식문서에서 가장 큰 도움을 받았다..!
socket.io (공식문서 주소도 socekt.io...)

과정

첫 시도의 목표는 어떤 클라이언트에서 메시지를 보내면 서버에 접속한 모든 클라이언트들이 그 메시지를 받는것이였다.
처음엔 설명하기도 어려울 정도로 이상하게 작동했다..
한쪽에서 보내면 상대방이 두번 메시지를 보내야 상대방에게 보였다..
이유는 아직도 모르겠다..
그냥 새로 시작해서 소소한 성공을 이루었다..!

결과

<서버>

const express = require("express");
const http = require("http");
const socketIO = require("socket.io");

// localhost 포트 설정
const port = 5000;

const app = express();

// server instance
const server = http.createServer(app);

// socketio 생성후 서버 인스턴스 사용
const io = socketIO(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

//모두에게 보일 메시지 배열
const showMsg = [];

// socketio
io.on("connection", (socket) => {
  console.log("connected: ", socket.id);
  socket.on("hello", (msg) => {
    console.log("서버에서 로그: ", msg);
  });
  const sendToAll = () => {
    console.log("전체메시지: ", showMsg);
    socket.emit("to-all", showMsg);
    io.emit("to-all", showMsg);
  };

  socket.on("send-to-server", (msg) => {
    console.log("msgFromClient: ", msg.msg);
    showMsg.push(msg.msg);
    sendToAll();
  });
  socket.on("disconnect", (reason) => {
    console.log("socket disconnected: ", socket.id, reason);
  });
});

server.listen(port, () => console.log(`Listening on port ${port}`));

<클라이언트>

import React, { useState, useEffect } from "react";
import queryString from "query-string";
import io from "socket.io-client";

const ENDPOINT = "http://localhost:5000";

const socket = io.connect(ENDPOINT);

const Chat = () => {
  socket.on("to-all", (text) => {
    //console.log("TEXT: ", text + "==id:" + socket.id);
    console.log("메세지: ", text);
  });

  const [msg, setMsg] = useState("");
  const [showMsg, setShowMsg] = useState([]);

  const msgHandle = (e) => {
    //console.log("msg: ", e.target.value);
    setMsg(e.target.value);
  };

  const sendMsg = () => {
    socket.emit("send-to-server", { msg });
    setMsg("");
  };
  return (
    <div>
      <input type="text" placeholder="메시지 입력" onChange={msgHandle}></input>
      <button onClick={sendMsg}>전송</button>
      <div>
        <span>메시지: </span>
        {/* {showMsg.map((msgList, index) => (
          <p key={index}>{msgList}</p>
        ))} */}
      </div>
    </div>
  );
};

export default Chat;

--첫번째 메시지

--두번째 메시지

--세번째 메시지

모든 클라이언트에게 메시지를 전달하는 과정이 어려웠다.

socket.broadcast.emit("hello", "world");

처음에 사용한 broadcast.emit은 메시지를 보낸 클라이언트를 제외한 나머지 클라이언트들에게만 보내는 것이였다..!
여기서 한참을 헤매다가 공식문서에서

io.emit("hello", "world");

이걸 발견했다. 보낸 클라이언트까지 모든 클라이언트에게 보낸다.
순식간에 진행속도가 빨라졌다....
역시 한번에 될 리가 없었다...
첫 시도는 여기서 만족..!

로그로 메시지가 전달되는 걸 확인할 수 있었다.
수많은 로고가 찍히고 사용자와 방에 대한 설정도 아직 없다.
아직 갈 길이 멀지만 그럴싸한 실시간 채팅방을 위해 화이팅!!✊