WebSockets fournit une communication bidirectionnelle entre le serveur et le client, ce qui signifie que les deux peuvent échanger des données en temps réel. Avec ReactJS, vous pouvez utiliser la bibliothèque ‘react-websocket’ pour gérer facilement une connexion WebSocket.
Pour utiliser WebSockets avec React, vous pouvez suivre les étapes ci-dessous:
1. Installation:
Commencez par installer le module ‘react-websocket’ en utilisant la commande npm ci-dessous :
```
npm i react-websocket
```
1. Importation:
Après avoir installé le module, vous devez l’importer dans le fichier où vous allez l’utiliser.
```
import Websocket from ‘react-websocket’;
```
1. Connexion:
Vous pouvez ensuite ouvrir une connexion WebSocket en utilisant le composant Websocket et en passant l’URL du serveur WebSocket comme ceci :
```
```
1. Ecouter des messages :
Pour écouter les messages entrants, vous pouvez utiliser la prop ‘onMessage’. Cette prop prend une fonction callback qui est appelée chaque fois qu’un message est reçu.
```
```
Dans l’exemple ci-dessus, `handleData` est une méthode dans votre composant React que vous définissez pour gérer les données entrantes.
Voici comment cela pourrait ressembler :
```
handleData(data) {
let result = JSON.parse(data);
// Traiter les données comme vous le souhaitez
}
```
1. Envoyer des messages :
Si vous voulez envoyer des messages au serveur, vous pouvez utiliser la méthode `sendMessage` de l’objet de connexion WebSocket.
```
this.refWebSocket.sendMessage(‘Your message’);
```
Finalement, votre composant pourrait ressembler à cela :
```
import React from ‘react’;
import WebSocket from ‘react-websocket’;
class Component extends React.Component {
handleData(data) { // Traiter les données reçus } sendMessage(message){ this.refWebSocket.sendMessage(message); } render() { return (export default Component;
```
Cela devrait vous permettre de configurer une connexion WebSocket dans votre application React.
