Socket.io возможная проблема эмиттера - PullRequest
Новая
       19

Socket.io возможная проблема эмиттера

0 голосов
/ 31 августа 2018

Я недавно начал получать в socket.io. Обучение путем реализации многопользовательской игры на React с Redux и TS.

Вот видео странной проблемы, которую я замечаю в redux devtools. Я не уверен, если это проблема с Redux или Socket.io. То, что вы увидите, - это действие, запускаемое с интервалом, которое меняет массив players. Действие никак не влияет на объект player (примечание единственного числа) .

Это проблема с Socket.io, или вы подозреваете, что что-то не так с Redux devtools или, вероятно, что-то, что разработчик rookie socket.io (я) сделал неправильно?

Redux devtools in two tabs

Сервер 

// server.js

const io = require('socket.io')();

/**
 * When a player joins
 */
const SUBSCRIBE_PLAYER = "subscribePlayer";
const DISCONNECT = "disconnect";
/**
 * Current players, etc
 */
const SERVER_STATE = "state";

/**
 * Initial state
 */
const players = {};
let playerScore = 0;

/**
 * Handle socket connections incomming from client
 */
io.on('connection', (socket) => {
  socket.on(SUBSCRIBE_PLAYER, (data) => {
    console.log("+++++++++++++")
    console.log(`ID: ${data.id}`)
    console.log(`NAME: ${data.name}`)
    console.log(`SCORE: ${data.score}`)
    console.log("+++++++++++++")

    /**
     * Check if unique player
     */
    players[data.id] = {
      id: data.id,
      name: data.name,
      score: data.score,
    }
  });

  socket.emit(SUBSCRIBE_PLAYER, { id: socket.id, name: "",  score: playerScore });

  /**
   * Remove player on disconnect
   */
  socket.on(DISCONNECT, (reason) => {   
    delete players[socket.id];
  });
});

/**
 * Notify client about server state
 */
setInterval(() => {
  io.sockets.emit(SERVER_STATE, players);
}, 1000);

const port = 8000;
io.listen(port);
console.log('Client listening on port ' + port);

Клиент 

// This is being emitted in the above server.js in an interval
export function listenGameState(dispatch: Dispatch<any>) {
    socket.on(SERVER_STATE, (players: Players) => {
        // Plain action. Not a thunk
        dispatch(addPlayersAction(players)); // modifies only players object in the state
    });
}


// Reducer
export function commonReducer(state = initialState, action: ReducerActions) {
    switch (action.type) {
        case ADD_PLAYER: {
            return {
                ...state,
                player: {
                    id: action.payload.id,
                    name: action.payload.name,
                    score: action.payload.score,
                },
            };
        }
        case ADD_PLAYERS: {
            return {
                ...state,
                players: action.payload,
            };
        }
        default:
            return state;
    }
}

UPDATE В итоге ничего не делал по этому поводу. Кажется, работает нормально. Тем не менее, если кто-то знает проблему, пожалуйста, не стесняйтесь опубликовать ответ. :)

Удачного кодирования!

...