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

@zerva/websocket

v0.64.0

Published

🌱 Zerva websocket module

Downloads

379

Readme

🌱 Zerva useWebSocket

This is a side project of Zerva

Plain resilient WebSocket connections with Zerva.

Get started

import { useWebSocket } from '@zerva/websocket'

useHttp({ port: 8080 })
useWebSocket()

Communication

Variant A: Channel

By establishing a connection you get a Zeed Channel to send raw string or binary data between server and client. The interfaces are the same for client and server side. On server side minimal code looks like this:

on('webSocketConnect', ({ channel }) => {
  channel.postMessage('Hello World')
  channel.on('message', (msg) => {
    console.log(msg.data)
  })
})

Client side like this:

const channel = new WebSocketConnection()
channel.on('connect', () => {
  channel.postMessage('Hello World')
})
channel.on('message', (msg) => {
  console.log(msg.data)
})

Variant B: Message Interface

You can also use the Zeed Message overlay to have a convenient messaging infrastructure. First define the methods the server should listen to:

interface Messages {
  echo: (msg: string) => string
}

Then implement them in on the server side:

on('webSocketConnect', ({ channel }) => {
  useMessageHub({ channel }).listen<Messages>({
    echo(message) {
      return message
    },
  })
})

On the client side you may connect easily and call the messages:

const channel = new WebSocketConnection()
const send = useMessageHub({ channel }).send<Messages>()

const response = await send.echo('Hello World')
expect(response).toBe('Hello World')

Variant C: PubSub Interface

Similar to Messages is the PubSub interface.

Features

Reconnection / Resilience

For a connection you always receive one Channel. This channel might be disconnected due to network issues, but once it reconnects you can continue to use the same Channel. You can check the state via channel.isConnected.

Both the client and the server try to stay connected and send ping/pong (heart beat) messages. On failure the client tries to reconnect. The Channel events connect and disconnect help to manage states in your app in case the connection is lost. You don't need to reconnect yourself.

Encoding

Communication uses binary data. Encoding is usually provided by Message, PubSub and others using JSON. You can plug in any other encoding, e.g. crypto or compression.

Alternatives

Similar projects: