ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Player update
    Project using node.js/Cloning Catch-Mind 2020. 12. 17. 10:10

    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

    'Project using node.js > Cloning Catch-Mind' 카테고리의 다른 글

    Game Start event  (0) 2020.12.18
    Log out event with socketIO  (0) 2020.12.17
    Erase canvas with socketIO  (0) 2020.12.17
    Fill the canvas with socketIO  (0) 2020.12.17
    Drawing canvas with socketIO  (0) 2020.12.15

    댓글

Designed by Tistory.