Dieses Beispiel verbindet einen kleinen Node.js-Server mit mehreren Browser-Clients. Nachrichten erscheinen ohne Neuladen bei allen verbundenen Teilnehmern.
Projektstruktur
vibe-chat/
package.json
server.js
public/index.htmlpackage.json
{
"scripts":{"start":"node server.js"},
"dependencies":{"ws":"^8.18.0"}
}Server: server.js
const http=require('node:http');
const fs=require('node:fs');
const path=require('node:path');
const {WebSocketServer}=require('ws');
const server=http.createServer(function(req,res){
fs.readFile(path.join(__dirname,'public','index.html'),function(error,data){
if(error){res.writeHead(500);return res.end('Fehler')}
res.writeHead(200,{'Content-Type':'text/html; charset=utf-8'});res.end(data);
});
});
const wss=new WebSocketServer({server});
wss.on('connection',function(socket){
socket.on('message',function(raw){
const message=raw.toString().slice(0,500);
wss.clients.forEach(function(client){if(client.readyState===1)client.send(message)});
});
});
server.listen(3000,function(){console.log('Chat: http://localhost:3000')});Client: public/index.html
<!doctype html><html lang="de"><meta charset="utf-8"><title>Vibe Chat</title>
<h1>Vibe Chat</h1><ul id="messages"></ul>
<form id="form"><input id="text" required maxlength="500" autocomplete="off"><button>Senden</button></form>
<script>
const socket=new WebSocket('ws://'+location.host);
socket.onmessage=function(event){
const li=document.createElement('li');li.textContent=event.data;document.querySelector('#messages').append(li);
};
document.querySelector('#form').onsubmit=function(event){
event.preventDefault();const input=document.querySelector('#text');
if(socket.readyState===WebSocket.OPEN){socket.send(input.value);input.value=''}
};
</script></html>Ausführen
npm install
npm startÖffne http://localhost:3000 in zwei Browserfenstern und sende Nachrichten in beide Richtungen.
Sinnvolle Folgeprompts
- Nutzernamen und Zeitstempel
- Getrennte Chat-Räume
- Reconnect-Anzeige und Rate-Limit