Creer un Chat Simple avec Socket.IO et Node.js
Salut HaWkers ! Dans ce tutoriel, nous allons creer un chat en temps reel en utilisant Socket.IO et Node.js. Socket.IO est une bibliotheque qui permet une communication en temps reel, bidirectionnelle et basee sur des evenements entre le navigateur et le serveur.
Preparation de l'Environnement
Pour commencer, assurez-vous d'avoir Node.js et npm installes sur votre systeme. Si vous ne les avez pas, vous pouvez telecharger Node.js ici. Apres l'installation, vous pouvez installer Socket.IO avec la commande suivante :
npm install socket.ioConfiguration du Serveur
Commencons par creer un serveur HTTP simple en Node.js. Ensuite, nous allons configurer Socket.IO pour utiliser ce serveur :
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', socket => {
console.log('Un utilisateur s\'est connecte');
});
server.listen(3000, () => {
console.log('Serveur ecoute sur le port 3000');
});Creation de l'Interface Utilisateur
Maintenant, creons une interface utilisateur simple pour notre chat. Dans le fichier index.html, nous allons ajouter un formulaire pour envoyer des messages et une zone pour afficher les messages recus :
<!DOCTYPE html>
<html>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Envoyer</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
const input = document.getElementById('m');
socket.emit('chat message', input.value);
input.value = '';
});
socket.on('chat message', msg => {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
</script>
</body>
</html>Finalisation du Chat
Maintenant, retournons a notre serveur et ajoutons le code pour recevoir et envoyer des messages :
io.on('connection', socket => {
console.log('Un utilisateur s\'est connecte');
socket.on('chat message', msg => {
io.emit('chat message', msg);
});
});Conclusion
Felicitations ! Vous avez cree un chat en temps reel basique avec Socket.IO et Node.js. C'est un excellent point de depart pour la creation d'applications plus complexes en temps reel !
Pour continuer a ameliorer vos competences en Node.js et Socket.IO, consultez l'article sur Dechiffrer les APIs RESTful : La Cle pour une Communication Efficace entre Applications.