Como funciona e como usar o global-state
Você já tentou fazer um jogo multiplayer no browser? em pouco tempo sincronizar o estado pode ser tornar o pesadelo. Tirando proveito do modelo do redux
de fluxo único de dados, eu escrevi uma biblioteca para sincronizar o estado de vários clientes de maneira simples. Você escreve o código como escreveria normalmente usando redux
. Apenas adiciona uma linha de código e terá o estado sincronizado entre vários clientes.
Na hora de criar a sua store, ao invés de escrever:
let store = createStore(reducer);
Você escreve:
// frontend
let store = createGlobalStore({ reducer })
// backend
var io = require('socket.io')(server);
require('global-state')(io);
E pronto. Todos os clientes vão sincronizar automaticamente.
Como funciona
Abaixo temos um diagrama mostrando como funciona. Imagine que o cliente 1 já estivesse conectado. O cliente 2 então entre na sala. Ele recebe o estado atual. Quando o cliente 1 dá o “dispatch” de uma ação, essa ação passa pelo servidor (para garantir a ordem) e depois é enviada para todos os clientes. A mesma coisa acontece quando o cliente 2 dá “dispatch” de uma ação.
Exemplo
Vamos botar a mão na massa. Vamos fazer um jogo da velha multiplayer.
A interface não tem muito mistério. Temos um botão de limpar o jogo e quando se clica em um bloco a jogada é feita. Veja o código.
Para deixá-lo multiplayer, basta adicionar a seguinte linha ao criar a store (arquivo src/js/store.js
):
// frontend
let store = createGlobalStore({ reducer })
E no nosso servidor express (web.js
):
var express = require('express');
var app = express();
app.set('port', (+process.env.PORT || 8000));
var server = require('http').Server(app);
var io = require('socket.io')(server);
require('global-state')(io);
Pronto!
No próximo post vamos ver como diferenciar os clientes e como criar múltiplas salas.