0.7.5 • Published 5 years ago
use-ws v0.7.5
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
0.7.5
5 years ago
0.7.4
5 years ago
0.7.3
5 years ago
0.7.2
5 years ago
0.7.1
5 years ago
0.7.0
5 years ago
0.6.2
5 years ago
0.6.1
5 years ago
0.6.0
5 years ago
0.5.0
5 years ago
0.4.7
5 years ago
0.4.6
5 years ago
0.4.5
5 years ago
0.4.3
5 years ago
0.4.2
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago