Analyse de cas d'application de WebSocket et communication en temps réel-tutoriel php-php.cn

Analyse de cas d'application de WebSocket et communication en temps réel

王林

Libérer： 2023-10-15 09:52:01

original

610 Les gens l'ont consulté

Analyse de cas dapplication de WebSocket et communication en temps réel

Analyse de cas d'application de WebSocket et communication en temps réel

Avec le développement d'Internet et les progrès de la technologie, la communication en temps réel devient de plus en plus importante dans diverses applications. Le modèle requête-réponse traditionnel basé sur HTTP ne peut souvent pas répondre aux besoins de communication en temps réel, c'est pourquoi WebSocket est apparu comme un nouveau protocole. Le protocole WebSocket est basé sur TCP et permet d'établir une connexion persistante entre le client et le serveur, réalisant une communication en temps réel en duplex intégral.

Cet article analysera les cas d'application WebSocket via une simple application de salle de discussion et fournira des exemples de code correspondants.

Aperçu du projet
Nous allons mettre en œuvre une application simple de salle de discussion, où les utilisateurs peuvent envoyer des messages sur la page Web et communiquer avec d'autres utilisateurs en ligne en temps réel. L'application utilisera le protocole WebSocket pour la communication en temps réel.
Sélection de la technologie
Nous avons choisi d'utiliser Node.js comme plateforme backend et Socket.io comme bibliothèque WebSocket. Socket.io est un framework d'applications en temps réel open source qui encapsule le protocole WebSocket et fournit une API simple et facile à utiliser.
Implémentation côté serveur
Tout d'abord, nous devons créer une instance Socket.io côté serveur et écouter le port spécifié.

// 引入依赖
const app = require('http').createServer();
const io = require('socket.io')(app);

// 监听指定端口
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

// 处理连接事件
io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // 处理接收到的消息
  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // 广播消息给所有连接的客户端
    io.emit('message', message);
  });

  // 处理断开连接事件
  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

Copier après la connexion

Implémentation du client
Dans la page Web, nous devons présenter la bibliothèque client Socket.io et nous connecter au serveur.

<!DOCTYPE html>
<html>
<head>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 连接到服务器
    const socket = io('http://localhost:3000');

    // 处理接收到的消息
    socket.on('message', (message) => {
      console.log(`Received message: ${message}`);
      // 更新页面显示
      document.getElementById('messages').innerHTML += `<li>${message}</li>`;
    });

    // 发送消息
    function sendMessage() {
      const input = document.getElementById('input');
      const message = input.value;
      // 发送消息给服务器
      socket.emit('message', message);
      input.value = '';
    }
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input type="text" id="input">
  <button onclick="sendMessage()">发送</button>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, socket.emit est utilisé pour envoyer des messages au serveur, et socket.on est utilisé pour recevoir des messages du serveur et mettre à jour le affichage des pages. socket.emit用于发送消息给服务器，socket.on用于接收服务器发来的消息，并更新页面显示。

运行项目
在命令行中进入项目目录，运行以下命令来启动服务器：

node server.js

Copier après la connexion

然后，在浏览器中打开http://localhost:3000

Entrez le répertoire du projet sur la ligne de commande et exécutez la commande suivante pour démarrer le serveur :

rrreee
Ensuite, ouvrez http://localhost:3000 pour accéder à l'application de salon de discussion. Plusieurs utilisateurs peuvent envoyer des messages sur la page Web en même temps pour établir une communication en temps réel.

A travers les cas ci-dessus, nous pouvons constater les avantages applicatifs de WebSocket en communication en temps réel. Par rapport au modèle de requête-réponse HTTP traditionnel, WebSocket peut établir une connexion persistante et établir une communication bidirectionnelle en temps réel, ce qui améliore considérablement l'expérience utilisateur.

Cet article présente l'application de WebSocket et la communication en temps réel à travers un simple cas d'application de salle de discussion. En utilisant Node.js et Socket.io, nous pouvons facilement créer des applications de communication en temps réel pour offrir aux utilisateurs une meilleure expérience interactive. J'espère que cet article sera utile pour comprendre l'application de WebSocket et comment établir une communication en temps réel.

Référence : 🎜🎜🎜Documentation officielle de Socket.io : https://socket.io/docs/🎜🎜

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Analyse de cas d'application de WebSocket et communication en temps réel