Een online chat is een populaire toepassing: meerdere mensen praten er in real time met elkaar via internet. In deze tutorial bouwen we zo’n chat in JavaScript met de WebSockets-API, en werken we de interface bij met wat HTML en CSS.
Installeer eerst Node.js op je computer
Node.js is onmisbaar voor deze tutorial: het is een JavaScript-runtime waarmee je JavaScript aan serverkant draait. Voor onze online chat in JavaScript gebruiken we de WebSockets-API, en die is alleen aan serverkant beschikbaar. Met Node.js zetten we dus een WebSocket-server op en beheren we de verbindingen en de realtimecommunicatie tussen de verschillende clients.
Je moet Node.js daarom installeren voordat je deze tutorial kunt volgen. Je downloadt het installatieprogramma van de officiële site (https://nodejs.org/) en volgt de instructies op het scherm. Na de installatie kun je JavaScript aan serverkant draaien met het commando ‘node’ in je terminal.
Het pakket ws installeren met NPM
Installeer de module ‘ws’ met npm (Node Package Manager). Open je terminal en typ het volgende commando:
npm install wsDe chat in JavaScript
Een online chat is een populaire toepassing: meerdere mensen praten er in real time met elkaar via internet. In deze tutorial bouwen we zo’n chat in JavaScript met de WebSockets-API, en werken we de interface bij met wat HTML en CSS.
De HTML
Maak een HTML-pagina met een invoerformulier voor het bericht en een element om de berichten te tonen. Je kunt de volgende code gebruiken:
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>De CSS
Voeg CSS toe om de interface van je online chat op te fleuren. De volgende code kan als basis dienen:
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;
}JavaScript aan serverkant
Zet een WebSocket-server op met Node.js en de module ‘ws’. Voor de server kun je de volgende code gebruiken:
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');Start de Node.js-server door de volgende regel in de console te typen, in de map met je project en het bestand server.js
server.js
node server.jsIs dat gelukt, dan zie je ‘Server started on port 9999’ verschijnen. De servercode is nog niet af, maar daar komen we verderop in de tutorial op terug.
Eerst duiken we in de frontend.
JavaScript aan frontendkant
Verbind je HTML-pagina met de WebSocket-server via het WebSocket-object van JavaScript. Met de volgende code kom je op gang:
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);
};Stuur de berichten die de gebruiker intypt naar de WebSocket-server met de methode ‘send’ van het WebSocket-object. Met de volgende code kom je op gang:
script.js
document.getElementById('formulaire').addEventListener('submit', function(event) {
event.preventDefault();
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
});De chatberichten delen met de verbonden gebruikers
De berichten verschijnen niet zolang de Node.js-server niets naar de verbonden clients terugstuurt.
We keren dus terug naar server.js en passen een paar regels aan, zodat de Node.js-server de berichten in onze online chat in JavaScript naar de verbonden clients doorstuurt:
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');Krijg je aan de frontendkant van je online chat in JavaScript “[object Blob]” te zien in plaats van de berichten van de gebruikers, dan zit er een probleem in het datatype.
Controleer of je aan serverkant echt tekst verstuurt en geen Blob-objecten. Zorg dat de methode “send” van het WebSocket-object een string als argument krijgt:
ws.send(String(message));
Je hebt nu alle code van de tutorial: vergeet niet npm install uit te voeren om de afhankelijkheden te downloaden en de Node.js-server te starten.
Zo, nu weet je hoe je in een online chat in JavaScript de berichten van de gebruiker aan de frontendkant ontvangt en toont. Volg me gerust op de socials van het blog als het artikel je is bevallen.
