- 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
$ yarn add react-signalr @microsoft/signalr socket.io-client
First of all you need to create a signalR context. every thing is depend on your context, you could create multiple context.
import { createSignalRContext } from "react-signalr/signalr";
const SignalRContext = createSignalRContext();
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>
);
};Use this for connect to an event
const Comp = () => {
const [messages, setMessage] = useState([]);
SignalRContext.useSignalREffect(
"event name", // Your Event Key
(message) => {
setMessage([...messages, message]);
},
);
return <Components />;
};create a socketIO context,
import { createSocketIoContext } from "react-signalr/socketio";
const SocketIOContext = createSocketIoContext();
const App = () => {
const { token } = YourAccessToken;
return (
<SocketIOContext.Provider
connectEnabled={!!token}
accessTokenFactory={() => token}
dependencies={[token]} //remove previous connection and create a new connection if changed
url={"https://example/hub"}
>
<Routes />
</SocketIOContext.Provider>
);
};Use this to connect to an event
const Comp = () => {
const [messages, setMessage] = useState([]);
SocketIOContext.useSocketEffect(
"event name", // Your Event Key
(message) => {
setMessage([...messages, message]);
},
);
return <Components />;
};create a websocket context,
import { createWebSocketContext } from "react-signalr/websocket";
const WebsocketContext = createWebSocketContext();
const App = () => {
const { token } = YourAccessToken;
return (
<WebsocketContext.Provider
connectEnabled={!!token}
dependencies={[token]} //remove previous connection and create a new connection if changed
url={"https://example/hub"}
>
<Routes />
</WebsocketContext.Provider>
);
};Use this for connect to an event in you component
const Comp = () => {
const [messages, setMessage] = useState([]);
WebsocketContext.useWebSocketEffect(
"event name", // Your Event Key
(message) => {
setMessage([...messages, message]);
},
);
return <Components />;
};Full supported
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent