Hoe gebruik ik Socket.IO voor realtime chat?

Socket.IO is een bibliotheek die realtime, bidirectionele communicatie mogelijk maakt tussen webclients en servers. Het bestaat uit twee delen: een cliënt-bibliotheek die in de browser draait en een serverbibliotheek voor Node.js. In dit basisvoorbeeld zullen we zien hoe we een eenvoudige realtime chatapp kunnen maken.

Let op: Deze instructies zijn alleen bedoeld voor mensen met een basale achtergrond in het programmeren. Als je niet bekend bent met bepaalde termen of concepten, moet je mogelijk extra zelfstudie doen om deze instructies te volgen.

Server:

1. Installeer Node.js en NPM. NPM (Node Package Manager) is geïnstalleerd als onderdeel van Node.js. Ga naar https://nodejs.org/en/download/ om de installer te downloaden.

1. Installeer Express en Socket.io met npm in je projectmap: \`\`\` npm install express socket.io \`\`\`

1. Creëer een `index.js` bestand en voeg de volgende code toe om een http-server te maken met express:

\`\`\`javaScript const express = require(‘express’); const app = express(); const http = require(‘http’).Server(app); const io = require(‘socket.io’)(http); app.get(‘/’, (req, res) => { res.sendFile(\_\_dirname + ‘/index.html’); }); io.on(‘connection’, (socket) => { socket.on(‘chat message’, (msg) => { io.emit(‘chat message’, msg); }); }); http.listen(3000, () => { console.log(‘listening on \*:3000’); }); \`\`\` Met deze code wordt elk bericht dat wordt ontvangen op het ‘chat message’-event naar iedereen ink. de afzender zelf gestuurd.

Client:

1. Creëer een index.html’-bestand in dezelfde map als uw `index.js` bestand en voeg de volgende code toe:

\`\`\`html Socket.IO chat

\`\`\` In deze-code verbindt de client met de server met Socket.IO (let op het `src=”/socket.io/socket.io.js”`), stuurt het ‘chat message’ event naar de server bij verzending van het formulier en luistert het naar het ‘chat message’ event dat van de server komt om zo de ontvangen berichten weer te geven.

1. Open een terminal en voer het index.js-bestand uit met het Node.js commando:

\`\`\` node index.js \`\`\`

1. Open in een webbrowser `http://localhost:3000/` om de chat-app te openen. Je kunt meerdere vensters openen om de realtime mogelijkheden te zien.

Dit is een zeer eenvoudige chat en mist veel features die je zou willen in een echte toepassing (zoals gebruikers, privéberichten, berichtgeschiedenis, etc.), maar het geeft je wel een basisidee van hoe je Socket.IO kunt gebruiken voor realtime chat.