React-signalr is a tools for using signalr web socket in react/react-native apps
npm install 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
- Install
- Get started SignalR
- Get started SocketIO
- Get started WebSocket
$ 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.
``js
import { createSignalRContext } from "react-signalr/signalr";
const SignalRContext = createSignalRContext();
const App = () => {
const { token } = YourAccessToken;
return (
accessTokenFactory={() => token}
dependencies={[token]} //remove previous connection and create a new connection if changed
url={"https://example/hub"}
>
);
};
`
#### useSignalREffect
Use this for connect to an event
`js
const Comp = () => {
const [messages, setMessage] = useState([]);
SignalRContext.useSignalREffect(
"event name", // Your Event Key
(message) => {
setMessage([...messages, message]);
},
);
return
};
`
create a socketIO context,
`js
import { createSocketIoContext } from "react-signalr/socketio";
const SocketIOContext = createSocketIoContext();
const App = () => {
const { token } = YourAccessToken;
return (
accessTokenFactory={() => token}
dependencies={[token]} //remove previous connection and create a new connection if changed
url={"https://example/hub"}
>
);
};
`
#### useSignalREffect
Use this to connect to an event
`js
const Comp = () => {
const [messages, setMessage] = useState([]);
SocketIOContext.useSocketEffect(
"event name", // Your Event Key
(message) => {
setMessage([...messages, message]);
},
);
return
};
`
create a websocket context,
`js
import { createWebSocketContext } from "react-signalr/websocket";
const WebsocketContext = createWebSocketContext();
const App = () => {
const { token } = YourAccessToken;
return (
dependencies={[token]} //remove previous connection and create a new connection if changed
url={"https://example/hub"}
>
);
};
`
#### useWebSocketEffect
Use this for connect to an event in you component
`js
const Comp = () => {
const [messages, setMessage] = useState([]);
WebsocketContext.useWebSocketEffect(
(message) => {
setMessage([...messages, message]);
},
);
return
};
``
| react-signalr | @microsoft/signalr |
| -------------- | ------------------ |
| 0.2.0 - 0.2.18 | 7.x |
| 0.2.19 | 7.x - 8.x |
Full supported