@logux/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.

Documentation: logux.io

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.
• 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.

Install

npm install @logux/client

Usage

See documentation for Logux API.

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

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

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

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

client.start()

Changelog

0.8.1

• Fix node ID generation in Client#changeUser().

0.8

• Use Logux Core 0.5 and WebSocket Protocol 3.
• Rename credentials option to token.
• User ID must be always a string without :.
• Token must be a string.
• Add Client#changeUser() method.
• Add support for dynamic tokens.

0.7

• Add ES modules support.
• Add TypeScript definitions.
• Move API docs from JSDoc to TypeDoc.
• Mark package as side effect free.

0.6

• Do not synchronize event cleaning between tabs.
• Ask to update page receiving bigger subprocol from another tab.
• Disable cross-tab communication on localStorage error.
• Fix falling on empty userId (by @Abdubek).