Utilisez PHP pour réaliser le partage de position et l'affichage de la fonction de chat en temps réel
Avec le développement rapide d'Internet, la messagerie instantanée est devenue un outil indispensable dans la vie quotidienne des gens. Avec la popularité des appareils mobiles et les progrès de la technologie de positionnement, le partage de position est également devenu une fonctionnalité populaire. Cet article expliquera comment utiliser le langage PHP pour implémenter une fonction de chat en temps réel et partager et afficher la localisation géographique.
1. Implémentation de la fonction de chat en temps réel
Afin de mettre en œuvre la fonction de chat en temps réel, nous pouvons utiliser la technologie WebSocket. WebSocket est un protocole de communication qui fournit une communication bidirectionnelle en duplex intégral sur une seule connexion. Il peut établir une connexion pour une communication en temps réel entre le navigateur et le serveur.
Tout d'abord, nous devons créer un serveur WebSocket. En PHP, vous pouvez utiliser la bibliothèque Ratchet pour créer un serveur WebSocket. Vous pouvez utiliser Composer pour installer la bibliothèque Ratchet :
composer require cboden/ratchet
Copier après la connexion
Ensuite, vous pouvez créer un fichier chat-server.php et y écrire le code suivant :
<?php
require 'vendor/autoload.php';
use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;
class Chat implements MessageComponentInterface {
protected $connections;
public function __construct() {
$this->connections = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->connections->attach($conn);
echo "New connection! ({$conn->resourceId})
";
}
public function onMessage(ConnectionInterface $from, $msg) {
foreach ($this->connections as $connection) {
if ($from !== $connection) {
$connection->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn) {
$this->connections->detach($conn);
echo "Connection {$conn->resourceId} has disconnected
";
}
public function onError(ConnectionInterface $conn, Exception $e) {
echo "An error has occurred: {$e->getMessage()}
";
$conn->close();
}
}
$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
8080
);
$server->run();Copier après la connexion
Dans le code ci-dessus, nous utilisons la bibliothèque Ratchet pour créer une classe nommé Chat, et implémente l'interface MessageComponentInterface. Dans la méthode onOpen(), nous enregistrons les informations de chaque connexion ; dans la méthode onMessage(), nous envoyons le message reçu aux autres connexions ; dans la méthode onClose(), nous supprimons les informations de connexion déconnectée dans onError() ; méthode, nous gérons la situation d’erreur.
Ensuite, nous pouvons exécuter le fichier chat-server.php dans le terminal pour démarrer le serveur WebSocket :
php chat-server.php
Copier après la connexion
Ensuite, nous pouvons écrire une page client en utilisant JavaScript pour nous connecter au serveur WebSocket et envoyer des messages. Créez un fichier chat-client.html et écrivez-y le code suivant :
<!DOCTYPE html>
<html>
<head>
<title>Chat Client</title>
<script>
var conn = new WebSocket('ws://localhost:8080');
conn.onopen = function(e) {
console.log("Connection established!");
};
conn.onmessage = function(e) {
console.log("Received: " + e.data);
};
function sendMessage() {
var message = document.getElementById('message').value;
conn.send(message);
}
</script>
</head>
<body>
<input type="text" id="message" placeholder="Enter message">
<button onclick="sendMessage()">Send</button>
</body>
</html>Copier après la connexion
Dans le code ci-dessus, nous créons un objet WebSocket, puis utilisons les événements onopen et onmessage pour gérer l'établissement de la connexion et la réception des messages. Nous avons également créé une fonction sendMessage() pour envoyer des messages.
Ouvrez le fichier chat-client.html, nous pouvons nous connecter au serveur WebSocket dans le navigateur et envoyer des messages.
2. Mise en œuvre du partage et de l'affichage de la localisation géographique
Pour réaliser le partage et l'affichage de la localisation géographique, nous pouvons utiliser l'API de géolocalisation HTML5 pour obtenir les informations de localisation géographique de l'appareil. Tout d'abord, ajoutez le code suivant au fichier chat-client.html :
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var location = "Latitude: " + latitude + ", Longitude: " + longitude;
conn.send(location);
});Copier après la connexion
Dans le code ci-dessus, nous obtenons les informations de localisation géographique de l'appareil en appelant la méthode getCurrentPosition() et l'envoyons au serveur.
Dans la classe Chat côté serveur, nous pouvons modifier la méthode onMessage() pour recevoir et diffuser des informations de géolocalisation :
public function onMessage(ConnectionInterface $from, $msg) {
$data = json_decode($msg, true);
if (isset($data['latitude']) && isset($data['longitude'])) {
foreach ($this->connections as $connection) {
if ($from !== $connection) {
$connection->send($msg);
}
}
} else {
foreach ($this->connections as $connection) {
if ($from !== $connection) {
$connection->send($msg);
}
}
}
}Copier après la connexion
Dans le code ci-dessus, nous utilisons la fonction json_decode() pour convertir le message reçu en un tableau associatif. Si le message reçu contient les champs de latitude et de longitude, indiquant qu'il s'agit d'informations de localisation géographique, il sera diffusé vers d'autres connexions ; sinon, le message sera diffusé vers d'autres connexions ;
Dans le fichier chat-client.html, nous pouvons modifier la fonction de gestionnaire de l'événement onmessage pour analyser les informations de localisation géographique reçues et les afficher sur la page :
conn.onmessage = function(e) {
var data = JSON.parse(e.data);
if (data.latitude && data.longitude) {
var latitude = data.latitude;
var longitude = data.longitude;
// 在地图上展示地理位置
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: latitude, lng: longitude},
zoom: 12
});
var marker = new google.maps.Marker({
position: {lat: latitude, lng: longitude},
map: map
});
} else {
console.log("Received: " + e.data);
}
};Copier après la connexion
Dans le code ci-dessus, nous utilisons le JSON.parse( ) pour que les messages reçus soient analysés en objets JavaScript. Si le message contient des champs de latitude et de longitude, nous créons une carte Google Maps et affichons la situation géographique sur la carte.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
