< use-stomp >
react providers, decorators, and hooks for handling websockets using the stomp protocol.
Components
Providers
This is the shared-worker provider. It connects to the websocket using stomp protocol, and manages the state of notifications.
The list is based on the notifications received from the websocket channel and notifications dismissed by the user.
queueing/dismissal management
cross tab/window syncing of notifications
Automatic reconnection is built into the webSocketWorkerInstance . You can control
the max number of attempts and interval for reconnecting.
Additionally, all < SnackProvider > props are accepted and
passed to the SnackProvider component.
For more info, please see the typescript definition for the provider for the full list of props.
import React , { useState } from ' react ' ;
import { UseStompNotificationsProvider } from ' use-stomp ' ;
const App = ( ) => {
const [ authHeaders ] = useState ( ' auth-token ' ) ;
return (
< UseStompNotificationsProvider
authHeaders = { authHeaders }
maxSnack = { 3 }
reconnectInterval = { 10000 }
reconnectMaxAttempts = { 10 }
url = ' https://domain.com/messages ' >
< App / >
< / UseStompNotificationsProvider >
)
}
* Make sure your public/dist folder contains the webSocketWorkerInstance.js AND
the webSocketWorkerInstance.js.map files:
node_modules/use-stomp/webSocketWorkerInstance.js
node_modules/use-stomp/webSocketWorkerInstance.js.map
This is the non shared-worker provider, and does not provide any queueing functionality. Instead,
it provides a way to subscribe to messages and send messages to channels.
Please see the typescript definition for the provider; it has notes regarding all the properties available.
import React , { useState } from ' react ' ;
import { UseStompProvider } from ' use-stomp ' ;
const App = ( ) => {
const [ authHeaders ] = useState ( {
Authorization : ' auth-token '
} )
return (
< UseStompProvider
authHeaders = { authHeaders }
url = ' ws://ws-endpoint ' >
< App / >
< / UseStompProvider >
)
}
Hooks
* Only works with useStompNotificationsProvider
Internally, notistack will handle driving the notifications.
To specify the options passed to enqueueSnackbar , use the second
parameter of the hook, like below.
Two additional/optional options are available:
parseMessage(message) - return the formatted message jsx markup (React.ReactNode)
parseVariant(message) - return the variant type (error, info, success, warning)
import React from ' react ' ;
import { useStompNotifications } from ' use-stomp ' ;
export default ( ) => {
const [ messages , send , connected ] = useStompNotifications ( ' /user/queue/messages ' , {
action : ( dismiss ) => (
< button onClick = { dismiss } >
Dismiss
< / button >
) ,
parseMessage : ( message ) => (
< strong > { message. id } - { message. content } < / strong >
) ,
parseVariant : ( message ) =>
message . content . includes ( ' Error ' ) ? ' error ' : ' info '
} ) ;
const sendMessageToDifferentChannel = ( ) => {
send ( ' /app/message ' , {
message : ' toSameChannel '
} ) ;
} ;
const sendMessageToSameChannel = ( ) => {
send ( {
message : ' toSameChannel '
} ) ;
} ;
return (
< >
< h4 > Status : { connected } < / h4 >
< h4 > Notifications : < / h4 >
< button onClick = { sendMessageToDifferentChannel } >
send message to different channel
< / button >
< button onClick = { sendMessageToSameChannel } >
send message to same channel
< / button >
{ }
< ul >
{ messages.m ap ( ( item ) => (
< li key = { item. id } >
< span > { item . content } </ span >
< button
onClick = { item. dismiss } >
Dismiss
</ button >
</ li >
) ) }
< / ul >
< / >
)
}
import React from ' react ' ;
import { useStomp } from ' use-stomp ' ;
export default ( ) => {
const [ message , send ] = useStomp ( ' channel ' ) ;
const sendMessageToDifferentChannel = ( ) => {
send ( ' /app/message ' , {
message : ' toSameChannel '
} ) ;
} ;
const sendMessageToSameChannel = ( ) => {
send ( {
message : ' toSameChannel '
} ) ;
} ;
return (
< >
< button onClick = { sendMessageToDifferentChannel } >
send message to different channel
< / button >
< button onClick = { sendMessageToSameChannel } >
send message to same channel
< / button >
< h4 > Latest Message < / h4 >
< div > { message } < / div >
< / >
)
}
If you need direct access to the context, use this hook.
import React from ' react ' ;
import { useStompCtx } from ' use-stomp ' ;
export default ( ) => {
const context = useStompCtx ( ) ;
} ;
Decorators
The decorator allows you to use the useStomp hook with legacy class-based components.
import React from ' react ' ;
import { withUseStomp } from ' use-stomp ' ;
@ withUseStomp ( ' /message/channel ' )
class ExampleDecorator extends React . Component {
_sendMessageToDifferentChannel = ( ) => {
this . props . sendMessage ( ' /app/messages ' , ' test ' ) ;
}
_sendMesageToSameChannel = ( ) => {
this . props . sendMessage ( ' test ' ) ;
}
return (
<>
< button onClick = { this. _sendMessageToDifferentChannel } >
send message to different channel
</ button >
< button onClick = { this. _sendMesageToSameChannel } >
send message to same channel
</ button >
< h4 > Latest Message </ h4 >
< div > { this . props . message } </ div >
</>
)
}
This decorator provides decorates your component with the props provided by useStompNotifications
. For use with legacy class-based components
import React from ' react ' ;
import { withUseStompNotifications } from ' use-stomp ' ;
@ withUseStompNotifications ( ' /message/channel ' , {
action : ( dismiss ) => (
< button onClick = { dismiss } >
Dismiss
< / button >
) ,
parseMessage : ( message ) => (
< strong > { message. id } - { message. content } < / strong >
) ,
parseVariant : ( message ) =>
message . content . includes ( ' Error ' ) ? ' error ' : ' info '
} )
class ExampleDecorator extends React . Component {
_sendMessageToDifferentChannel = ( ) => {
this . props . sendMessage ( ' /app/messages ' , ' test ' ) ;
}
_sendMesageToSameChannel = ( ) => {
this . props . sendMessage ( ' test ' ) ;
}
return (
<>
< h4 > Status : { this . props . connected } < / h4 >
< button onClick = { this. _sendMessageToDifferentChannel } >
send message to different channel
</ button >
< button onClick = { this. _sendMesageToSameChannel } >
send message to same channel
</ button >
< h4 > Notifications : < / h4 >
{ }
< ul >
{ this . props . messages . map (( item ) = > (
< li key = { item . id } >
< span > { item. content } < / span >
< button
onClick = { item . dismiss } >
Dismiss
< / button >
< / li >
) ) }
</ ul >
</>
)
}