Here is a simple method to keep multiple users in sync with a shared state (in real time). The core concepts here are flexible enough to work anything from a collaborative document editor to a real-time multiplayer game.
To help keep things simple, we'll build a super fun game called "Push the Button First!". This game will be played by Bob and Sue, and BOY do they both want to be the first person to push that button.
State?
State is the data that you want to share between two people. For our "Push the Button" game, our state will be very simple.
// state
const state = {
personWhoPushedFirst: null
}
Changing the State
The state of our game will change when Bob or Sue click the button. To keep things simple, we will impose a rule: State can only be changed by emitting actions. We will have a list of mutations that take emitted actions, and use them to change the state.
// state
cosnt state = {
personWhoPushedFirst: null
}
// all possible ways to change the state go here
const mutations = {
clickTheButton (action) {
if (!state.personWhoPushedFirst) {
state.personWhoPushedFirst = action.person
}
}
}
// action emitter
function emit(action) {
const type = action.type
const mutation = mutations[type]
mutation(action)
}
Let's say Bob and Sue both want to win, so they both push the button as fast as they can. On Bob's computer, this action will be emitted:
emit({
type: 'clickTheButton',
person: 'Bob'
})
// now state.personWhoPushedFirst equals 'Bob' on Bob's computer
...However, on
