Name: logux-client
Owner: Logux
Description: Base Logux client for web browser
Created: 2016-11-16 01:39:51.0
Updated: 2018-01-17 15:15:28.0
Pushed: 2017-12-29 05:39:09.0
Homepage: null
Size: 832
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
<img align=“right” width=“95” height=“95” title=“Logux logo”
src="https://cdn.rawgit.com/logux/logux/master/logo.svg">
Logux is a client-server communication protocol. It synchronizes action between clients and server logs.
This 8 KB library allows you to put action (which look similar to Redux actions) to a local log and synchronize them with Logux Server and thus with every other client being online.
This is a low-level client API. Redux-like API, which is supposed to be more suitable for most of developers, is coming soon.
See also Logux Status for UX best practices.
<img src=“https://evilmartians.com/badges/sponsored-by-evil-martians.svg”
alt="Sponsored by Evil Martians" width="236" height="54">
This project uses npm package manager. So you will need Webpack or Browserify to build a JS bundle for browsers.
Install Logux Client:
install --save logux-client
You should use a secret token for authentication at the Logux server.
We suggest adding a special token
column to the users table of your
application and filling it with auto-generated random strings.
When the user requests index.html
from your app, HTTP server would add
<meta>
tags with a token and Logux server URL.
a name="user" content="<%= user.id %>" />
a name="token" content="<%= user.token %>" />
a name="server" content="wss://example.com:1337" />
However, it is not the only possible way for communication. You could also use cookies or tools like Gon.
Create Logux Client instance in your client-side JS;
onready
event handler seems to be a good place for this:
CrossTabClient = require('logux-client/cross-tab-client')
user = document.querySelector('meta[name=user]')
token = document.querySelector('meta[name=token]')
server = document.querySelector('meta[name=server]')
logux = new CrossTabClient({
edentials: token.content,
bprotocol: '1.0.0',
rver: server.content,
erId: user.content
x.start()
If you sure, that your application will not be run in separated browser
tabs (for instance, you are developing a app for kiosk), you can use
Client
instead of CrossTabClient
.
Add callbacks for new actions coming to the client log
(from server, other clients or local logux.log.add
call):
x.on('add', function (action, meta) {
(action.type === 'CHANGE_TITLE') {
var user = document.querySelector('.article[data-id=' + action.article + ']')
if (user) {
document.querySelector('.article__title').innerText = action.title
}
Read logux-core
docs for logux.log
API.
When you need to send information to server, just add an action to log:
it.addEventListener('click', function () {
gux.log.add({
type: 'CHANGE_TITLE',
article: articleId.value,
title: titleField.value
{
reasons: ['lastValue']
alse)
Notify user if connection was lost:
favicon = document.querySelector('link[rel~="icon"]')
notice = document.querySelector('.offline-notice')
x.sync.on('state', function () {
(logux.sync.connected) {
favicon.href = '/favicon.ico'
notice.classList.add('.offline-notice_hidden')
else {
favicon.href = '/offline.ico'
notice.classList.remove('.offline-notice_hidden')
If user will open website in two different browser tabs, Logux anyway will have single storage, so JS in tabs will have same actions.
You can set tab
key in metadata to isolate action only in current tab:
log.add(action, { tab: app.id })