use-sockjs
React Hook for SockJs
Installation
yarn add use-sockjs
Usage
Wrap your app inside the SockJsProvider component.
import React from 'react'
import { SockJsProvider } from 'use-sockjs'
const App = () => {
return (
<SockJsProvider
onError={(error: Frame | string) => {
}}
>
{/* ... */}
</SockJsProvider>
)
}
export default App
Call the useSockJs
hook in the components.
import React from 'react'
import { useSockJs } from 'use-sockjs'
import { Client, Frame, Message, Subscription } from 'stompjs'
export const MyComponent: React.FunctionComponent = () => {
const { connect, disconnect, subscribe } = useSockJs()
const subscriptionRef = useRef<Subscription | null>(null)
// connect websocket when init
useEffect(() => {
connect({
url: 'http://localhost/ws',
heartbeat: {
incoming: 600000,
outgoing: 600000
},
onConnected(client) {
subscribe({
destination: 'destination',
onMessage: message => {
},
onSubscribed: (subscription) => {
subscriptionRef.current = subscription
}
})
}
})
return ()=>{
if(subscriptionRef.current){
unsubscribe(subscriptionRef.current)
}
disconnect()
}
}, [])
return (
<div></div>
)
}