Question

我正在尝试使用socket.io和redux-socket.io来使多个客户端的数据存储保持同步。

每个客户都将获取自己的“待办事项”初始清单，这些清单将被放入其redux存储中。

然后，当一个客户端执行并添加，更新或删除时，我希望它广播给其他客户端以更新自己的redux存储；这就是我所拥有的-

客户端设置

let socketIoMiddleware = createSocketIoMiddleware(socket, (type, action) => {
  // emit to server if one of these actions
  return (type === 'ADD_TODO_SUCCESS' || 
    type === 'UPDATE_TODO_SUCCESS' ||
    type === 'DELETE_TODO_SUCCESS')
});

服务器

socket.on('action', (action) => {
        socket.broadcast.emit('action', action);
    }
}

我的目标是不必更改我的redux代码，只需插入socket.io，但是我想发生的事情是，例如：

客户A：dispatch({type: 'UPDATE_TODO_SUCESS', payload: todo });
中间件：emit('action', {type: 'UPDATE_TODO_SUCESS', payload: todo });
socket.io服务器：broadcast('action', {type: 'UPDATE_TODO_SUCESS', payload: todo });
客户B：on('action', dispatch({type: 'UPDATE_TODO_SUCESS', payload: todo });
中间件：emit('action', {type: 'UPDATE_TODO_SUCESS', payload: todo });
...无限循环！

如何在不引起此无限循环且无需在化简器中处理其他一系列操作类型的情况下向其他客户端广播更新？

Answer 1

我想出的解决方案是使用布尔broadcast属性扩展操作对象，该属性用于确定redux-socket.io是否应将消息发送到服务器。

second parameter of createSocketIoMiddleware可以是“ ...如果将操作发送到socket.io，则该函数返回真实值”

客户端设置

let socketIoMiddleware = createSocketIoMiddleware(socket, (type, action) => {
  // emit to server if action has property "broadcast: true"
  return action.broadcast;
});

示例操作：

const addTodo = todo => {
   return {
      type: 'ADD_TODO_SUCCESS,
      todo: todo,
      broadcast: true
   };
};

服务器设置

socket.on('action', (action) => {
   // turn broadcast off so subscriber doesn't turn around and publish
   if(action.broadcast) {
      action.broadcast = false;
   }
   socket.broadcast.emit('action', action);
 }
}

Redux和socket.io无限循环

1 个答案: