cari

Rumah >pembangunan bahagian belakang >tutorial php >Gunakan php untuk membangunkan Websocket untuk melaksanakan fungsi penentududukan peta masa nyata

Gunakan php untuk membangunkan Websocket untuk melaksanakan fungsi penentududukan peta masa nyata

WBOY
WBOYasal
2023-12-17 20:09:441287semak imbas

Gunakan php untuk membangunkan Websocket untuk melaksanakan fungsi penentududukan peta masa nyata

Tajuk: Menggunakan PHP untuk membangunkan Websocket bagi melaksanakan fungsi penentududukan peta masa nyata

Pengenalan:
Websocket ialah protokol yang melaksanakan sambungan berterusan dan komunikasi dua hala masa nyata, membolehkan penghantaran dan kemas kini data masa nyata. Artikel ini akan menggunakan PHP untuk membangunkan Websocket, digabungkan dengan fungsi penentududukan peta, untuk mencapai fungsi penentududukan peta masa nyata. Proses pelaksanaan kod khusus akan diperkenalkan secara terperinci di bawah.

1. Persediaan

  1. Pasang persekitaran PHP (keperluan versi: PHP 5.3.0+)
  2. Pasang Komposer (alat pengurusan perpustakaan pihak ketiga)

2 , Masukkan direktori di mana projek itu terletak dan laksanakan arahan berikut untuk memasang perpustakaan Ratchet: 
    composer require cboden/ratchet

  1. Selepas pemasangan selesai, salin direktori vendor yang dijana ke direktori akar projek. . kod berikut: 

    <?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();
  2. 5. Uji dan jalankan

    Buka terminal, masukkan direktori di mana projek itu terletak, dan laksanakan arahan berikut: 
  1. <!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>

    Buka fail index.html dalam penyemak imbas , dan anda akan melihat antara muka peta.
Anda boleh mensimulasikan kemas kini data yang berbeza dengan mengubah suai data penghantaran dalam kaedah onMessage dalam server.php.

    Ringkasan:
  1. Artikel ini memperkenalkan cara menggunakan PHP untuk membangunkan Websocket dan menggabungkannya dengan fungsi penentududukan peta untuk mencapai fungsi penentududukan peta masa nyata. Dengan menulis kod untuk halaman sebelah pelayan dan muka hadapan, kami boleh mengemas kini maklumat lokasi penanda pada peta dalam masa nyata melalui Websocket. Dalam projek sebenar, lebih banyak fungsi dan interaksi data boleh ditambah mengikut keperluan.

Atas ialah kandungan terperinci Gunakan php untuk membangunkan Websocket untuk melaksanakan fungsi penentududukan peta masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php composer html websocket
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk membangunkan aplikasi pemantauan masa nyata menggunakan PHP dan WebSocketArtikel seterusnya：Bagaimana untuk membangunkan aplikasi pemantauan masa nyata menggunakan PHP dan WebSocket

Artikel berkaitan

Lihat lagi