Player update

Player update

// globalController.js

const superBroadcast = (event, data) => io.emit(event, data);
const sendPlayerUpdate = () => superBroadcast(events.playerUpdate, { sockets });

export const notifyLogin = async (req, res) => {

  io.once("connection", (socket) => {
    io.to(socket.id).emit(events.login, { username });
    	socket.broadcast.emit(events.newUser, { username });
  	});
  sendPlayerUpdate(); // 추가된 부분
  
};

// events.js

addPlayer: "addPlayer",
playerUpdate: "playerUpdate",

   login을 할 때 sendPlayerUpdate()로 새로운 player가 참가했다는 것을 clients에게 알린다.

Player board에 player 정보 생성

// sockets.js

socket.on(events.playerUpdate, handlePlayerUpdate);

// home.pug

.side
  .logout
  	button.link#jsLogOut
  		a(href=routes.logout) Logout
  .player__board#jsPBoard
  	each user in users
  		span #{user.username}: #{user.points}

// player.js

const board = document.getElementById("jsPBoard");

const addPlayers = (players) => {
  board.innerHTML = "";
  players.forEach((player) => {
    const playerElement = document.createElement("span");
    playerElement.innerText = `${player.username}: ${player.points}`;
    board.appendChild(playerElement);
  });
};

export const handlePlayerUpdate = ({ sockets }) => addPlayers(sockets);

  playerBoard 판에 player 정보를 띄운다.

server에게 player 정보 넘겨주기

// sockets.js

socket.on(events.newUser, handleNewuser);

// notifications.js

export const handleLogin = ({ username }) => {
  localStorage.setItem(USERANME, username);
  userNoti(username);
  getSocket().emit(window.events.addPlayer, { username }); // 추가된 코드
};

   다시 서버에게 username과 같이 addPlayer event를 전송한다.

추가된 player를 sockets에 저장하기

// socketController.js

export let sockets = [];

export const socketController = (socket, io) => {
  const broadcast = (event, data) => socket.broadcast.emit(event, data);
  const superBroadcast = (event, data) => io.emit(event, data);
  const sendPlayerUpdate = () =>
    superBroadcast(events.playerUpdate, { sockets });
    
  socket.on(events.addPlayer, ({ username }) => {
    socket.username = username;
    sockets.push({ id: socket.id, points: 0, username });
    sendPlayerUpdate();
  });
 };

   sockets 배열을 생성해서 참가자가 생길 때마다 sockets에 저장한다. 저장 되는 값은 socket의 id, points(점수)와 username이다. 그리고 sendPlayerUpdate로 사용자 정보를 갱신해준다.

home controller

// globalController.js

import { sockets } from "../socketController";

export const home = (req, res) => {
  try {
    res.render("home", {
      pageTitle: "home",
      events: JSON.stringify(events),
      users: sockets,  // 추가된 코드
    });
  } catch (error) {
    console.log(error);
  }
};

// home.pug

.player__board#jsPBoard
        each user in users
          span #{user.username}: #{user.points}

   socketController.js에 있는 sockets를 불러온다. sockets에는 참가자의 목록을 가지고 있다. home을 랜더링할 때 sockets를 users에 담아서 보내면 home.pug에 있는 each user in users가 작동하여 player board에 player 정보가 뜬다.

소스 코드

github.com/zpskek/guessMind-v3/commit/f8e8e505d356219251756078bb2c1fe2fe1c4da3