Implémentez le mur Weibo et les mises à jour en temps réel à l'aide de PHP et XML-tutoriel php-php.cn

Implémentez le mur Weibo et les mises à jour en temps réel à l'aide de PHP et XML

WBOY

Libérer： 2023-08-09 08:08:02

original

1275 Les gens l'ont consulté

Implémentez le mur Weibo et les mises à jour en temps réel à laide de PHP et XML

Utilisez PHP et XML pour mettre en œuvre le mur Weibo et les mises à jour en temps réel

Avec la popularité des médias sociaux, Weibo est devenu une plateforme importante permettant aux gens de partager leur vie quotidienne et de communiquer. L'ajout d'un mur Weibo à une page Web permet aux utilisateurs de visualiser les messages Weibo en temps réel et de les mettre à jour en temps réel. Cet article explique comment utiliser PHP et XML pour implémenter un mur Weibo simple et se mettre à jour automatiquement lorsqu'un nouveau Weibo est publié.

Tout d'abord, nous devons créer une page HTML pour afficher le mur Weibo et recevoir les messages Weibo saisis par les utilisateurs. En supposant que nous ayons déjà un fichier appelé index.html, voici sa structure de base :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>微博墙</h2>
<div id="weiboWall"></div>
<form id="weiboForm">
  <input type="text" id="message" placeholder="输入你的消息">
  <input type="submit" value="发布">
</form>
</body>
</html>

Copier après la connexion

Dans le fichier HTML, nous avons introduit la bibliothèque jQuery et un fichier JavaScript appelé "script.js". Ensuite, nous écrirons le code pour interagir avec le backend dans le fichier script.js.

$(document).ready(function() {
  // 当页面加载完毕后，执行以下操作
  loadData();   // 加载已有的微博消息
  setInterval(loadData, 5000);   // 每隔5秒自动更新微博消息

  $("#weiboForm").submit(function(event) {
    event.preventDefault();   // 阻止表单的默认提交动作

    // 获取用户输入的消息
    var message = $("#message").val();

    // 发送消息到后端
    $.post("post.php", {message: message}, function(response) {
      // 发布成功后刷新微博墙
      loadData();
      $("#message").val("");   // 清空输入框
    });
  });

  function loadData() {
    $.get("get.php", function(response) {
      // 清空微博墙
      $("#weiboWall").empty();
      // 将返回的XML数据解析为JavaScript对象
      var xml = $.parseXML(response);
      // 遍历解析后的数据，并将消息显示在微博墙上
      $(xml).find("message").each(function() {
        var message = $(this).find("content").text();
        var time = $(this).find("time").text();
        $("#weiboWall").append("<p>" + message + " - " + time + "</p>");
      });
    });
  }
});

Copier après la connexion

Dans le fichier script.js, nous utilisons d'abord la méthode $(document).ready() de jQuery pour nous assurer que la page Web est chargée avant d'effectuer l'opération suivante. Nous chargeons les messages Weibo existants via la fonction loadData() et utilisons la fonction setInterval() pour mettre à jour automatiquement les messages Weibo toutes les 5 secondes.

Lorsque l'utilisateur saisit un message dans le formulaire et clique sur le bouton "Publier", la soumission du formulaire déclenchera la fonction $("#weiboForm").submit(). Cette fonction empêche l'action de soumission par défaut du formulaire et utilise la méthode $.post() pour envoyer un message au fichier post.php du backend. Dans le fichier post.php, nous enregistrons le message reçu dans un fichier XML.

La fonction loadData() est utilisée pour charger les messages Weibo et les afficher sur le mur Weibo. Nous utilisons la méthode $.get() pour obtenir les données XML du message Weibo enregistré à partir du fichier get.php sur le backend. Ensuite, nous utilisons la méthode $.parseXML() pour analyser les données XML renvoyées dans un objet JavaScript, et utilisons les méthodes $(xml).find() et $(this).find() pour obtenir et afficher le contenu de chaque message et heure Weibo.

Enfin, nous devons créer deux fichiers PHP pour gérer les requêtes envoyées par le front-end et fournir les réponses correspondantes.

Dans le fichier post.php, nous utilisons la bibliothèque SimpleXML pour enregistrer les messages Weibo envoyés par l'utilisateur dans un fichier XML :

<?php
if(isset($_POST['message'])){
  $message = $_POST['message'];
  $time = date("Y-m-d H:i:s");

  $xml = new SimpleXMLElement('<messages></messages>');
  $messageElement = $xml->addChild('message');
  $messageElement->addChild('content', $message);
  $messageElement->addChild('time', $time);
  $xml->asXML('messages.xml');
}
?>

Copier après la connexion

Dans le fichier get.php, nous lisons le contenu du fichier XML et le renvoyons à le front-end :

<?php
if(file_exists('messages.xml')){
  $xml = simplexml_load_file('messages.xml');
  header('Content-Type: text/xml');
  echo $xml->asXML();
}
?>

Copier après la connexion

Jusqu'à présent, nous avons terminé le travail de mise en œuvre du mur Weibo et des mises à jour en temps réel en utilisant PHP et XML. En ajoutant un mur Weibo et un formulaire pour recevoir les entrées de l'utilisateur dans un fichier HTML, et en utilisant PHP pour gérer la logique back-end et enregistrer les messages Weibo via un fichier XML, nous pouvons implémenter un simple mur Weibo et l'afficher en temps réel lorsque un nouveau Weibo est publié renouvelé. Bien entendu, il ne s’agit que d’une version de base et vous pouvez l’étendre et l’optimiser en fonction de vos 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!