React-Signalr


 

React-Signalr Is a tools for using signalR, Socket.io or WebSocket in react/react-native apps

- 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
- Get started SignalR
- Get started SocketIO
- Get started WebSocket

install

$ yarn add react-signalr @microsoft/signalr socket.io-client

Get started

signalr

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 (
connectEnabled={!!token}
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 ;
};
`

socketio

create a socketIO context,

`js
import { createSocketIoContext } from "react-signalr/socketio";

const SocketIOContext = createSocketIoContext();

const App = () => {
const { token } = YourAccessToken;

return (
connectEnabled={!!token}
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 ;
};
`

websocket

create a websocket context,

`js
import { createWebSocketContext } from "react-signalr/websocket";

const WebsocketContext = createWebSocketContext();

const App = () => {
const { token } = YourAccessToken;

return (
connectEnabled={!!token}
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 ;
};
``

$3

| react-signalr | @microsoft/signalr |
| -------------- | ------------------ |
| 0.2.0 - 0.2.18 | 7.x |
| 0.2.19 | 7.x - 8.x |

$3

Full supported