GeezerVison

Quick example using RPCs with WebSockets

// Server
const { createNode } = require('dop')
const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

const sum = (a, b) => a + b
const multiply = (a, b) => a * b
const getCalculator = () => ({ sum, multiply })

wss.on('connection', ws => {
    const client = createNode()
    client.open(ws.send.bind(ws), getCalculator)
    ws.on('message', client.message)
})

// Client
const ws = new WebSocket('ws://localhost:8080')
const server = createNode()
ws.on('open', async () => {
    const getCalculator = server.open(ws.send.bind(ws))
    const { sum, multiply } = await getCalculator()
    const result1 = await sum(5, 5)
    const result2 = await multiply(3, 3)
    console.log(result1, result2) // 10, 9
})
ws.on('message', server.message)

Quick example using Stores and Patches

// Server
const { createStore } = require('dop')

const store = createStore({ players: 0 })

function subscribeToServerStore(listener) {
    // Incrementing number of player as a patch
    const listeners = store.applyPatch((state) => {
        state.players += 1
    })
    // We emit the patch to all the subscribers
    listeners.forEach(({ listener, patch }) => listener(patch))
    // Here we subscribe our client
    store.subscribe(listener)
    return store.state
}

// Client
const { createStore } = require('dop')

// Getting the current state of the server and subscribing to it
const state = await subscribeToServerStore(onPatch)
// Creates a local store where our UX components can subscribe to
const store = createStore(state)

function onPatch(patch) {
    // Applying patch from the server
    const listeners = store.applyPatch(patch)
    // We emit the patch to subscribers. Like React components.
    listeners.forEach(({ listener, patch }) => listener(patch))
}

License