Utilisez php pour développer Websocket afin d'implémenter la fonction de positionnement de carte en temps réel-tutoriel php-php.cn

Utilisez php pour développer Websocket afin d'implémenter la fonction de positionnement de carte en temps réel

WBOY

Libérer： 2023-12-17 20:10:01

original

1287 Les gens l'ont consulté

Utilisez php pour développer Websocket afin dimplémenter la fonction de positionnement de carte en temps réel

Utiliser PHP pour développer Websocket afin d'implémenter une fonction de positionnement cartographique en temps réel

Introduction :
Websocket est un protocole qui implémente des connexions persistantes et une communication bidirectionnelle en temps réel, permettant la transmission et les mises à jour de données en temps réel. Cet article utilisera PHP pour développer Websocket, combiné à la fonction de positionnement de carte, afin d'obtenir une fonction de positionnement de carte en temps réel. Le processus spécifique de mise en œuvre du code sera présenté en détail ci-dessous.

1. Préparation

Installer l'environnement PHP (version requise : PHP 5.3.0+)
Installer Composer (outil de gestion de bibliothèque tiers PHP)

2. Installer les bibliothèques associées

Ouvrez la ligne de commande. , Entrez le répertoire où se trouve le projet et exécutez la commande suivante pour installer la bibliothèque Ratchet :
```
composer require cboden/ratchet
```
Copier après la connexion
Une fois l'installation terminée, copiez le répertoire du fournisseur généré dans le répertoire racine du projet.

Trois. Implémentez le serveur WebSocket

Créez un fichier server.php et ajoutez le code suivant :

<?php
require 'vendor/autoload.php';

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;

class MapLocation implements MessageComponentInterface 
{
 protected $clients;

 public function __construct() {
     $this->clients = new SplObjectStorage;
 }

 public function onOpen(ConnectionInterface $conn) {
     $this->clients->attach($conn);
     echo "New connection! ({$conn->resourceId})
";
 }

 public function onClose(ConnectionInterface $conn) {
     $this->clients->detach($conn);
     echo "Connection closed! ({$conn->resourceId})
";
 }

 public function onMessage(ConnectionInterface $from, $msg) {
     foreach ($this->clients as $client) {
         $client->send($msg);
     }
 }

 public function onError(ConnectionInterface $conn, Exception $e)
 {
     echo "An error occurred: {$e->getMessage()}
";
     $conn->close();
 }
}

$server = IoServer::factory(
 new HttpServer(
     new WsServer(
         new MapLocation()
     )
 ),
 8080
);

$server->run();

Copier après la connexion

Quatre Implémentez la page frontale

Créez un fichier index.html et ajoutez-le. le code suivant :

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>实时地图定位</title>
 <style>
     #map {
         width: 800px;
         height: 600px;
         border: 1px solid #ccc;
     }
 </style>
 <script src="https://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js"></script>
 <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css" />
</head>
<body>
 <div id="map"></div>

 <script>
     var map = L.map('map').setView([39.9075, 116.39723], 13);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 18,
         attribution: 'Map data &copy; OpenStreetMap contributors'
     }).addTo(map);

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

     ws.onmessage = function (event) {
         var data = JSON.parse(event.data);
         var marker;

         if (data.action === 'add') {
             marker = L.marker([data.lat, data.lng]).addTo(map);
         } else if (data.action === 'update') {
             marker = markers[data.id];
             if (marker) {
                 marker.setLatLng([data.lat, data.lng]);
             }
         } else if (data.action === 'remove') {
             marker = markers[data.id];
             if (marker) {
                 map.removeLayer(marker);
             }
         }

         if (marker) {
             markers[data.id] = marker;
         }
     };

     var markers = {};
 </script>
</body>
</html>

Copier après la connexion

5. Testez et exécutez

Ouvrez le terminal, entrez le répertoire où se trouve le projet, et exécutez la commande suivante :
```
php server.php
```
Copier après la connexion
Ouvrez le fichier index.html dans le navigateur , et vous verrez une interface cartographique.
Vous pouvez simuler différentes mises à jour de données en modifiant les données d'envoi dans la méthode onMessage dans server.php.

Résumé :
Cet article explique comment utiliser PHP pour développer Websocket et le combiner avec la fonction de positionnement de carte pour obtenir une fonction de positionnement de carte en temps réel. En écrivant du code pour les pages côté serveur et frontales, nous pouvons mettre à jour les informations de localisation des marqueurs sur la carte en temps réel via Websocket. Dans les projets réels, davantage de fonctions et d'interactions de données peuvent être ajoutées en fonction des besoins.

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!