Maison > Article > interface Web > WebSockets
Les WebSockets permettent une communication bidirectionnelle en temps réel entre les clients et les serveurs, ce qui les rend idéaux pour créer des applications interactives et collaboratives. Dans ce guide, nous explorons les WebSockets et comment implémenter des fonctionnalités en temps réel dans vos applications.
Les WebSockets fournissent une connexion persistante entre un client (généralement un navigateur) et un serveur, permettant aux deux de s'envoyer des messages à tout moment. Contrairement aux requêtes HTTP traditionnelles, les WebSockets facilitent une communication efficace et à faible latence, ce qui les rend adaptés aux applications en temps réel.
Socket.IO est une bibliothèque populaire qui simplifie l'implémentation de WebSocket dans les applications Node.js.
// server.js 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); io.on('connection', (socket) => { console.log('A client connected'); socket.on('disconnect', () => { console.log('Client disconnected'); }); socket.on('chat message', (msg) => { io.emit('chat message', msg); // Broadcast message to all connected clients }); }); server.listen(3000, () => { console.log('Server running on http://localhost:3000'); });
<!-- index.html --> <meta charset="UTF-8"> <title>WebSocket Chat Example</title> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); function sendMessage() { const message = document.getElementById('message').value; socket.emit('chat message', message); document.getElementById('message').value = ''; } socket.on('chat message', (msg) => { const item = document.createElement('li'); item.textContent = msg; document.getElementById('messages').appendChild(item); }); </script>
Les WebSockets fournissent un mécanisme puissant pour créer des applications en temps réel qui fournissent des mises à jour instantanées et des expériences interactives aux utilisateurs. En tirant parti des capacités des WebSockets et des bibliothèques telles que Socket.IO, vous pouvez améliorer les fonctionnalités et l'engagement de vos applications full stack.
Ensuite, nous explorerons le rendu côté serveur à l'aide de Next.js pour améliorer les performances et le référencement.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!