Estoy tratando de conectar una capa de back-end que se ejecuta en localhost, a continuación se muestra el código fuente:

 const { createServer } = require("http"); const cors = require("cors"); const photos = require("./photos"); const app = require("express")(); const WebSocket = require("ws"); app.use(cors()); app.get("/", (req, res) => { res.status(200).json({}); }); app.get("/photos", (req, res) => { res.status(200).json({ photos }); }); const clients = new Set(); app.post("/photos/:id", (req, res) => { const photo = photos.find((p) => { return p.id === req.params.id; }); photo.status= "PENDING"; // Send back an approval const timeout = (3 + Math.floor(Math.random() * 4)) * 1000; setTimeout(() => { photo.status = "APPROVED"; clients.forEach((ws) => { ws.send(JSON.stringify({ event: "APPROVED", photo })); }); }, timeout); res.status(200).json({ photo }); }); const port = process.env.PORT || 3001; const server = createServer(app); server.listen(port, () => { console.log(`Starting server on port ${port}`); }); const wss = new WebSocket.Server({ path: "/ws", server }); wss.on("connection", (ws) => { clients.add(ws); console.log("WebSocket connection established"); ws.on("close", () => { clients.delete(ws); console.log("WebSocket connection closed"); }); });

Como en el cliente de reacción, no podemos usar "ws", así que intenté usar ambos paquetes "websocket", pero no puedo conectarme a "http", ya que no es compatible. A continuación se muestra el código fuente:

 import React from "react"; import { w3cwebsocket as W3CWebSocket } from "websocket"; const client = new W3CWebSocket('http://localhost:3001/ws'); // const client = new W3CWebSocket('ws://localhost:3001'); function App() { React.useEffect( () => { client.onopen = () => { console.log('WebSocket Client Connected'); }; client.onmessage = (message) => { console.log(message); }; }, [] ) return null }

Necesita ayuda a nivel de cliente para conectarse a 'http://localhost:3001/ws' para establecer y escuchar la conexión.