npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rplan/socketio-client

v3.5.1

Published

Socket.io client for Allex

Downloads

841

Readme

Allex Responsible: #A-Team Repo Status GitHub Actions React.js TypeScript

Responsible: #A-Team

allex-socketio-client

:zap: Socket.io client for Allex

Features

This is a typed client wrapper around socket.io-client. It provides the following features:

  1. A React hook useRealTimeUpdates that enables components to receive real time updates from the server.
  2. It debounces incoming sequential events for a configurable time, so that less re-renders are needed in case of an event burst.
  3. It manages multiple subscriptions, so that if several different components subscribe to the same entity, a single subscription request is sent to the server. Also, it handles unsubscriptions automatically, and only unsubscribes when no component is listening for changes for a particular entity.
  4. When the component using this hook is unmounted, this library takes care of unsubscribing from the entities automatically. Apart from that, the library also provides a function that can be used to manually unsubscribe if required.
  5. It provide audience events, which is a way to communicate what users are also listening for updates to the same entities that the client is subscribed to. Audience events are triggered everytime another user subscribe or unsubscribe to an entity. Audience events payload will provide an array of user ids, so you will have to make an additional request if you need extra data from these users.

How it Works

A client can subscribe to updates from any entity. However, for particular types of entities you might be interested in updates to their children entities as well. For example, you may like to subscribe to a project entity, and get updates such as a new task or a new milestone created within that project. This is supported by specifying that you want to subscribe to this entity as a project.

Currently, special entity types supported are project and principal as shown below.

Installation

This library is used as a peer dependency provided by rplan-webclient, so you should install it as both a peer dependecy and a dev dependency (so your tests can execute without any issues).

npm install -D @rplan/socketio-client # to install as devDependency
npm install -P @rplan/socketio-client # to install as a peerDependecy

Usage

Subscribing to Entities

import { useRealTimeUpdates, EntityType } from '@rplan/socketio-client'

const subscribedEntities = [{
  entityId: '...',               // `entityId` is mandatory
  entityType: EntityType.PROJECT // `entityType` is optional
}]

// The following handlers will be invoked whenever there is an update for a given entity type.
const handlers = {
  onEntityUpdates: () => { ... },    // optional
  onProjectUpdates: () => { ... },   // optional
  onPrincipalUpdates: () => { ... }, // optional
  onAudienceUpdates: () => { ... },  // optional
}

const options = {              // `options` is optional. Below are the default values
  debounceIntervalMillis: 1000 // Time interval to aggregate events before invoking the handlers
}

const unsubscribe = useRealTimeUpdates(subscribedEntities, handlers, options)

Unsubscribing from Entities

unsubscribe([
  { entityId: '...' }, // No need to provide `entityType` for unsubscriptions.
  { entityId: '...' },
])

Updates

For principal and project updates, you wil receive a nested structure, which can be difficult to navigate. For that reason, we provide a .traverse function that can be used as follows:

For project subscriptions

import { useRealTimeUpdates, EntityType } from '@rplan/socketio-client'

const subscribedEntities = [{
  entityId: 'projectId',
  entityType: EntityType.PROJECT
}]

useRealTimeUpdates(subscribedEntities, {
  onProjectUpdates: (updates) => {
    updates.traverse(({ projectId, meta, payload }) => {
      // `projectId` is the project id of the change
      // `meta`      contains meta information about the changed entity
      // `payload`   the change set for given entity
    })
  },
})

For principal subscriptions

import { useRealTimeUpdates, EntityType } from '@rplan/socketio-client'

const subscribedEntities = [{
  entityId: 'principalId',         // can be the id of a `user` or an `organisation`
  entityType: EntityType.PRINCIPAL
}]

useRealTimeUpdates(subscribedEntities, {
  onPrincipalUpdates: (updates) => {
    updates.traverse(({ principalId, meta, payload }) => {
      // `principalId` is the principal id of the change
      // `meta`        contains meta information about the changed entity
      // `payload`     the change set for given entity
    })
  },
})

Special Entity Type Subscriptions

You can subscribe to updates for the children of an entity (and the entity inclusive). Currently this is possible for a project or a principal. A principal can be either a user or an organisation.

Project children are:

  • Task
  • Sub Task
  • Milestone

User (Principal) children are:

  • Project
  • Standalone Task

Organisation (Principal) children are:

  • Project

Heads Up

  1. Functions passed to useRealTimeUpdates need to be used enclosed within a useCallback to prevent unnecessary re-renders. Here is an example from mytasks-overview-webclient.
  2. It is considered a good practice to NOT use the contents of the payload to update the UI, this is because client may loose some events in case of a temporary disconnection and this would result in an inconsistent UI. It is recommended, to instead, make a new request to refresh the full state of the entity shown in the UI.
  3. If the user lacks permissions on one of the requested entities, the server will return a generic 404 error instead of a 403, this is so that we do not disclose the existence of an entity on our system with that specific entityId.