Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
React und Socket.io Client richtig benutzen
Möchte man socket.io und react zusammen benutzen, so kommt man schnell in die Schwierigkeit, dass die React-App mehrere verschiedene Verbindungen aufmacht und zu oft reagiert. Das Ganze lässt sich schnell und einfach mit einem Context-Provider verbinden und man hat die Verbindung in allen Komponenten.
1. Socket Context erstellen
Am besten einfach eine Datei unter context/socket.js erstellen
https://dev.to/bravemaster619/how-to-use-socket-io-client-correctly-in-react-app-o65
https://dev.to/bravemaster619/how-to-prevent-multiple-socket-connections-and-events-in-react-531d
import socketio from "socket.io-client";
export const socket = socketio.connect('yourdomain.com:4001');
export const SocketContext = React.createContext();Das ist auch schon alles, was man für den Provider benötigt. Als nächstes muss am besten in der index.js oder app.js die Verbindung initialisiert werden.
2. Context-Provider einbinden und einen Wert mitgeben
Das Ganze sieht dann so aus:
import {SocketContext, socket} from 'context/socket';
import Child from 'components/Child';
const App = () => {
return (
<SocketContext.Provider value={socket}>
<Child />
<Child />
...
</SocketContext.Provider
);
};3. Socket in untergeordneter Komponente benutzen
import React from 'react';
import {SocketContext} from 'context/socket';
const GrandChild = () => {
const socket = useContext(SocketContext);
useEffect(() => {
socket.emit('ANYTHING'"');
// subscribe to socket events
socket.on('ANYSOCKETEVENT', (data) => {
console.log(data);
});
return () => {
// before the component is destroyed
// unbind all event handlers used in this component
socket.off('ANYSOCKETEVENT');
};
}, [socket]);
return (
<div>
Test
</div>
);
};
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar