Comment réaliser la synchronisation des données de jeu en temps réel à l'aide de PHP et Websocket

Avec le développement de la technologie Internet, le domaine du jeu doit également parvenir à une synchronisation des données de jeu en temps réel. Le protocole WebSocket est une technologie utilisée pour la communication bidirectionnelle entre le client et le serveur, offrant la possibilité de synchronisation des données en temps réel.

Cet article explique comment utiliser PHP et WebSocket pour réaliser la synchronisation des données de jeu en temps réel. Les étapes de mise en œuvre spécifiques sont les suivantes :

Étape 1 : Comprendre WebSocket

WebSocket est un protocole HTML5 qui utilise des connexions persistantes entre les clients et. Serveurs, réalisant une communication bidirectionnelle en temps réel. Une fois la connexion WebSocket établie, le serveur et le client peuvent s'envoyer des données en temps réel pour réaliser une synchronisation en temps réel.

Étape 2 : Écrire le serveur WebSocket

En PHP, nous pouvons utiliser la bibliothèque Ratchet pour implémenter le serveur WebSocket. Ratchet est une bibliothèque d'implémentation PHP WebSocket qui utilise ReactPHP comme bibliothèque d'événements pour gérer les connexions ainsi que la réception et l'envoi de données.

Tout d'abord, nous devons installer Composer pour gérer nos dépendances. Créez un fichier composer.json dans le répertoire racine du projet et écrivez le code suivant :

{

"require": {
    "cboden/ratchet": "^0.4.3",
    "react/event-loop": "^1.0.0",
    "react/socket": "^1.0.0",
    "react/http": "^1.0.0"
}

}

Ensuite, exécutez la commande suivante dans la ligne de commande pour installer Ratchet et ses dépendances :

composer install

Suivant , nous créons un fichier appelé server.php, ce fichier sera le point d'entrée de notre serveur WebSocket. Nous créons une instance de serveur WebSocket dans ce fichier, en utilisant le code suivant :

4b93c1fd87dbbaf1f72c6e3edad1b61arun();

Nous créons Une classe appelée Game est créée en tant que processeur de WebSocket. Cette classe implémente l'interface MessageComponentInterface de Ratchet. Nous devons implémenter quatre méthodes : onOpen indique quand un nouveau client WebSocket est connecté, onMessage indique quand un message envoyé par le client est reçu et onClose indique quand le client WebSocket se déconnecte, onError signifie quand un. une erreur se produit.

Dans la classe Game, nous utilisons l'objet SplObjectStorage pour stocker tous les clients connectés. Dans la méthode onOpen, nous attachons l'objet de connexion à SplObjectStorage. Dans la méthode onMessage, nous parcourons tous les clients dans SplObjectStorage et envoyons le message reçu. Dans la méthode onClose, nous supprimons l'objet de connexion de SplObjectStorage.

Enfin, nous créons et exécutons le serveur WebSocket à l'aide de la classe IoServer. Nous regroupons HttpServer et WsServer ensemble afin de pouvoir gérer à la fois les requêtes HTTP et WebSocket. Nous avons utilisé 8080 comme numéro de port pour le serveur WebSocket, vous pouvez le modifier si nécessaire.

Étape 3 : Écrire le client WebSocket

Sur le client, nous utilisons JavaScript pour implémenter la connexion WebSocket. En JavaScript, nous devons créer un objet WebSocket et nous connecter au serveur. Lorsque l'état de l'objet WebSocket change, le gestionnaire d'événements WebSocket sera appelé pour le traitement.

Ici, nous utiliserons jQuery pour manipuler facilement les éléments DOM et gérer les événements. Nous créons d'abord une simple zone de saisie de texte et un bouton en HTML pour envoyer un message au serveur :

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>Real-time Game Data Synchronization</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="client.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<input type="text" id="message">
<button id="send">Send</button>
<div id="messages"></div>

< ;/ body>

73a6ac4ed44ffec12cee46588e518a5e

Ensuite, nous créons un fichier JavaScript appelé client.js qui sera le point d'entrée de notre client WebSocket. Nous créons la connexion WebSocket dans ce fichier, en utilisant le code suivant :

$(document).ready(function() {

var conn = new WebSocket('ws://localhost:8080');

conn.onopen = function(evt) {
    console.log('Connected to server');
};

conn.onmessage = function(evt) {
    console.log('Received message: ' + evt.data);
    $('#messages').append($('<p>').text(evt.data));
};

conn.onclose = function(evt) {
    console.log('Connection closed');
};

$('#send').click(function() {
    var message = $('#message').val();
    conn.send(message);
    $('#message').val('');
});

});

Nous créons d'abord la connexion WebSocket lorsque le chargement de la page est terminé, et lorsque la connexion est ouverte Appelez la méthode onopen. Dans la méthode onmessage, nous affichons le message reçu sur la console et la boîte de message sur la page. Lorsque la connexion sera fermée, nous appellerons la méthode onclose.

En cliquant sur le bouton, nous recevons le message de la zone de saisie de texte et l'envoyons au serveur WebSocket.

Étape 4 : Tester la connexion WebSocket

Enfin, nous pouvons utiliser le navigateur pour tester la connexion WebSocket localement. Pour exécuter notre serveur WebSocket en ligne de commande, exécutez la commande suivante :

php server.php

Ensuite, ouvrez un navigateur et saisissez l'URL suivante :

http://localhost:8000/

Nous pouvons taper sur le message de la page et cliquez sur le bouton "Envoyer", qui reçoit ensuite le message sur le serveur et le renvoie au client. Vous devriez voir une boîte de message sur la page et un message correspondant dans la sortie de la console.

À ce stade, nous avons implémenté avec succès la synchronisation des données de jeu en temps réel à l'aide de PHP et WebSocket. La synchronisation des données en temps réel n'est pas seulement disponible dans les jeux, mais également dans diverses applications, telles que le chat en direct et l'édition collaborative. J'espère que cet article pourra vous aider à comprendre le fonctionnement de WebSocket et vous guider dans la mise en œuvre de WebSocket.

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!