Der Online-Chat ist eine sehr verbreitete Anwendung: Mehrere Personen unterhalten sich in Echtzeit über das Internet. In diesem Tutorial bauen wir einen Online-Chat in JavaScript, mit der WebSockets-API und etwas CSS und HTML für eine ansehnliche Oberfläche.
Vor dem Start: Node.js installieren
Node.js ist für dieses Tutorial unverzichtbar, denn es ist die JavaScript-Laufzeitumgebung, mit der du JavaScript-Code serverseitig ausführst. In unserem Tutorial zum Online-Chat in JavaScript nutzen wir die WebSockets-API, die es nur auf der Serverseite gibt. Node.js erlaubt uns also, einen WebSocket-Server aufzusetzen und die Verbindungen sowie die Kommunikation in Echtzeit zwischen den einzelnen Clients zu verwalten.
Du musst Node.js daher installieren, bevor du diesem Tutorial folgen kannst. Das Installationsprogramm lädst du von der offiziellen Seite (https://nodejs.org/) herunter und folgst den Anweisungen auf dem Bildschirm. Danach solltest du JavaScript-Code serverseitig ausführen können, mit dem Befehl „node“ in deinem Terminal.
Das Paket ws über NPM installieren
Installiere das Modul „ws“ mit npm (Node Package Manager). Öffne dein Terminal und tippe den folgenden Befehl ein:
npm install wsChat in JavaScript
Der Online-Chat ist eine sehr verbreitete Anwendung: Mehrere Personen unterhalten sich in Echtzeit über das Internet. In diesem Tutorial bauen wir einen Online-Chat in JavaScript, mit der WebSockets-API und etwas CSS und HTML für eine ansehnliche Oberfläche.
HTML-Code
Lege eine HTML-Seite mit einem Formular zur Eingabe der Nachricht und einem Element für die Anzeige der Nachrichten an. Du kannst dafür den folgenden Code nehmen:
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>CSS-Code
Etwas CSS macht die Oberfläche deines Online-Chats ansehnlicher. Der folgende Code eignet sich als Grundlage:
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-Code auf dem Server
Baue mit Node.js und dem Modul „ws“ einen WebSocket-Server. Für den Server kannst du den folgenden Code verwenden:
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');Um den Node.js-Server zu starten, tippst du die folgende Zeile in der Konsole ein, im Ordner mit deinem Projekt und der Datei server.js
server.js
node server.jsWenn alles geklappt hat, siehst du „Server started on port 9999“. Der serverseitige Code ist damit noch nicht fertig, wir kommen später im Tutorial darauf zurück und verbessern ihn.
Zunächst schauen wir uns aber das Frontend an.
JavaScript-Code im Frontend
Verbinde deine HTML-Seite über das WebSocket-Objekt von JavaScript mit dem WebSocket-Server. Für den Anfang kannst du den folgenden Code verwenden:
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);
};Die vom Benutzer eingegebenen Nachrichten schickst du mit der Methode „send“ des WebSocket-Objekts an den Server. Für den Anfang kannst du den folgenden Code verwenden:
script.js
document.getElementById('formulaire').addEventListener('submit', function(event) {
event.preventDefault();
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
});Die Chat-Nachrichten an alle verbundenen Benutzer verteilen
Normalerweise erscheinen die Nachrichten nicht, solange der Node.js-Server nichts an die verbundenen Clients schickt.
Wir müssen also zurück zu unserer server.js und ein paar Zeilen ändern, damit der Node.js-Server in unserem Online-Chat in JavaScript Nachrichten an die verbundenen Clients sendet:
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');Möglicherweise hast du ein Problem mit dem Datentyp, wenn im Frontend deines Online-Chats in JavaScript „[object Blob]“ statt der von den Benutzern gesendeten Nachrichten erscheint.
Prüfe, ob du auf dem Server wirklich Text und nicht Blob-Objekte verschickst. Stell sicher, dass die Methode „send“ des WebSocket-Objekts eine Zeichenkette als Argument bekommt:
ws.send(String(message));
Sie haben jetzt den gesamten Code des Tutorials: Vergessen Sie nicht, mit npm install die Abhängigkeiten zu laden und den Node.js-Server zu starten.
Damit weißt du, wie du die Nachrichten der Benutzer im Frontend eines Online-Chats in JavaScript empfängst und anzeigst. Wenn dir der Artikel gefallen hat, folge dem Blog gern in den sozialen Netzwerken.
