1 files changed, 53 insertions, 0 deletions
diff --git a/testing/web-platform/tests/tools/third_party/websockets/example/tutorial/step1/main.js b/testing/web-platform/tests/tools/third_party/websockets/example/tutorial/step1/main.js
new file mode 100644
index 0000000000..dd28f9a6a8
--- /dev/null
+++ b/testing/web-platform/tests/tools/third_party/websockets/example/tutorial/step1/main.js
@@ -0,0 +1,53 @@
+import { createBoard, playMove } from "./connect4.js";
+
+function showMessage(message) {
+  window.setTimeout(() => window.alert(message), 50);
+}
+
+function receiveMoves(board, websocket) {
+  websocket.addEventListener("message", ({ data }) => {
+    const event = JSON.parse(data);
+    switch (event.type) {
+      case "play":
+        // Update the UI with the move.
+        playMove(board, event.player, event.column, event.row);
+        break;
+      case "win":
+        showMessage(`Player ${event.player} wins!`);
+        // No further messages are expected; close the WebSocket connection.
+        websocket.close(1000);
+        break;
+      case "error":
+        showMessage(event.message);
+        break;
+      default:
+        throw new Error(`Unsupported event type: ${event.type}.`);
+    }
+  });
+}
+
+function sendMoves(board, websocket) {
+  // When clicking a column, send a "play" event for a move in that column.
+  board.addEventListener("click", ({ target }) => {
+    const column = target.dataset.column;
+    // Ignore clicks outside a column.
+    if (column === undefined) {
+      return;
+    }
+    const event = {
+      type: "play",
+      column: parseInt(column, 10),
+    };
+    websocket.send(JSON.stringify(event));
+  });
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  // Initialize the UI.
+  const board = document.querySelector(".board");
+  createBoard(board);
+  // Open the WebSocket connection and register event handlers.
+  const websocket = new WebSocket("ws://localhost:8001/");
+  receiveMoves(board, websocket);
+  sendMoves(board, websocket);
+});