0. socket.io, 기본 및 룸 소켓 사용하기

소켓.IO는 웹 페이지에서 클라이언트와 서버의 소켓 통신을 위한 라이브러리다.

실질적으로 web에서는 서버에 요청을 보내고 응답을 받으면 통신이 끝나기 때문에 실시간 통신이 불가능하지만, socket.io는 특정 ms마다 계속 서버와 요청 응답 통신을 하기 때문에 실시간 통신이 된다.. (서버에서 계속 요청과 응답을 받기 때문에 부하가 좀 걸리게 되니 참고하는게 좋다.)

 

웹 페이지만 구현하다 보면 실시간 통신을 직접 다루는 일은 별로 없지만, 결국에는 개발 시 socket은 계속 사용하게 된다.

서버 코드

import { Server } from "socket.io";

export default (server) => { //서버를 인자로 받을거다. 여기서 서버는 app.listen의 return 값이다.
  const io = new Server(server, {
    cors: { origin: ["http://localhost"] }, //cors
    path: "/socket.io", //서버에서 router를 자동으로 생성한다.
    //client의 src = 랑 주소가 맞아야 한다. http://localhost:3010/socket.io
    //클라이언트 js와도 맞아야 함 "로컬:3010/socket.io"
  });

  // 네임스페이스 등록
  const room = io.of("/room"); //room 이라는 이름에 socket.io의 '방'을 만든거라고 생각하면 된다.

  // chat 네임스페이스 전용 이벤트
  room.on("connection", (socket) => { //room이라는 이름의 '방'에 누군가가 접속했을 경우 실행된다. socket은 접속자의 정보를 가지고있다.
    const roomIdStr = socket.handshake.query.roomId; //여기서 roomId는 내가 설정한 변수 이름이다.
    const id = +roomIdStr;

    //룸에 접속
    socket.join(id); //socket이라는 접속자를 .join 함수로 (인자)끼리만 '통신'하게 한다.
    //즉, room이라는 '방'에 들어온 접속자는 자동으로 query문이 가지고 있는 id 값을 가진 '통신망'에서 값을 주고받게 된다.

    console.log(`chat${id} 네임스페이스에 접속`);

    socket.on("disconnect", () => { // '방'을 나갈시 실행되는 함수
      console.log(`chat${id} 네임스페이스 접속 해제`);

      //접속 해제
      socket.leave(id); //통신망을 끊는다.
    });

    통신 예시 코드
    //쓰기
    socket.on("chat", async (data) => {
          //여기서 필요한 로직을 작성한다.

        //보내기
        room.to(id).emit("chat", chatEleCreater(MongoData)); //룸의 특정 id로만 보내려고 room.to()함수를 사용하였다.
      } catch (err) {
        console.log("roomsocket.js err@@@@", err);
      }
    });
  });
};

클라이언트 코드

  <script src="http://로컬:3010/socket.io/socket.io.js"></script> 스크립트를 서버에서 받아온다.
  <script src="./socket코드가 있는 파일.js"></script>

소켓코드.js

    const socket = io(`/room${roomIdQuery}`, { //'방'이름 ${}로 붙인건 URL query이다.
      path: "/socket.io", //서버에서 설정한 주소
    });

    socket.emit("변수명", 데이터);
    socket.on("변수명", 콜백함수);

.on과 .emit

.on은 요청을 받는 것이고
.emit은 요청을 쏘는 것이다.

 

즉, 클라이언트, 서버 모두 on과 emit으로 통신을 하는데
클라이언트에서 .emit()을 사용한다면 서버에서는 .on()으로 받아야한다.

 

.emit()의 첫번째 인자는 변수명, 두번째는 보낼 데이터를 포함한다.
.on()의 첫번째 인자는 변수명, 두번째는 데이터를 처리할 콜백함수다.