コンテンツにスキップ

146. WebSockets（WebSockets：超高速・双方向の「会話」を実現する）

原理：つなぎっぱなしの「直通電話」

どちらからでも、いつでも話せる

通常のHTTP（HTMXの基本）は「ブラウザが話し始め、サーバーが答える」という主従関係でした。SSE（145.）は「サーバーが話し続ける」一方的な放送でした。 「WebSockets（ウェブソケット）」は、ブラウザとサーバーが対等に、いつでも好きなタイミングでメッセージを送り合える「双方向の直通電話」です。

HTMXでこれを使うと、チャットや多人数参加型のゲーム、共同編集ツールなど、究極のリアルタイム性が求められる機能を、HTMLの書き換えだけで実現できます。

実践：双方向リアルタイム通信の実装

1. WebSockets 拡張機能の導入

HTMXでWebSocketsを扱うには、公式の ws 拡張機能が必要です。

<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>

2. 接続と送受信の設定

hx-ext="ws" を使い、接続先のURL（ws://...）を指定します。

<div hx-ext="ws" ws-connect="/chat">
    <!-- サーバーから届いたメッセージをここに貼り付ける -->
    <div id="chat-room" ws-afterbegin="messages">
        <!-- サーバー側で <div id="messages">...</div> を送るとここに入ります -->
    </div>

    <!-- ここから送るメッセージは自動的にWebSocketで飛ばされる -->
    <form ws-send>
        <input name="chat_message">
        <button>送信</button>
    </form>
</div>

3. ステップ・バイ・ステップ解説

  1. 「双方向」が必要か確認: 単なる通知ならSSE（145.）で十分です。チャットのように自分からも頻繁に送る場合にWebSocketsを選びます。
  2. サーバー側の準備: WebSocket プロトコルに対応したサーバー（Node.js, Go, PythonのFastAPIなど）を用意します。
  3. HTMLの送受信: サーバーからは JSON ではなく、HTMXがそのまま貼れる「HTMLタグ」を送り出すのが HTMX 流です。

比較：SSE vs WebSockets

SSE (145.)

  • 方向: サーバーからブラウザへの一方通行。
  • 特徴: 設定が簡単。普通のHTTPの上で動く。

WebSockets

  • 方向: 双方向（どちらからも送れる）。
  • 特徴: 非常に高速だが、サーバー側の設定（専用ポートなど）が少し複雑になる。
  • 用途: チャット、対戦ゲーム、リアルタイム共同編集。

まとめ：初心者のための「Webの限界突破」

WebSockets を使いこなせるようになると、あなたのアプリは「Webサイト」という枠を超えて、本物の「リアルタイム通信ツール」へと進化します。

  • HTMLを送り合う楽しさ: WebSocket でも JSON ではなく HTML を送る。この一貫性が、HTMX 開発の心地よさを生みます。
  • 接続の管理: つなぎっぱなしにするため、サーバーのメモリ管理には少し気を配る必要がありますが、その分得られるスピード感は圧倒的です。
  • モダンなWebの象徴: ページを一切リロードせず、誰かの操作が自分の画面に即座に反映される。その魔法を、あなたの手で実現してください。

壁をなくし、瞬時に繋ぐ。WebSockets という「双方向の翼」を手に入れて、情報の速度がそのままユーザーの熱狂に変わる、エキサイティングな次世代Webアプリを構築してください。次の記事では、これら全ての機能を最高速度で動かす「パフォーマンス最適化（147. Performance Optimization）」をご紹介します。