Nonlinear Performance Magnification

npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

liquid-tap

0.1.4 • Public • Published

LiquidTap Javascript Client

A simple wrapper around the PusherJS Client to enable connecting to the tap.liquid.com server and facilitate user authentication.

To manage API tokens, refer to: https://app.liquid.com/settings/api-tokens

To learn more about Liquid Api token management, see the help links below: https://help.liquid.com/connect-to-liquid-via-api

Quick Start

Install via npm or yarn:

npm install liquid-tap
yarn add liquid-tap

OR Include the library:

<script src="../dist/liquid-tap.js"></script>

If PusherJS is already included on the page, then only include the extension version of LiquidTap:

<script src="../dist/liquid-tap.ext.js"></script>

The library can be used in the same fashion as Pusher:

import LiquidTap from 'liquid-tap';
 
const tap = new LiquidTap();
const public_channel = tap.subscribe('product_cash_btcsgd_7');
public_channel.bind('updated', function (data) {
  console.log('product_cash_btcsgd_7 has been updated', data);
});

Authentication

To subscribe to protected channels, the client must provide a token_id and token_secret which has permission to view those channels.

Authenticate on Initialization

var tap = new LiquidTap(token_id, token_secret);
// Refer to profile page for user_id: https://app.liquid.com/settings/profile
var protected_channel = tap.subscribe('user_<user_id>');
protected_channel.bind('updated', function (data) {
  console.log('sensitive user data has been updated', data);
});

Authenticate after Initialization

The library allows the LiquidTap client to be created and subscribe to public channels, then when a protected channel is required the client can authenticate.

var tap = new LiquidTap();
 
var public_channel = tap.subscribe('product_cash_btcsgd_7');
public_channel.bind('updated', function (data) {
  console.log('product_cash_btcsgd_7 has been updated', data);
});
 
tap.authenticate(token_id, token_secret);
var protected_channel = tap.subscribe('user_<user_id>');
protected_channel.bind('updated', function (data) {
  console.log('sensitive user data has been updated', data);
});

Binding to events

var tap = new LiquidTap(token_id, token_secret);
tap.bind('connected', function () {
  console.log('Connected!');
});
tap.bind('authenticated', function () {
  console.log('Authenticated!');
});
tap.bind('authentication_failed', function () {
  console.log('Authentication Failed!');
});

Exposing Pusher

If for somereason the underlying PusherJS client needs to be accessed, it can be accessed through tap.pusher.

var tap = new LiquidTap();
tap.pusher.connection.bind('connected', function (){
  console.log('Internal connected event');
});

However this is not recommended as the library needs to ensure the order of some events so if a task needs to happen after the connected event, then it is better to use the provided interface: tap.bind('connected', ... )

Troubleshooting

Open the chrome dev tools and inspect the network traffic as shown in the image below: inspecting websocket frames

Contributing

Setup

npm install

Development

npm run sample
npm run dev

Testing

npm run test

Ensure changes are also thoroughly tested with the real world server responses.

Building

npm run build

Ensure to commit compiled assets in dist.

install

npm i liquid-tap

Downloadsweekly downloads

3

version

0.1.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability