StateSync

Real-time bidirectional state synchronization between web applications and API servers via WebSockets. Built as a plugin for Hookstate.

Architecture

Browser (Hookstate + StateSync plugin)
    ↕ WebSocket
Server (Go / Node.js / Python)

Client Library

Install:

npm install statesync

Usage:

import { createState } from '@hookstate/core';
import { StateSync } from 'statesync';

const globalState = createState({ name: '', count: 0 });
const sync = StateSync('http://localhost:8080');

globalState.attach(sync.plugin);

// Subscribe to connection events
sync.pubsub.sub((event) => {
    console.log(event.type, event.message);
});

Configuration

const sync = StateSync('http://localhost:8080', {
    buffer_size: 10000,
    backoff_factor: { initial: 0, increment: 1000, max: 10000 },
    custom_socket_endpoint: '/my-sync-path',
});

Server Libraries

Go

sync := statesync.NewStateSync()

sync.Callback(func(current statesync.State, update func(statesync.State)) {
    current.Replacer("name", "hello", "bye", update)
})

// With Gin
r.Any("/sync", func(c *gin.Context) {
    sync.Connect(c.Writer, c.Request, nil, nil, nil)
})

Node.js

import { StateSync } from 'statesync-server';

const sync = new StateSync();

sync.callback((current, update) => {
    current.replacer('name', 'hello', 'bye', update);
});

sync.connect(httpServer);

Python

from statesynclib import StateSync
from starlette.routing import WebSocketRoute

sync = StateSync()

sync.callback(lambda current, update: current.replacer('name', 'hello', 'bye', update))

app = Starlette(routes=[
    WebSocketRoute('/sync', lambda ws: sync.connect(ws)),
])

Project Structure

src/                      Core TypeScript client library
api-libs/go/              Go server library
api-libs/node/            Node.js server library
api-libs/python/          Python server library
testing/test-react-app/   React test application

Development

# Build client library
npm run build

# Run tests
npm test

# Lint
npm run lint

License

MIT