Add points

점수 부여

// socketController.js

export const socketController = (socket, io) => {
  const addPoints = (id) => {
    sockets = sockets.map((socket) => {
      if (socket.id === id) socket.points += 10;
      return socket;
    });
    sendPlayerUpdate();
    endGame();
  };

  socket.on(events.sendMsg, ({ message, username }) => {
    if (word === message) {
      addPoints(socket.id);
      superBroadcast(events.newMsg, {
        message: `Winner is ${socket.username}, word was ${word}`,
        username: "Bot",
      });
    } else broadcast(events.newMsg, { message, username });
  });
 };

   제시된 word를 게임 참가자가 맞추면 10 point를 부여한다.

새로 고침해도 점수와 user name 정보 유지

// player.js

import { getSocket } from "./sockets";

const USERNAME = "username";

export let timeout = null;

export const handleGameEnded = () => {
  setInterval(handleRefresh, 1000);
};

const handleRefresh = () => {
  let username = localStorage.getItem(USERNAME);
  getSocket().emit(window.events.refresh, { username });
};

timeout = setInterval(handleRefresh, 1000);

// sockets.js

disconnect: "disconnect",
refresh: "refresh",

// chat.js

import { timeout } from "./player";

const handleSendMsg = (e) => {
  ...
  clearTimeout(timeout);  // 추가된 코드
  ...
};

   socket은 새로 고침하면 값이 바뀐다. 그렇기 때문에 최신 socket 값을 유지하기 위해서 Client 측에서 자신의 socket 정보를 setInterval()을 통해서 전달해줘야 한다. 그리고 불필요한 traffic을 줄이기 위해 사용자가 채팅을 치는 순간 socket 최신화를 그만두고, 다시 새로 고침을 하면 handleGamedEnded() 함수가 실행되어서 socket 최신화를 진행한다.

// socketController.js

  socket.on(events.disconnect, () => {
    endGame();
  });
  socket.on(events.refresh, ({ username }) => {
    sockets = sockets.map((aSocket) => {
      if (aSocket.username === username) {
        aSocket.username = username;
        aSocket.id = socket.id;
        socket.username = username;
      }
      return aSocket;
    });
  });

   Client 측으로부터 받은 socket을 토대로 socket을 최신화 한다.

소스 코드

github.com/zpskek/guessMind-v3/commit/79cd7189215a4dedb7490831fdff9267900121f9#