client

Logux Client

Logux is a new way to connect client and server. Instead of sending HTTP requests (e.g., AJAX and GraphQL) it synchronizes log of operations between client, server, and other clients.

• Guide, recipes, and API
• Issues and roadmap
• Projects inside Logux ecosystem

This repository contains Logux base components to build web client:

• CrossTabClient and Client to create web client for Logux.
• IndexedStore to store Logux log in IndexedDB.
• SqlLogStore to store Logux log in SQLite or PGlite.
• badge() widget to show Logux synchronization status in UI.
• status() to write own UI to show Logux synchronization status in UI.
• attention(), confirm(), favicon() to improve UX in Logux web app.
• log() to print Logux synchronization status to browser DevTools.

Check demo page for widget UI.

  Logux Client is built by Evil Martians, an American design and engineering consultancy for developer tools, AI, and cybersecurity startups.

Install

npm install @logux/core @logux/client nanostores

Usage

See documentation for Logux API.

import { CrossTabClient, badge, badgeEn, log } from '@logux/client'
import { badgeStyles } from '@logux/client/badge/styles'

let userId = document.querySelector('meta[name=user]').content
let token = document.querySelector('meta[name=token]').content

const client = new CrossTabClient({
  subprotocol: 1,
  server: 'wss://example.com:1337',
  userId,
  token
})

badge(client, { messages: badgeEn, styles: badgeStyles })
log(client)

client.start()

SQL Tables

@logux/client/db keeps CRDT tables in a local SQL database (like SQLite in the browser) filled from Logux log. All changes are synchronized as Logux actions, and edit conflicts are resolved with per-field last write wins.

It needs Nano Stores SQL database:

npm install @nanostores/sql

…

Custom actions are applied to the database by your callback. Action types in the callback come from defineAction():

import { defineAction } from '@logux/actions'

let userRenamed = defineAction('user/renamed')

let renameUser = crdt.action(userRenamed, async (tx, action, meta) => {
  // change() keeps per-field last write wins, unlike your own UPDATE
  await user.change(tx, action.id, { name: action.name }, meta)
})

await renameUser({ id, name: 'New' })

The same database can keep the Logux log itself:

import { CrossTabClient } from '@logux/client'
import { SqlLogStore } from '@logux/client/db'

const client = new CrossTabClient({
  …,
  store: new SqlLogStore(db)
})

End-to-End Encryption

encryptActions() encrypts actions before sending them to the server, so the server can’t read users’ data. Pass a password or an AES CryptoKey and list action types to be kept unencrypted.

import { encryptActions } from '@logux/client'

encryptActions(client, localStorage.getItem('userPassword'), {
  ignore: ['server/public']
})