ウェブアプリケーションでは、リアルタイムにコンテンツを更新することが求められる場面があります。
従来、このようなポーリングによる更新にはJavaScriptによる複雑な処理が必要でした。
しかし、htmxを使えばシンプルなHTMLの属性だけで実現できます。
この記事では、htmxを使ったポーリングによるリアルタイムコンテンツ更新の方法を詳しく解説します。
本記事の内容
- ポーリングのHTML構造
- サーバーサイドでの動的コンテンツ生成
- ポーリング間隔の設定
- サンプルコード
- まとめ
それでは、上記に沿って解説していきます。
ポーリングのHTML構造
htmxについてよくわからない場合は、次の記事からご覧ください。
まず、ポーリングを行うHTML要素を定義します。
<div hx-get="update_content.php"
hx-trigger="every 1s"
hx-target="this">
コンテンツがここに更新されます。
</div>
この要素には、hx-get、hx-trigger、hx-targetの属性を設定します。
hx-getで指定したPHPファイルからコンテンツを取得し、hx-targetで指定した要素自身に挿入します。
hx-triggerを”every 1s”にすることで、1秒ごとにポーリングが行われます。
サーバーサイドでの動的コンテンツ生成
次に、PHPを使ってコンテンツを動的に生成します。
update_content.phpというPHPファイルを作成し、以下のようなコードを記述します。
<?php
date_default_timezone_set('Asia/Tokyo');
$content = "<p>Updated content: " . date("Y-m-d H:i:s") . "</p>";
echo $content;
?>
このPHPファイルでは、現在の日時を取得し、それを含むHTMLを生成しています。
htmxは、hx-triggerで指定された間隔でこのPHPファイルを呼び出し、生成されたコンテンツを取得します。
取得したコンテンツは、hx-targetで指定された要素に挿入されます。
ポーリング間隔の設定
ポーリングの間隔は、hx-triggerの値を変更することで調整できます。
例えば、以下のように設定すると、2秒ごとにポーリングが行われます。
<div hx-get="update_content.php"
hx-trigger="every 2s"
hx-target="this">
コンテンツがここに更新されます。
</div>
間隔は、アプリケーションの要件に応じて適切に設定してください。
頻度が高すぎるとサーバーに負荷がかかり、低すぎるとリアルタイム性が損なわれます。
サンプルコード
以上の内容を組み合わせた完全なサンプルコードは以下の通りです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リアルタイムコンテンツ更新</title>
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<div hx-get="update_content.php"
hx-trigger="every 1s"
hx-target="this">
コンテンツがここに更新されます。
</div>
</body>
</html>
update_content.php
<?php
date_default_timezone_set('Asia/Tokyo');
$content = "<p>Updated content: " . date("Y-m-d H:i:s") . "</p>";
echo $content;
?>
このコードを実行すると、1秒ごとにコンテンツが自動的に更新されます。
更新されたコンテンツには、現在の日時が表示されます。
まとめ
この記事では、htmxを使ってポーリングによるリアルタイムコンテンツ更新を実装する方法を解説しました。
htmxのhx-triggerとhx-getを組み合わせることで、JavaScriptを書かずにポーリングを実現できます。
htmxとサーバーサイドの処理を連携させることで、シンプルかつ高速なリアルタイムコンテンツ更新が実現できます。
この記事で紹介したテクニックを活用し、ユーザーにとって魅力的なリアルタイムウェブアプリケーションを作成しましょう。
