リアルタイム

リアルタイムAPIは、接続を開いたままにして、双方向にメッセージを送ります。このチュートリアルでは、デモショップの注文フィードをWebSocketとServer-Sent Eventsで見て、続いてショップのサポートデスクとSocket.IOで会話し、倉庫の温度をMQTTで読み取ります。それらを並べて動かします。

• 所要時間：20分。
• 必要なもの：Alpenglowワークスペースで環境なしを選んだ状態。Socket.IOとMQTTには、ローカルのサーバが必要です。examples/serversでbun run realtimeを実行します。
• 学べること：接続、保存したメッセージ、ライブログ、イベントストリーム、名前空間と確認応答、サブスクリプション、QoSとリテインメッセージ。

1. WebSocket：注文フィードCopy Anchor Link

1. Realtime › Order updatesを開きます。URLは{{wsURL}}/ordersで、wss://demo.echolot.dev/v1/ordersです。
2. 接続を選びます（⌘R）。ボタンが接続解除に変わります。
3. レスポンスのメッセージタブに表示が増えていきます。開いている接続を示すリンクのアイコン、サーバのhello、そして1.5秒ごとの注文イベント（{"event": "order.created", "order": "ord_9Tq3Vb", …}など）です。 送信したメッセージには上向きの矢印、受信したものには緑の下向きの矢印が付きます。その他を選ぶと、長いJSONメッセージが展開されます。
4. リクエストのメッセージタブにある、保存済みメッセージSubscribeには、{"op":"subscribe","channel":"orders"}が入っています。その送信を選びます。サーバは{"op": "subscribed", "channel": "orders"}と応答します。
5. 下部の入力欄に{"id": 42, "text": "hello"}と入力して、送信を選びます（⇧⌘↩）。サーバは{"op": "ack", "id": 42}で確認応答します。+を選ぶと、そのメッセージを後のために保存できます。
6. ログはすべて、送信、受信で絞り込めます。メッセージをフィルタにshippedと入力しても絞り込めます。
7. 接続解除を選びます。ログの末尾にはEcholotによって閉じられましたと表示されます。

デモは3分でセッションを閉じます（1000 Demo sessions last 3 minutes）。また、10秒間に20件を超えるメッセージを送ると、1008で閉じます。実行時に送信をオンにした保存済みメッセージは、ランナーやコマンドラインツールでリクエストを実行すると、接続後に順番に送信されます。 詳しくはWebSocketとSSEを参照してください。

2. Server-Sent Events：同じフィードをストリームでCopy Anchor Link

1. Realtime › Order eventsを開きます。通常のHTTPリクエスト、GET {{baseURL}}/orders/eventsで、ヘッダーAccept: text/event-streamが付いています。
2. 送信を選びます。レスポンスはイベントタブで開き、受信待機中…「停止」で終了します。と表示されます。
3. 1秒おきにイベントが届きます。それぞれが、番号と名前のタイトルが付いた専用のカードに表示され（1. order.createdなど）、その下にid 1が表示されます。20件のイベントの後、サーバはendを送ってストリームを閉じます。
4. 途中で止めるには、キャンセルを選びます（⌘.）。

イベントの途中から再開するには、最後に見たidをLast-Event-IDヘッダーに追加して（たとえば15）、もう一度送信します。サーバは16から20を送ります。 ヘッダータブでLast-Event-IDと入力すると、その値の候補として{{lastEventId}}が表示されます。その変数に値を設定するか、番号を直接入力してください。

3. Socket.IO：サポートデスクCopy Anchor Link

先にローカルのサーバを起動します（bun run realtime）。Alpenglow realtime: Socket.IO on http://localhost:3001/support, MQTT on mqtt://localhost:1883と出力されます。

1. Realtime › Support chatを開きます。URLは{{realtimeURL}}、つまりhttp://localhost:3001です。イベントタブの名前空間は/supportです。URLバーのメソッドメニューで、サーバのバージョン（Socket.IO 4）を設定します。
2. 接続を選びます。3つのイベントが届きます。担当者の名前と待ち順を含むwelcome、typing、そしてmessage：「Grüezi! How can I help with your order?」
3. 保存済みイベントSay helloは、messageを{"text":"Grüezi!"}で送出します。確認応答のチェックボックスをオンにしてサーバに確認応答を要求し、送出を選びます。
4. ログには確認応答{"id": "msg_31", "delivered": true}が表示され、少し後にHeidiの返事が届きます。「Your Matterhorn 2P ships tomorrow from Bern.」
5. 保存していないイベントを送出するには、入力欄のイベントフィールドにその名前を、引数をJSONで入力して、送出を選びます（⇧⌘↩）。

ログの各行には、名前空間、イベント、そして確認応答がある場合はその番号が表示されます。イベントをフィルタでログを絞り込めます。サーバが自分のイベントの確認応答を求めてきた場合は、その行に確認応答ボタンが表示されます。 {"token": "{{token}}"}のような認証ペイロードは、イベントタブの認証フィールドに入力します。Socket.IOを参照してください。

4. MQTT：倉庫のセンサーCopy Anchor Link

同じローカルのサーバが、localhost:1883でMQTTブローカーを動かし、3つの倉庫の温度を1.5秒ごとにパブリッシュします。

1. Realtime › Warehouse sensorsを開きます。URLはmqtt://{{mqttHost}}で、メソッドメニューのプロトコルはMQTT 3.1.1です。
2. サブスクライブタブには、QoS 1のサブスクリプションwarehouses/+/temperatureがあり、接続時にサブスクライブがオンになっています。+はトピックの1つの階層に一致します。
3. 接続を選びます。warehouses/zurich/temperature、warehouses/bern/temperature、warehouses/chur/temperatureのメッセージが届きます。{"celsius": 6.1, "humidity": 44, …}のような内容です。
4. すべてのトピックメニューで、1つの倉庫だけを表示できます。
5. サブスクライブの入力欄にwarehouses/statusと入力し、QoS 0のまま、サブスクライブを選びます。すぐに1件のメッセージ{"online": 3}が届き、リテインと表示されます。ブローカーが、後からサブスクライブする人のために保持していたメッセージです。
6. パブリッシュタブで、トピックをwarehouses/bern/door、ペイロードを{"open": true}にして、パブリッシュを選びます（⇧⌘↩）。warehouses/#をサブスクライブすると、それが戻ってくるのを確認できます。#は、その下のすべての階層に一致します。

接続タブには、クライアントID、クリーンセッションの設定、キープアライブ、ウィルが入っています。ブローカーのユーザ名とパスワードは、認証タブにBasic認証として入力します。パスワードはシークレット変数に保管してください。コマンドラインツールもMQTTを扱えます。

echolot mqtt subscribe mqtt://localhost 'warehouses/#' --count 5

MQTTとecholot mqttを参照してください。

5. 並べて動かすCopy Anchor Link

リクエストごとに専用のタブがあります。Order updates、Support chat、Warehouse sensorsを3つのタブで開いて、それぞれを接続してください。タブを切り替えている間も、すべての接続が開いたままです。 セッションが閉じると、Echolotはメッセージログ全体とともに履歴に保存するので、後から読み返せます（⌘Y）。

ローカルのサーバはgRPCも提供します。bun run grpcを実行して、Inventoryのリクエストを送信してください。Watch stockは12回分の在庫レベルをストリーミングして終了します。gRPCを参照してください。

次のステップCopy Anchor Link

• WebSocketとSSE：サブプロトコル、バイナリメッセージ、セッションのチェック。
• Socket.IOとMQTT：すべての設定。
• APIをテストしてCIで実行する：セッションもランナーで実行され、保存したメッセージを送信します。