WebSockets es un protocolo que permite la comunicación bidireccional en tiempo real entre el cliente y el servidor. Es una excelente opción para crear características en tiempo real como chats, notificaciones y feeds de actualizaciones en vivo.
Aquí te dejo un ejemplo simple de cómo puedes hacer una conexión en vivo con WebSockets en React JS.
Instala la biblioteca de websocket:
```
npm install —save websocket
```
A continuación se muestra un componente react que establece el websocket.
```js
import React, { Component } from ‘react’;
import { w3cwebsocket as W3CWebSocket } from “websocket”;
class App extends Component { client = new W3CWebSocket(‘ws://localhost:8080’);
componentDidMount() { this.client.onopen = () => { console.log(‘WebSocket Client Connected’); }; this.client.onmessage = (message) => { console.log(message); }; } render() { return (export default App;
```
El método `componentDidMount()` se llama después de que se monta el componente. Aquí se manejan los eventos de apertura y recepción de mensajes del websocket.
El mensaje de apertura solo se registra en la consola, mientras que los mensajes recibidos también se muestran en el registro de la consola. Puedes adaptar este código para hacer algo más útil con los mensajes recibidos, como almacenarlos en el estado del componente o mostrarlos en la interfaz.
Nota: Recuerda cambiar ‘ws://localhost:8080’ por la ubicación de tu servidor WebSocket.
Es muy sencillo manejar WebSockets con ReactJs una vez que comprendes cómo interactúan entre sí. Lo importante es comprender que manejas eventos en tiempo real en lugar de respuestas a solicitudes HTTP.
