webRTC 정리편

오늘은 프론트에서 webRTC 서버연결을 해보자고 하여 세팅을 준비했다.

그리고 오늘은 좀 서버 연결하는데 있어서 어려울거 같아 오프라인으로 만나서 해보기로 하였다.

const app = require("./app");
const http = require("http");

const server = http.createServer(app);
const io = require("socket.io")(server, {
  cors: {
    origin: "*",
    // methods: ["GET", "POST"],
    // allowedHeaders: ["my-custom-header"],
    credentials: true,
  },
});

// 어떤 방에 어떤 유저가 들어있는지
let users = {};
// socket.id기준으로 어떤 방에 들어있는지
let socketRoom = {};

const MAXIMUM = 2;

io.on("connection", (socket) => {
  console.log(socket.id, "connection");
  socket.on("join_room", (data) => {
    console.log("join_room: ", data);

    // 방이 기존에 생성되어 있다면
    if (users[data.room]) {
      console.log("27줄", users[data.room]);

      // 현재 입장하려는 방에 있는 인원수
      const currentRoomLength = users[data.room].length;
      if (currentRoomLength === MAXIMUM) {
        // 인원수가 꽉 찼다면 돌아갑니다.
        socket.to(socket.id).emit("room_full");
        return;
      }

      // 여분의 자리가 있다면 해당 방 배열에 추가해줍니다.
      users[data.room] = [...users[data.room], { id: socket.id }];
    } else {
      // 방이 존재하지 않다면 값을 생성하고 추가해줍시다.
      users[data.room] = [{ id: socket.id }];
    }
    socketRoom[socket.id] = data.room;

    // 입장
    socket.join(data.room);
    console.log("입장 !!!!", data.room);

    // 입장하기 전 해당 방의 다른 유저들이 있는지 확인하고
    // 다른 유저가 있었다면 offer-answer을 위해 알려줍니다.
    const others = users[data.room].filter((user) => user.id !== socket.id);
    if (others.length) {
      io.sockets.to(socket.id).emit("all_users", others);
    }
  });

  socket.on("offer", (sdp, roomName) => {
    console.log("offer: ", roomName);
    // offer를 전달받고 다른 유저들에게 전달해 줍니다.
    socket.to(roomName).emit("getOffer", sdp);
  });

  socket.on("answer", (sdp, roomName) => {
    console.log("answer: ", roomName);
    // answer를 전달받고 방의 다른 유저들에게 전달해 줍니다.
    socket.to(roomName).emit("getAnswer", sdp);
  });

  socket.on("candidate", (candidate, roomName) => {
    console.log("candidate :", roomName);
    // candidate를 전달받고 방의 다른 유저들에게 전달해 줍니다.
    socket.to(roomName).emit("getCandidate", candidate);
  });

  socket.on("disconnect", () => {
    // const roomID = socketRoom[socket.id];
    // console.log("roomID: ", roomID);
    // socket.leave(roomID);
    // socket.to(roomID).emit("leave", socket.id);
    // 방을 나가게 된다면 socketRoom과 users의 정보에서 해당 유저를 지워줍니다.
    const roomID = socketRoom[socket.id];
    console.log("86 users: ", users);
    console.log("87 roomId: ", roomID);
    console.log("88 users[roomID]: ", users[roomID]);
    console.log("89 socket.id: ", socket.id);
    if (users[roomID]) {
      users[roomID] = users[roomID].filter((user) => user.id !== socket.id);
      if (users[roomID].length === 0) {
        delete users[roomID];
        return;
      }
    }
    delete socketRoom[socket.id];
    console.log("91 users[roomID]: ", users[roomID]);
    console.log("98 delete socketRoom[socket.id]: ", socketRoom[socket.id]);
    socket.broadcast.to(users[roomID]).emit("user_exit", { id: socket.id });
  });
});

module.exports = { server };

우선 우리가 이렇게 세팅을 하고 최대인원을 2명까지만 허용되게끔 하였다.

코드를 보면 console.log 가 굉장히 많은것을 볼 수 있다.

사실 큰 이유가 있다.... 처음에는 정상적으로 1:1로 소통이 가능하나 새로고침을 누르면 오류가 나오면서 (추후에 어떤 오류인지 다시 스크릿샷을 찍어 수정하여 올리겠다) 1:1 통신이 안된다.

진짜 웃긴거는 프론트에서 코드를 지웠다가 다시 쓰거나 그러면 다시 통신이 된다는거.... 도저히 이해가 가지 않는다... 누구도 이해를 하지 못하는 상황이다.

현재 지금은 통신이 되는걸로 만족해 해야한다. 모의 면접 API를 어느정도 완성시켜야 토요일에 발표를 할 수 있기 때문에...

사실 아직까지는 webRTC에 대해 계속 도전해보며 문을 두드리고 있지만 아직은 우리 모두 어려움을 느끼고 있다. 좀 더 깊게 파보면서 공부하고 서로 소통하면서 이 어려움의 길을 뚫어야할거 같다..

화이팅 합시다... !!