La chat online è un’applicazione molto diffusa che permette a più persone di parlare in tempo reale su Internet. In questo tutorial vediamo come creare una chat online in JavaScript, usando l’API WebSockets e aggiungendo CSS e HTML per migliorare l’interfaccia utente.
Prima di iniziare, installa Node.js sul tuo computer
Node.js è indispensabile per questo tutorial perché è un ambiente di runtime JavaScript che permette di eseguire codice JavaScript lato server. Nel nostro tutorial sulla creazione di una chat online in JavaScript usiamo l’API WebSockets, disponibile solo lato server. Node.js ci permette quindi di creare un server WebSocket e di gestire le connessioni e le comunicazioni in tempo reale tra i vari client.
Prima di poter seguire questo tutorial devi quindi installare Node.js sul tuo computer. Puoi scaricare l’installer di Node.js dal sito ufficiale (https://nodejs.org/) e seguire le istruzioni di installazione a schermo. Una volta installato, dovresti riuscire a eseguire codice JavaScript lato server con il comando «node» nel terminale.
Installare il pacchetto ws con NPM
Installa il modulo «ws» con npm (Node Package Manager). Apri il terminale e digita il comando seguente:
npm install wsChat in JavaScript
La chat online è un’applicazione molto diffusa che permette a più persone di parlare in tempo reale su Internet. In questo tutorial vediamo come creare una chat online in JavaScript, usando l’API WebSockets e aggiungendo CSS e HTML per migliorare l’interfaccia utente.
Codice HTML
Crea una pagina HTML con un form per scrivere il messaggio e un elemento in cui mostrarli. Puoi usare il codice seguente:
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>Codice CSS
Aggiungi del CSS per migliorare l’interfaccia della tua chat online. Puoi partire da questo codice:
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;
}Codice JavaScript lato server
Crea un server WebSocket con Node.js e il modulo «ws». Per il server puoi usare questo codice:
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');Per avviare il server Node.js, digita la riga seguente nella console, dentro la cartella che contiene il progetto e il file server.js
server.js
node server.jsSe tutto è andato a buon fine dovresti vedere comparire «Server started on port 9999». Il codice lato server non è ancora finito, ma ci torneremo più avanti nel tutorial per migliorarlo.
Nel frattempo, andiamo a vedere il lato front.
Codice JavaScript lato front
Collega la tua pagina HTML al server WebSocket usando l’oggetto WebSocket di JavaScript. Per iniziare puoi usare questo codice:
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);
};Invia al server WebSocket i messaggi scritti dall’utente con il metodo «send» dell’oggetto WebSocket. Per iniziare puoi usare questo codice:
script.js
document.getElementById('formulaire').addEventListener('submit', function(event) {
event.preventDefault();
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
});Come inviare i messaggi della chat agli utenti connessi
Normalmente i messaggi non compaiono se il server Node.js non li invia ai client connessi.
Dobbiamo tornare sul nostro server.js e modificare qualche riga per inviare i messaggi ai client connessi lato server Node.js nella nostra chat online in 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');Potresti avere un problema di tipo di dato se al posto dei messaggi inviati dagli utenti compare “[object Blob]” lato front nella tua chat online in JavaScript.
Verifica di inviare del testo e non degli oggetti Blob lato server. Assicurati che il metodo “send” dell’oggetto WebSocket riceva davvero una stringa come argomento:
ws.send(String(message));
Avete ora tutto il codice del tutorial: non dimenticate di eseguire npm install per scaricare le dipendenze e di avviare il server Node.js.
Ecco fatto: ora sai come ricevere e mostrare lato front i messaggi che arrivano all’utente in una chat online in JavaScript! Se l’articolo ti è piaciuto, seguimi sui vari social del blog.
