use-ws
TypeScript icon, indicating that this package has built-in type declarations

0.7.5 • Public • Published

use-ws

A pretty custom hooks for websocket and react.

  • type-safe!

Install

// npm
npm install --save use-ws
 
// yarn
yarn add use-ws

Usage

import React, { FC, useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import { createWebSocket, BinaryType } from 'use-ws'
 
const { WebSocketProvider, WebSocketContext, useWebSocket, useHeartbeat } = createWebSocket({
  // required
  binaryType: BinaryType.ArrayBuffer, // or BinaryType.Blob
  serialize(action, ...data) { ... },
  deserialize(packet) { ... },
  // optional
  heartbeat: {
    interval: 10 * 1000,
    action: YOUR_HEARTBEAT_CODE,
    data: [] // optional
  }
})
 
const App: FC = () => (
  <WebSocketProvider
    url={YOUR_WEBSOCKET_URL}
    middleware={(action, ...data) => { ... }}
    onOpen={event => { ... }}
    onError={event => { ... }}
    onClose={event => { ... }}
  >
    <User />
  </WebSocketProvider>
)
 
const User: FC = () => {
  const websocket = useWebSocket()
  const { latestHeartbeat, setData, setNextDelay } = useHeartbeat()
  const [id, setId] = useState<string>('')
  const [name, setName] = useState<string>('')
 
  // listener settings
  useEffect(() => {
    const handler = (foo: string, bar?: number) => { ... }
 
    websocket.addListener(YOUR_ACTION_CODE, handler)
    websocket.once(YOUR_ACTION_CODE, handler)
    websocket.emit(parameter0, parameter1)
 
    return () => {
      websocket.removeListener(YOUR_ACTION_CODE, handler)
    }
  }, [])
 
  // add 100ms per heartbeat
  useEffect(() => {
    setNextDelay(previousDelay => {
      const nextDelay = previousDelay + 100
      setData(nextDelay)
      return nextDelay
    })
  }, [latestHeartbeat])
 
  return <div>{name}</div>
}
 
ReactDOM.render(<App />, document.getElementById('root'))

Lincense

MIT

Package Sidebar

Install

npm i use-ws

Weekly Downloads

1

Version

0.7.5

License

MIT

Unpacked Size

13.7 kB

Total Files

9

Last publish

Collaborators

  • danuel