use-ws
A pretty custom hooks for websocket and react.
- type-safe!
Install
// npmnpm install --save use-ws // yarnyarn 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'))