// script.js const wsUri = «ws://localhost:3000»; const salidaDiv = document.getElementById(«salida»); const messageInput = document.getElementById(«mensaje»); const sendButton = document.getElementById(«enviar-btn»); dejar websocket; función conectar() { websocket = nuevo WebSocket(wsUri); websocket.onopen = función (evento) {outputDiv.innerHTML += «¡Conectado al servidor!»; }; websocket.onmessage = función (evento) { const mensaje recibido = evento.datos; outputDiv.innerHTML += «Recibido: » + Mensaje recibido + «»; }; websocket.onerror = función (evento) {outputDiv.innerHTML += «Error: » + evento.error + «»; }; websocket.onclose = función (evento) {outputDiv.innerHTML += «Conexión cerrada.»; }; } sendButton.addEventListener(«clic», función () { const mensaje = messageInput.value; if (websocket && websocket.readyState === WebSocket.OPEN) { websocket.send(message); messageInput.value = «»; } else {outputDiv.innerHTML += «Error: Conexión no abierta.»; conectar(); // Conéctese inmediatamente Este script configura varios controladores de eventos utilizando la API nativa del navegador. Iniciamos WebSocket tan pronto como se carga el script y observamos los eventos de apertura, cierre, mensaje y error. Cada uno agrega sus actualizaciones al DOM. El más importante es onmessage, donde aceptamos el mensaje del servidor y lo mostramos. El controlador Click en el botón toma la entrada ingresada por el usuario (messageInput.value) y usa el objeto WebSocket para enviarla al servidor con la función send(). Luego restablecemos el valor de la entrada a una cadena en blanco. Suponiendo que el back-end todavía está ejecutándose y disponible en ws://localhost:3000, ahora podemos ejecutar el front-end. Podemos utilizar el servidor http como una forma sencilla de ejecutar el front-end. Es una forma sencilla de alojar archivos estáticos en un servidor web, similar al módulo http de Python o al servidor web simple de Java, pero para Node. Puede instalarse como un paquete NPM global o simplemente ejecutarse con npx, desde el directorio del cliente: