@idio/websocket NPM

@idio/websocket

@idio/websocket Establishes WebSocket Connections Between Clients And The Server.

yarn add @idio/websocket
npm i @idio/websocket

API

The package is available by importing its default function:

import websocket from '@idio/websocket'

websocket( `server: !http.Server,` `config=: !WebSocketConfig,`): !Object<string, sendMessage>

Sets up a listener for the UPGRADE event on the server, and stores all connected clients in the client list. When clients disconnect, they are removed from this list. The list is a hash object where each key is the accept key sent by the client, and values are the callback functions to send messages to those clients.

server* !http.Server: The server on which to setup the listener.
config !WebSocketConfig (optional): Additional configuration.

WebSocketConfig: Options for the web socket protocol communication.

Name	Type	Description	Default
log	boolean	Whether to log on connect and disconnect.	`true`
onMessage	(clientID: string, message: string) => void	The callback when a message is received from a client.	-
onConnect	(clientID: string) => void	The callback when a client is connected.	-

With the following client-side implementation:

/* eslint-env browser */
const ws = new WebSocket(`ws://${location.host}`, 'json')
setInterval(() => {
  if (ws.readyState == ws.OPEN) ws.send('')
}, 2000)

ws.addEventListener('message', async event => {
  const { message, event: e } = JSON.parse(event.data)
  console.log('Received %s:', e, message)
  window.WSstatus.innerText = message
  ws.send(navigator.userAgent)
})

the server can be setup to listen for connections.

/* yarn example/ */
import core, { render } from '@idio/idio'
import websocket from '@idio/websocket'

(async () => {
  const { url, server } = await core({
    static: {
      use: true,
      root: 'example/frontend',
    },
    index(ctx) {
      ctx.body = render(
        <html>
          <head>
            <title>Websocket Example</title>
          </head>
          <body>
            <h1>
              Hello World.
            </h1>
            Server says: <span id="WSstatus" />
            <script type="module" src="index.js"/>
          </body>
        </html>
        , { addDoctype: true })
    },
  })
  const clients = websocket(server, {
    onConnect(clientId) {
      clients[clientId]('handshake', 'welcome')
    },
    onMessage(clientId, message) {
      console.log('Client %s says: %s', clientId, message)
    },
  })
  console.log(url)
})()

http://localhost:5000
Client connected.
Client FIM/Jvt9Ldb1J0HCx5ye8g== says:
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0)
  AppleWebKit/537.36 (KHTML, like Gecko)
  Chrome/71.0.3578.98 Safari/537.36
Client disconnected.