react-signalr Is a tools for using signalr socket in react/react-native apps
react-signalr
Supported microsoft/signalR version 5 and later Supported Socket.io Supported WebSocket
Features
- Hooks for connect event to a component
- Manage connections in multiple tabs (SignalR can only have about 6 tabs open). React-signalr will create a connection open and send event to other tabs by hermes-channel
- Handle reconnect
TOC
install
$ yarn add react-signalr
getStart
import {
createSignalRContext, // SignalR
createWebSocketContext, // WebSocket
createSocketIoContext, // Socket.io
} from "react-signalr";
create a signalr context,
import { createSignalRContext } from "react-signalr";
const { useSignalREffect, Provider } = createSignalRContext();
// or createSocketIoContext() for socket.io
const App = () => {
const { token } = YourAccessToken
return (
<SignalRContext.Provider
connectEnabled={!!token}
accessTokenFactory={() => token}
dependencies={[token]} //remove previous connection and create a new connection if changed
url={"https://example/hub"}
>
<Routes />
</SignalRContext.Provider>
);
};
useSignalREffect
Use this to connect to an event
const { useSignalREffect, Provider } = createSignalRContext();
const Comp = () => {
const [messages, setMessage] = useState([]);
useSignalREffect(
"event name",
(message) => {
setMessage([...messages, message]);
},
[messages],
);
return null;
};
React-Native
Full supported