Het maken van een live connectie met WebSockets in een Reactjs-applicatie gaat in verschillende stappen. Hier is een eenvoudig voorbeeld om je te helpen dit te realiseren.
1. Installatie van een WebSocket library: Voordat je begint, moet je een WebSocket library installeren, zoals de populaire socket.io. Je kunt socket.io in je project installeren via npm.
\`\`\` npm install socket.io-client \`\`\`1. Importeer Socket.IO-client en maak een socketverbinding:
\`\`\`jsx import React from “react”; import socketIOClient from “socket.io-client”; const ENDPOINT = “http://127.0.0.1:4001”; // passen aan naar je server adres class MyComponent extends React.Component { constructor() { super(); this.state = { response: false, endpoint: “http://127.0.0.1:4001“ }; const socket = socketIOClient(ENDPOINT); } } \`\`\`1. Luisteren naar gebeurtenissen: Vervolgens kun je beginnen met het luisteren naar gebeurtenissen met behulp van de `on`-methode van het socket-object. In dit voorbeeld luisteren we naar een “FromAPI”-gebeurtenis en slaan we het bericht op in de component state.
\`\`\`jsx class MyComponent extends React.Component { constructor() { … socket.on(“FromAPI”, data => this.setState({ response: data }) ); } } \`\`\`1. Update de UI: Nu dat je de state van je component hebt geupdated met data die je via de WebSocket hebt ontvangen, kun je deze data gebruiken om je UI te updaten.
\`\`\`jsx class MyComponent extends React.Component { constructor() { … } render() { const { response } = this.state; return (Het bericht is: {response}
:Loading…
}Niet te vergeten, als je klaar bent met de socket, moet je het weer loskoppelen. Dit kan je doen in de `componentWillUnmount` methode van het component door `socket.disconnect()` aan te roepen.
\`\`\`jsx
componentWillUnmount() {
this.socket.disconnect();
}
\`\`\`
Let op: Deze code snippets zijn opgesteld voor `socket.io-client` versie 2.x. Socket.io 3.0 introduceert enkele breaking changes. Bezoek de socket.io-client documentatie voor exacte code voorbeelden voor versie 3.x of hoger.
