El chat en línea es una aplicación muy popular que permite a varias personas hablar en tiempo real por Internet. Este tutorial muestra cómo crear un chat en línea en JavaScript, usando la API de WebSockets y añadiendo CSS y HTML para mejorar la interfaz de usuario.
Antes de empezar, instala Node.js en tu ordenador
Node.js es imprescindible para este tutorial porque es un entorno de ejecución de JavaScript que permite ejecutar código JavaScript en el lado del servidor. En nuestro tutorial sobre la creación de un chat en línea en JavaScript usamos la API de WebSockets, que solo está disponible en el servidor. Node.js nos permite, por tanto, crear un servidor WebSocket y gestionar las conexiones y las comunicaciones en tiempo real entre los distintos clientes.
Así que hay que instalar Node.js en tu ordenador antes de poder seguir este tutorial. Puedes descargar el instalador de Node.js desde el sitio oficial (https://nodejs.org/) y seguir las instrucciones de instalación en pantalla. Una vez instalado, deberías poder ejecutar código JavaScript en el servidor con el comando «node» en tu terminal.
Instalar el paquete ws con NPM
Instala el módulo «ws» con npm (Node Package Manager). Abre tu terminal y escribe el siguiente comando:
npm install wsChat en JavaScript
El chat en línea es una aplicación muy popular que permite a varias personas hablar en tiempo real por Internet. Este tutorial muestra cómo crear un chat en línea en JavaScript, usando la API de WebSockets y añadiendo CSS y HTML para mejorar la interfaz de usuario.
Código HTML
Crea una página HTML con un formulario para escribir el mensaje y un elemento donde mostrarlos. Puedes usar el siguiente código:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat en ligne</title>
<link rel="stylesheet" href="http://style.css">
</head>
<body>
<div id="chat">
<div id="messages">
<!-- Les messages seront affichés ici -->
</div>
<form id="formulaire">
<input type="text" id="message" placeholder="Entrez votre message ici">
<button type="submit">Envoyer</button>
</form>
</div>
</body>
</html>Código CSS
Añade CSS para mejorar la interfaz de tu chat en línea. Puedes partir de este código:
style.css
#chat {
width: 500px;
margin: 0 auto;
font-family: sans-serif;
}
#messages {
border: 1px solid #ccc;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
#formulaire {
padding: 10px;
text-align: center;
}
#formulaire input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
width: 80%;
}
#formulaire button[type="submit"] {
border: none;
border-radius: 3px;
padding: 8px;
background-color: #4caf50;
color: #fff;
}Código JavaScript del lado del servidor
Crea un servidor WebSocket con Node.js y el módulo «ws». Puedes usar este código para el servidor:
server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9999 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('Bienvenue sur le chat Gekkode!');
});
console.log('Server started on port 9999');Para arrancar el servidor Node.js, escribe la siguiente línea en la consola, dentro de la carpeta que contiene tu proyecto y el archivo server.js
server.js
node server.jsSi todo ha ido bien, deberías ver «Server started on port 9999». Todavía no hemos terminado el código del servidor, pero volveremos a él más adelante en el tutorial para mejorarlo.
Mientras tanto, vamos a ver el lado del front.
Código JavaScript del lado del front
Conecta tu página HTML al servidor WebSocket usando el objeto WebSocket de JavaScript. Puedes usar este código para empezar:
script.js
const socket = new WebSocket('ws://localhost:9999');
socket.onopen = function() {
console.log('Connecté au serveur WebSocket');
};
socket.onmessage = function(event) {
const message = document.createElement('div');
message.textContent = event.data;
document.getElementById('messages').appendChild(message);
};Envía al servidor WebSocket los mensajes que escribe el usuario con el método «send» del objeto WebSocket. Puedes usar este código para empezar:
script.js
document.getElementById('formulaire').addEventListener('submit', function(event) {
event.preventDefault();
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
});Cómo compartir los mensajes del chat con los usuarios conectados
Normalmente los mensajes no se muestran si el servidor Node.js no envía nada a los clientes conectados.
Tenemos que volver a nuestro server.js y modificar unas cuantas líneas para enviar mensajes a los clientes conectados desde el servidor Node.js en nuestro chat en línea en JavaScript:
script.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9999 });
const clients = [];
wss.on('connection', function connection(ws) {
clients.push(ws);
ws.on('message', function incoming(message) {
console.log('received: %s', message);
broadcast(String(message));
});
ws.send('Bienvenue sur le chat Gekkode!');
});
function broadcast(message) {
clients.forEach(function(client) {
client.send(message);
});
}
console.log('Server started on port 9999');Es posible que tengas un problema de tipo de datos si en el front aparece «[object Blob]» en lugar de los mensajes enviados por los usuarios en tu chat en línea en JavaScript.
Comprueba que desde el servidor envías texto y no objetos Blob. Asegúrate de que el método «send» del objeto WebSocket recibe una cadena de caracteres como argumento:
ws.send(String(message));
Ya tiene todo el código del tutorial: no olvide ejecutar npm install para descargar las dependencias y lanzar el servidor Node.js.
Ya sabes cómo recibir y mostrar en el front los mensajes que llegan al usuario en un chat en línea en JavaScript. Si el artículo te ha gustado, sígueme en las distintas redes sociales del blog.
