PHP と XML を使用して Weibo ウォールとリアルタイム更新を実装する-PHPチュートリアル-php.cn

PHP と XML を使用して Weibo ウォールとリアルタイム更新を実装する

WBOY

リリース： 2023-08-09 08:08:02

オリジナル

1281 人が閲覧しました

PHP と XML を使用して Weibo ウォールとリアルタイム更新を実装する

ソーシャルメディアの人気に伴い、Weibo は人々が日常の情報を共有するための重要なプラットフォームになりました。生活とコミュニケーション。 Weibo ウォールを Web ページに追加すると、ユーザーは Weibo メッセージをリアルタイムで表示し、リアルタイムで更新できるようになります。この記事では、PHP と XML を使用して簡単な Weibo ウォールを実装し、新しい Weibo が公開されたときに自動的に更新する方法を紹介します。

まず、Weibo ウォールを表示し、ユーザーが入力した Weibo メッセージを受信するための HTML ページを作成する必要があります。すでに、index.html というファイルがあるとします。その基本構造は次のとおりです。

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

ログイン後にコピー

HTML ファイルには、jQuery ライブラリと「script.js」という JavaScript ファイルが導入されています。次に、バックエンドと対話するコードを 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>");
      });
    });
  }
});

ログイン後にコピー

script.js ファイルでは、まず jQuery の $(document).ready() メソッドを使用して、次の操作を実行する前に Web ページがロードされていることを確認します。 loadData() 関数を通じて既存の Weibo メッセージをロードし、setInterval() 関数を使用して Weibo メッセージを 5 秒ごとに自動的に更新します。

ユーザーがフォームにメッセージを入力して「公開」ボタンをクリックすると、フォームを送信すると $("#weiboForm").submit() 関数がトリガーされます。この関数は、フォームのデフォルトの送信アクションを防止し、$.post() メソッドを使用してバックエンドの post.php ファイルにメッセージを送信します。 post.php ファイルでは、受信したメッセージを XML ファイルに保存します。

loadData() 関数は、Weibo メッセージをロードし、Weibo ウォールに表示するために使用されます。 $.get() メソッドを使用して、保存された Weibo メッセージの XML データをバックエンドの get.php ファイルから取得します。次に、$.parseXML() メソッドを使用して、返された XML データを解析して JavaScript オブジェクトにし、$(xml).find() メソッドと $(this).find() メソッドを使用してそのコンテンツを取得して表示します。各Weiboメッセージと時間。

最後に、フロントエンドから送信されたリクエストを処理し、対応する応答を提供するために 2 つの PHP ファイルを作成する必要があります。

post.php ファイルでは、SimpleXML ライブラリを使用して、ユーザーから送信された Weibo メッセージを 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');
}
?>

ログイン後にコピー

get.php ファイルでは、XML を読み取ります。 file Content を作成してフロントエンドに返します:

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

ログイン後にコピー

この時点で、PHP と XML を使用した Weibo ウォールとリアルタイム更新の実装作業が完了しました。 Weibo ウォールとユーザー入力を受け取るフォームを HTML ファイルに追加し、PHP を使用してバックエンドロジックを処理し、XML ファイルを通じて Weibo メッセージを保存することで、シンプルな Weibo ウォールを実装し、リアルタイムで表示できます。新しいWeiboがリニューアル公開されます。もちろん、これは単なる基本バージョンであり、ニーズに応じて拡張および最適化できます。

以上がPHP と XML を使用して Weibo ウォールとリアルタイム更新を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。