Communication en temps réel via PHP et Pusher

Avec le développement d'Internet, la communication en temps réel est devenue de plus en plus importante. Qu'il s'agisse du service client en ligne ou de l'interaction en temps réel dans les jeux, un support de communication en temps réel est nécessaire. En tant que l'un des langages dominants du développement Web, le langage PHP dispose effectivement de plus en plus de méthodes de communication en temps réel. Parmi eux, grâce à la technologie Pusher, les fonctions de communication en temps réel peuvent être réalisées rapidement et facilement.

Qu'est-ce que Pusher ?

Pusher est un service de messagerie en temps réel qui permet aux applications de mettre en œuvre facilement des fonctions de communication en temps réel sans configurer leurs propres serveurs. Il est basé sur le protocole WebSockets et présente les avantages d'une grande fiabilité et stabilité, d'une facilité d'utilisation et d'une efficacité de développement élevée. De plus, Pusher fournit également une variété de SDK différents, notamment PHP, Javascript, Ruby et d'autres langages. Ces SDK permettent aux développeurs d'intégrer rapidement les services Pusher dans leurs applications pour réaliser des fonctions de communication en temps réel.

Comment utiliser Pusher ?

Avant d'utiliser Pusher, nous devons créer un compte Pusher et créer une application. Ensuite, nous devons générer une clé d'application, un secret d'application et un identifiant d'application dans l'application et ajouter ces informations à notre application.

Ensuite, nous devons installer le SDK PHP Pusher, qui peut être installé via Composer :

composer require pusher/pusher-php-server "^4.0"

Une fois l'installation terminée, nous pouvons commencer à écrire du code :

<?php

// 引入Pusher SDK
require __DIR__ . '/vendor/autoload.php';

// 初始化Pusher实例
$options = array(
  'cluster' => 'YOUR_CLUSTER',
  'useTLS' => true
);
$pusher = new PusherPusher(
  'APP_KEY',
  'APP_SECRET',
  'APP_ID',
  $options
);

// 发送消息
$pusher->trigger('channel_name', 'event_name', array('message' => 'hello world'));

Le code ci-dessus montre comment utiliser Pusher et le contenu qui doit être remplacé est :

1. Remplacez YOUR_CLUSTER par votre propre cluster Pusher.
2. Remplacez APP_KEY, APP_SECRET et APP_ID par votre propre clé d'application Pusher, votre secret d'application et votre identifiant d'application.

Ce script PHP poussera un paquet de données JSON avec l'attribut "message" vers le canal nommé "channel_name". Le paquet de données contient le message "hello world".

Bien sûr, dans les applications réelles, il nous est impossible d'envoyer simplement des messages à Pusher de cette manière. Ci-dessous, nous présenterons en détail comment utiliser Pusher dans des applications pratiques.

Combat pratique : une salle de discussion en temps réel

Ensuite, nous utiliserons Pusher pour créer une salle de discussion en temps réel afin de réaliser la fonction de discussion en temps réel entre les utilisateurs.

Première étape : Préparation

Tout d'abord, nous devons créer une nouvelle application dans Pusher. Connectez-vous au site officiel de Pusher, cliquez sur le bouton « CRÉER UNE NOUVELLE APPLICATION », remplissez les informations de base et créez l'application comme vous y êtes invité.

Ensuite, nous devons trouver APP_KEY, APP_SECRET et APP_ID sous l'onglet "Clés" des paramètres de l'application et conserver correctement ces informations.

Ensuite, nous devons configurer un serveur Web pour exécuter notre script PHP. Puisque nous devons envoyer des messages en temps réel, nous ne pouvons pas utiliser le serveur Apache ou Nginx traditionnel et devons utiliser un serveur prenant en charge le protocole WebSocket. Il est recommandé d'utiliser la bibliothèque PHP Ratchet comme serveur WebSocket, qui peut être installé via Composer :

composer require cboden/ratchet

Étape 2 : Construire une interface de base

Avant de commencer à écrire du code PHP, nous devons créer une interface de salle de discussion de base. Les éléments suivants doivent être inclus dans l'interface :

1. Zone de saisie : utilisée pour saisir le contenu du chat.
2. Bouton Envoyer : utilisé pour envoyer du contenu de chat.
3. Liste des messages : utilisée pour afficher le contenu du chat envoyé.

Ici, nous utilisons du code HTML et JavaScript relativement simple pour implémenter cette interface.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>实时聊天室</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="chat-form">
    <input type="text" id="message-input"/>
    <button type="submit">发送</button>
  </form>
  <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 初始化Pusher客户端
    const pusher = new Pusher('APP_KEY', {
      cluster: 'YOUR_CLUSTER',
      encrypted: true
    });

    // 订阅频道
    const channel = pusher.subscribe('chat-channel');

    // 处理消息
    channel.bind('chat-message', function(data) {
      $('#messages').append('<li>' + data.message + '</li>');
    });

    // 发送消息
    $('#chat-form').submit(function(e) {
      e.preventDefault();
      const message = $('#message-input').val();
      $('#message-input').val('');
      $.post('/send-message.php', {message: message});
    });
  </script>
</body>
</html>

Dans le code ci-dessus, nous avons présenté le client Pusher et la bibliothèque jQuery, et défini une instance de client Pusher. Ensuite, nous nous sommes abonnés au canal Pusher nommé « chat-channel » et avons défini une fonction de gestionnaire d'événements pour écrire le message dans la liste de messages lorsque l'événement « chat-message » est reçu dans ce canal. Dans le même temps, nous avons également défini une fonction de traitement des événements de soumission de formulaire. Lorsque l'utilisateur clique sur le bouton d'envoi, les données du formulaire seront POSTées dans le fichier /send-message.php.

Étape 3 : Envoyer et recevoir des messages

Maintenant, nous devons implémenter le code dans le fichier /send-message.php afin que les données du formulaire puissent être envoyées correctement au serveur Pusher. Le code complet de /send-message.php est le suivant :

<?php

// 引入Pusher SDK
require __DIR__ . '/vendor/autoload.php';

// 初始化Pusher实例
$options = array(
  'cluster' => 'YOUR_CLUSTER',
  'useTLS' => true
);
$pusher = new PusherPusher(
  'APP_KEY',
  'APP_SECRET',
  'APP_ID',
  $options
);

// 获取消息内容
$message = $_POST['message'];

// 将消息推送到Pusher服务器中
$pusher->trigger('chat-channel', 'chat-message', array('message' => $message));

Dans le code ci-dessus, nous avons d'abord introduit le SDK Pusher et initialisé une instance Pusher. Ensuite, nous transmettons le message au canal Pusher nommé « chat-channel » en fonction des données soumises par le formulaire, et spécifions le nom de l'événement et le contenu du message.

De cette façon, lorsque l'utilisateur saisit un message dans la salle de discussion et clique sur le bouton "Envoyer", le message sera POSTé dans le fichier /send-message.php, puis le code PHP poussera le message vers le Serveur pousseur. À ce stade, le serveur Pusher diffusera le message à tous les clients abonnés au « canal de discussion » pour terminer l'ensemble du processus d'envoi et de réception du message.

Conclusion

L'utilisation de la technologie Pusher pour mettre en œuvre des fonctions de communication en temps réel peut grandement simplifier la difficulté de mise en œuvre et améliorer l'efficacité du développement. Grâce à l'exemple de démonstration ci-dessus, nous pouvons voir qu'il est très pratique d'utiliser la technologie Pusher pour créer une salle de discussion en temps réel dans la pratique.

Bien sûr, Pusher ne se limite pas aux scénarios d'application de salon de discussion, il peut être utilisé dans d'innombrables scénarios, tels que les jeux en temps réel, l'Internet des objets, la surveillance des données en temps réel et d'autres scénarios peuvent être mis en œuvre à l'aide de la technologie Pusher. Si vous devez également implémenter des fonctions de communication en temps réel, vous pouvez essayer d'utiliser Pusher pour implémenter rapidement les fonctions associées.

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!