PHP를 사용하여 Websocket을 개발하여 실시간 지도 위치 지정 기능 구현-PHP 튜토리얼-php.cn

PHP를 사용하여 Websocket을 개발하여 실시간 지도 위치 지정 기능 구현

WBOY

풀어 주다： 2023-12-17 20:10:01

원래의

1284명이 탐색했습니다.

PHP를 사용하여 Websocket을 개발하여 실시간 지도 위치 지정 기능 구현

제목: PHP를 사용하여 Websocket을 개발하여 실시간 지도 위치 지정 기능 구현

소개:
Websocket은 지속적인 연결과 실시간 양방향 통신을 구현하여 실시간 데이터 전송 및 업데이트를 가능하게 하는 프로토콜입니다. 이 기사에서는 PHP를 사용하여 지도 위치 지정 기능과 결합된 Websocket을 개발하여 실시간 지도 위치 지정 기능을 구현합니다. 구체적인 코드 구현 과정은 아래에서 자세히 소개하겠습니다.

1. 준비

PHP 환경 설치(버전 요구 사항: PHP 5.3.0+)
Composer 설치(PHP 타사 라이브러리 관리 도구)

2.명령줄 열기 , 프로젝트가 있는 디렉터리를 입력하고 다음 명령어를 실행하여 Ratchet 라이브러리를 설치합니다.

composer require cboden/ratchet

로그인 후 복사

설치가 완료되면 생성된 Vendor 디렉터리를 프로젝트 루트 디렉터리에 복사합니다.

server.php 파일을 생성하고 다음 코드를 추가합니다.

<?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();

로그인 후 복사

Four.index.html 파일을 생성하고 추가합니다. 다음 코드:

<!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>

로그인 후 복사

5. 테스트 및 실행

터미널을 열고 프로젝트가 있는 디렉터리를 입력한 후 다음 명령을 실행합니다.
```
php server.php
```
로그인 후 복사
브라우저에서 index.html 파일을 엽니다. , 지도 인터페이스가 표시됩니다.
server.php의 onMessage 메소드에서 전송 데이터를 수정하여 다양한 데이터 업데이트를 시뮬레이션할 수 있습니다.
1. 요약:
  이 기사에서는 PHP를 사용하여 Websocket을 개발하고 이를 지도 위치 지정 기능과 결합하여 실시간 지도 위치 지정 기능을 구현하는 방법을 소개합니다. 서버 측 및 프런트 엔드 페이지에 대한 코드를 작성하면 Websocket을 통해 지도의 마커 위치 정보를 실시간으로 업데이트할 수 있습니다. 실제 프로젝트에서는 필요에 따라 더 많은 기능과 데이터 상호 작용을 추가할 수 있습니다.
위 내용은 PHP를 사용하여 Websocket을 개발하여 실시간 지도 위치 지정 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!