[TIL] Websocket 멀티서버 구현

-오늘의 코딩테스트

추후 추가 예정

- 오늘 한일

- socket.io 의 join 과 to의 개념 이해

join 과 to를 이해하기 위해선 우선 socket.io의 room의 개념에 대해서 이해하고있어야한다.

room은 멀티플레이어 socket에 유저A와 유저B가 접속할 때 어디로 접속하는지에 대한 방의 정보를 나타낸 것으로 이해하면 된다.

룸에 입장하는 것은 io.socket.get(socket.id).join(RoomName)으로 입장한다.

그리고 이러면 룸에 입장하는 이유등을 이해하여야 하는데

socket에서 멀티플레이어 환경에 유저A의 정보를 B에게 넘겨서 두 화면이 같게 유지하여야한다.

우리는 이것을 위해서 해당 room의 유저의 정보를 뿌리는 코드를 짰다.

export const spawnMonster = (userId, payload, socket, io) => {
  console.log('spawnMonster:', userId);
  // token: userId 전달 안됨
  const { levelsData } = getGameAssets();
  console.log('payload:', payload);
  const { monsterLevel, opponent } = payload;
  console.log('monsterLevel:', monsterLevel);

  setLevel(userId, monsterLevel);

  let currentLevels = getLevel(userId);
  console.log('currentLevels:', currentLevels);
  currentLevels.sort((a, b) => a.level - b.level);
  const currentLevel = currentLevels[currentLevels.length - 1].level;
  console.log('currentLevel:', currentLevel);
  const levelData = levelsData.data.find((level) => level.id === currentLevel);
  let monsterSpawnInterval, hp, power;
  if (levelData) {
    ({ monsterSpawnInterval, hp, power } = levelData);
  } else {
    throw new Error('해당 레벨을 찾을 수 없습니다.');
  }

  const newMonsterID = uuidv4();

  setSpawnMonster(userId, newMonsterID, monsterLevel, monsterSpawnInterval, hp, power);

  socket.emit('updateGameState', {
    monsterID: newMonsterID,
    monsterSpawnInterval,
    monsterHp: hp,
    monsterPower: power,
  });

  io.to(opponent).emit('updateGameState', {
    monsterSpawnInterval,
    monsterHp: hp,
    monsterPower: power,
  });
};

이것은 우리 팀의 코드중 하나인 몬스터 코드의 예이다.

다음과 같이 해당하는 socket의 정보를 유저에게만 뿌리는 것이 아니라 opponent로 해당하는 상대유저의 정보를 확인하고 상대 유저에게도 몬스터의 정보를 뿌려주었다.

opponent의 정보는

const findOpponent = (socket) => {
  const rooms = socket.nsp.adapter.rooms; // 방 정보를 가져옴

  for (const [roomId, sockets] of rooms) {
    if (sockets.has(socket.id)) {
      // 현재 소켓이 방에 있는지 확인
      for (const id of sockets) {
        // 방의 모든 소켓 ID를 순회
        if (id !== socket.id) {
          // 자신이 아닌 경우
          return id; // 상대의 socket.id 반환
        }
      }
    }
  }
  return null; // 상대가 없을 경우 null 반환
};

export default findOpponent;

다음과 같은 코드로 해결하였다.

-오늘 감상

안좋은 일이 있었는데 잘 해결되었으면 좋겠다..

그래도 내가 할 일을 열심히 하고 진짜 잘되게 할것이다..! 화이팅!!!