connected-react-socket
Lightweight Provider for socket.io connection for react-redux application. You can see the demo.
Contents
Install
install it by
npm i --save connected-react-socket
or
yarn add connected-react-socket
ConnectedSocket
Add socket middleware with passing socket client
;;; const socket = ; const reducers = ; const store = ; ;
Then wrap componet by withSocket
HOC and use socketEvent
prop
const Display = { const socketEvent = props; return <div> // Will print socket event name <div>socketEventtype</div> // Let's print recieved messages <div>socketEvent && socketEventdata</div> </div> ;};const mapStateToProps = { return socketEvent: statesocket ;};const mapDispatchToProps = { return ;};const ConnectedDisplay = Display;
Last one: dd socket provider under the redux provider
... ...
SocketProvider
Create component and wrap it with HOC
const Display = { const socketEvent = props; return <div> // Will print socket event name <div>socketEventtype</div> // Let's print recieved messages <div>socketEvent && socketEventdata</div> </div> ;}; const DisplayEvent = ;
And add socket provider
Props
SocketProvider
Prop | Decription | Default |
---|---|---|
socket | socket.io instance | null |
shouldReconnect | Tells provider to reconect to socket on mount | false |
shouldDisconnect | Tells provider to close connection on unmount | false |
ConnectedSocket
Prop | Decription | Default |
---|---|---|
socket | socket.io instance | null |
shouldReconnect | Tells provider to reconect to socket on mount | false |
shouldDisconnect | Tells provider to close connection on unmount | false |
Passed props
withSocket
Passed prop | Decription |
---|---|
socketEvent | socket.io event |
emit | function for emit socket message |
injectSocket
Passed prop | Decription |
---|---|
socket | socket.io instance from provider |
Redux connection
socketReducer
Typical reducer with state and action. Let ConnectedProvider
work with store.
emitMessage
Action to pass message to socket if using ConnectedProvider
.
emitMessage(type, message)
where type: string
and message:array
socketMiddleware
Middleware for linking socket with store.
Apply socketMiddleware(socket)
to store. Where socket
is your socket.io instance
Feedback
Feel free to create an issue or write me to chafiliny@gmail.com