` に挿入するユーティリティ関数を定義します。
+
+```js
+const output = document.querySelector("#output");
+const closeBtn = document.querySelector("#close");
+
+function writeToScreen(message) {
+ const pElem = document.createElement("p");
+ pElem.textContent = message;
+ output.appendChild(pElem);
+}
+```
+
+次に、`WebSocketStream` を検出する `if ... else` 構造を作成し、対応していないブラウザーに対して情報メッセージを出力します。
+
+```js
+if (!("WebSocketStream" in self)) {
+ writeToScreen("Your browser does not support WebSocketStream");
+} else {
+ // supporting code path
+}
+```
+
+補助的なコードパスでは、まず WebSocket サーバーの URL を含む変数を定義し、新しい `WebSocketServer` インスタンスを構築します。
+
+```js
+const wsURL = "ws://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+```
+
+> [!NOTE]
+> 実際のアプリケーションでは、安全な WebSocket (`wss://`) を使用するのが最善の方法です。しかし、このデモではローカルホストに接続しているため、例を動作させるには安全ではない WebSocket プロトコル (`ws://`) を使用する必要があります。
+
+私たちのコードの大部分は `start()` 関数内に含まれており、私たちはこの関数を定義し、すぐに呼び出します。{{domxref("WebSocketStream.opened", "opened")}} のプロミスを待ち、それが履行された後に、接続が成功したことを読み手に知らせるメッセージを書き込みます。そして、{{domxref("ReadableStreamDefaultReader")}} および {{domxref("WritableStreamDefaultWriter")}} のインスタンスを返された `readable` および `writable` から作成します。
+
+次に、`start()` として、サーバーに "ping" メッセージを送信し、"pong" メッセージを受信する関数を作成し、それを呼び出します。関数本体では、`wss.opened` プロミスを待ち、その履行値からリーダーとライターを作成します。ソケットが開いたら、そのことをユーザーに通知し、Close ボタンを有効にします。次に、ソケットに `"ping"` 値を `write()` し、そのことをユーザーに通知します。この時点で、サーバーは `"pong"` メッセージで応答します。応答の `read()` を待ち、ユーザーに通知します。その後、5 秒のタイムアウト後にサーバーに別の `"ping"` を送信します。この動作を繰り返すことで、 `"ping"`/`"pong"` のループが延々と続きます。
+
+```js
+async function start() {
+ const { readable, writable } = await wss.opened;
+ writeToScreen("CONNECTED");
+ closeBtn.disabled = false;
+ const reader = readable.getReader();
+ const writer = writable.getWriter();
+
+ writer.write("ping");
+ writeToScreen("SENT: ping");
+
+ while (true) {
+ const { value, done } = await reader.read();
+ writeToScreen(`RECEIVED: ${value}`);
+ if (done) {
+ break;
+ }
+
+ setTimeout(async () => {
+ try {
+ await writer.write("ping");
+ writeToScreen("SENT: ping");
+ } catch (e) {
+ writeToScreen(`Error writing to socket: ${e.message}`);
+ }
+ }, 5000);
+ }
+}
+
+start();
+```
+
+> **メモ:** {{domxref("setTimeout")}} 関数は、アプリケーションがストリームを閉じた後に書き込みを行おうとした場合に発生する可能性のあるエラーを処理するために、`write()` 呼び出しを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックで囲みます。
+
+WebSocket 接続が閉じられた場合、{{domxref("WebSocketStream.closed", "closed")}} プロミスが履行されることで通知されるように、コードと理由をユーザーに通知するプロミススタイルのコードセクションを追加しました。
+
+```js
+wss.closed.then((result) => {
+ writeToScreen(
+ `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+ );
+ console.log("Socket closed", result.closeCode, result.reason);
+});
+```
+
+最後に、コードとカスタムの理由を指定して、`close()` メソッドを使用して接続を閉じるイベントリスナーを Close ボタンに追加します。この関数は Close ボタンを無効にもします。接続がすでに閉じられた後は、ユーザーにボタンを押させたくないからです。
+
+```js
+closeBtn.addEventListener("click", () => {
+ wss.close({
+ code: 1000,
+ reason: "That's all folks",
+ });
+
+ closeBtn.disabled = true;
+});
+```
+
+### 完全なリスト
+
+```html
+
+
+
+
+
WebSocketStream Test
+
+
+
+
WebSocketStream Test
+
Sends a ping every five seconds
+
+
+
+
+
+```