From 5bccd5d5fdafac4f7c6b8b80bc2d409d42ab0815 Mon Sep 17 00:00:00 2001
From: keroxp <kerokerokerop@gmail.com>
Date: Tue, 18 Feb 2020 07:14:47 +0900
Subject: [PATCH 1/3] [ws] Added browser chat example

---
 std/examples/README.md       | 10 ++++-
 std/examples/chat/index.html | 74 ++++++++++++++++++++++++++++++++++++
 std/examples/chat/server.ts  | 60 +++++++++++++++++++++++++++++
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 std/examples/chat/index.html
 create mode 100644 std/examples/chat/server.ts
diff --git a/std/examples/README.md b/std/examples/README.md
index 351c4a6b4c7c4c..b4d276cdb26d84 100644
--- a/std/examples/README.md
+++ b/std/examples/README.md
@@ -10,7 +10,7 @@ bookmark to a program.)
 ### A TCP echo server
 
 ```shell
-deno https://deno.land/std/examples/echo_server.ts --allow-net
+deno  --allow-net https://deno.land/std/examples/echo_server.ts
 ```
 
 Or
@@ -51,3 +51,11 @@ deno install --allow-net --allow-env gist https://deno.land/std/examples/gist.ts
 gist --title "Example gist 1" script.ts
 gist --t "Example gist 2" script2.ts
 ```
+
+### chat - WebSocket chat server and browser client
+
+```shell
+deno --allow-net --allow-read https://deno.land/std/examples/chat/server.ts
+```
+
+Open http://localhost:8080 on the browser.
diff --git a/std/examples/chat/index.html b/std/examples/chat/index.html
new file mode 100644
index 00000000000000..c3463196c9b64b
--- /dev/null
+++ b/std/examples/chat/index.html
@@ -0,0 +1,74 @@
+<html>
+  <head></head>
+  <body>
+    <div class="">
+      <input type="text" id="input" />
+      <button id="sendButton" disabled>send</button>
+      <button id="connectButton" disabled>connect</button>
+      <button id="closeButton" disabled>close</button>
+    </div>
+    <div id="status"></div>
+    <ul id="timeline"></div>
+    <script>
+      let ws;
+      function messageDom(msg) {
+        const div = document.createElement("li");
+        div.className = "message";
+        div.innerText = msg;
+        return div;
+      }
+      const timeline = document.getElementById("timeline");
+      const sendButton = document.getElementById("sendButton");
+      sendButton.onclick = send;
+      const closeButton =document.getElementById("closeButton");
+      closeButton.onclick=close;
+      const connectButton = document.getElementById("connectButton");
+      connectButton.onclick=connect;
+      const status = document.getElementById("status");
+      const input = document.getElementById("input");
+      function send() {
+        const msg = input.value;
+        ws.send(msg);
+        applyState({inputValue: ""})
+      }
+      function connect() {
+        if (ws) ws.close();
+        ws = new WebSocket("ws://localhost:8080/ws");
+        ws.addEventListener("open", () => {
+          console.log("open", ws);
+          applyState({connected: true});
+        });
+        ws.addEventListener("message", ({data}) => {
+          timeline.appendChild(messageDom(data));
+        });
+        ws.addEventListener("close", () => {
+          applyState({connect: false});
+        });
+      }
+      function close() {
+        ws.close();
+        applyState({connected: false});
+      }
+      function applyState({connected, status, inputValue}) {
+        if (inputValue != null) {
+          input.value = inputValue;
+        }
+        if(status != null) {
+          status.innerText = status;
+        }
+        if (connected != null) {
+          if (connected) {
+            sendButton.disabled = false;
+            connectButton.disabled = true;
+            closeButton.disabled= false;
+          } else {
+            sendButton.disabled= true;
+            connectButton.disabled=false;
+            closeButton.disabled=true;
+          }
+        }
+      }
+      connect();
+    </script>
+  </body>
+</html>
diff --git a/std/examples/chat/server.ts b/std/examples/chat/server.ts
new file mode 100644
index 00000000000000..eda7b1a70aa533
--- /dev/null
+++ b/std/examples/chat/server.ts
@@ -0,0 +1,60 @@
+import { serve } from "../../http/server.ts";
+import {
+  acceptWebSocket,
+  acceptable,
+  WebSocket,
+  isWebSocketCloseEvent
+} from "../../ws/mod.ts";
+
+const clients = new Map<number, WebSocket>();
+let clientId = 0;
+async function dispatch(msg: string): Promise<void> {
+  for (const client of clients.values()) {
+    client.send(msg);
+  }
+}
+async function wsHandler(ws: WebSocket): Promise<void> {
+  const id = ++clientId;
+  clients.set(id, ws);
+  dispatch(`Connected: [${id}]`);
+  for await (const msg of ws.receive()) {
+    console.log(`msg:${id}`, msg);
+    if (typeof msg === "string") {
+      dispatch(`[${id}]: ${msg}`);
+    } else if (isWebSocketCloseEvent(msg)) {
+      clients.delete(id);
+      dispatch(`Closed: [${id}]`);
+      break;
+    }
+  }
+}
+
+async function main(): Promise<void> {
+  console.log("chat server starting on :8080....");
+  for await (const req of serve({ port: 8080 })) {
+    if (req.method === "GET" && req.url === "/") {
+      Deno.open("./index.html").then(file => {
+        req
+          .respond({
+            status: 200,
+            headers: new Headers({
+              "content-type": "text/html"
+            }),
+            body: file
+          })
+          .finally(() => file.close());
+      });
+    }
+    if (req.method === "GET" && req.url === "/ws") {
+      if (acceptable(req)) {
+        acceptWebSocket({
+          conn: req.conn,
+          bufReader: req.r,
+          bufWriter: req.w,
+          headers: req.headers
+        }).then(wsHandler);
+      }
+    }
+  }
+}
+main();

From d14ae1d049d356811a7d1ad895a6e1949a048839 Mon Sep 17 00:00:00 2001
From: keroxp <kerokerokerop@gmail.com>
Date: Wed, 19 Feb 2020 08:27:57 +0900
Subject: [PATCH 2/3] add tests

---
 std/examples/chat/index.html     |  8 +++--
 std/examples/chat/server.ts      | 53 +++++++++++++++-----------------
 std/examples/chat/server_test.ts | 46 +++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 31 deletions(-)
 create mode 100644 std/examples/chat/server_test.ts

diff --git a/std/examples/chat/index.html b/std/examples/chat/index.html
index c3463196c9b64b..b84a9f1dd1f67e 100644
--- a/std/examples/chat/index.html
+++ b/std/examples/chat/index.html
@@ -1,7 +1,9 @@
 <html>
-  <head></head>
+  <head>
+    <title>ws chat example</title>
+  </head>
   <body>
-    <div class="">
+    <div>
       <input type="text" id="input" />
       <button id="sendButton" disabled>send</button>
       <button id="connectButton" disabled>connect</button>
@@ -33,7 +35,7 @@
       }
       function connect() {
         if (ws) ws.close();
-        ws = new WebSocket("ws://localhost:8080/ws");
+        ws = new WebSocket("ws://0.0.0.0:8080/ws");
         ws.addEventListener("open", () => {
           console.log("open", ws);
           applyState({connected: true});
diff --git a/std/examples/chat/server.ts b/std/examples/chat/server.ts
index eda7b1a70aa533..6d8eb2a1570b79 100644
--- a/std/examples/chat/server.ts
+++ b/std/examples/chat/server.ts
@@ -1,4 +1,4 @@
-import { serve } from "../../http/server.ts";
+import { listenAndServe } from "../../http/server.ts";
 import {
   acceptWebSocket,
   acceptable,
@@ -29,32 +29,29 @@ async function wsHandler(ws: WebSocket): Promise<void> {
   }
 }
 
-async function main(): Promise<void> {
-  console.log("chat server starting on :8080....");
-  for await (const req of serve({ port: 8080 })) {
-    if (req.method === "GET" && req.url === "/") {
-      Deno.open("./index.html").then(file => {
-        req
-          .respond({
-            status: 200,
-            headers: new Headers({
-              "content-type": "text/html"
-            }),
-            body: file
-          })
-          .finally(() => file.close());
-      });
-    }
-    if (req.method === "GET" && req.url === "/ws") {
-      if (acceptable(req)) {
-        acceptWebSocket({
-          conn: req.conn,
-          bufReader: req.r,
-          bufWriter: req.w,
-          headers: req.headers
-        }).then(wsHandler);
-      }
+listenAndServe({ port: 8080 }, async req => {
+  if (req.method === "GET" && req.url === "/") {
+    Deno.open("./index.html").then(file => {
+      req
+        .respond({
+          status: 200,
+          headers: new Headers({
+            "content-type": "text/html"
+          }),
+          body: file
+        })
+        .finally(() => file.close());
+    });
+  }
+  if (req.method === "GET" && req.url === "/ws") {
+    if (acceptable(req)) {
+      acceptWebSocket({
+        conn: req.conn,
+        bufReader: req.r,
+        bufWriter: req.w,
+        headers: req.headers
+      }).then(wsHandler);
     }
   }
-}
-main();
+});
+console.log("chat server starting on :8080....");
diff --git a/std/examples/chat/server_test.ts b/std/examples/chat/server_test.ts
new file mode 100644
index 00000000000000..d43e41693e94d8
--- /dev/null
+++ b/std/examples/chat/server_test.ts
@@ -0,0 +1,46 @@
+import { assert, assertEquals } from "../../testing/asserts.ts";
+import { TextProtoReader } from "../../textproto/mod.ts";
+import { BufReader } from "../../io/bufio.ts";
+import { connectWebSocket, WebSocket } from "../../ws/mod.ts";
+
+let server: Deno.Process | undefined;
+async function startServer(): Promise<void> {
+  server = Deno.run({
+    args: [Deno.execPath(), "--allow-net", "--allow-read", "server.ts"],
+    cwd: "examples/chat",
+    stdout: "piped"
+  });
+  try {
+    assert(server.stdout != null);
+    const r = new TextProtoReader(new BufReader(server.stdout));
+    const s = await r.readLine();
+    assert(s !== Deno.EOF && s.includes("chat server starting"));
+  } catch {
+    server.close();
+  }
+}
+
+const { test } = Deno;
+
+await startServer();
+
+test("GET / should serve html", async () => {
+  const resp = await fetch("http://0.0.0.0:8080/");
+  assertEquals(resp.status, 200);
+  assertEquals(resp.headers.get("content-type"), "text/html");
+  const html = await resp.body.text();
+  assert(html.includes("ws chat example"), "body is ok");
+});
+
+let ws: WebSocket | undefined;
+test("GET /ws should upgrade conn to ws", async () => {
+  ws = await connectWebSocket("http://0.0.0.0:8080/ws");
+  const it = ws.receive();
+  assertEquals((await it.next()).value, "Connected: [1]");
+  ws.send("Hello");
+  assertEquals((await it.next()).value, "[1]: Hello");
+});
+test("afterAll", () => {
+  server?.close();
+  ws?.conn.close();
+});

From cbfb87af64c80f86badc175a14633ba4e943ae23 Mon Sep 17 00:00:00 2001
From: keroxp <kerokerokerop@gmail.com>
Date: Sat, 22 Feb 2020 16:40:25 +0900
Subject: [PATCH 3/3] fix: serving file on remote and local

---
 std/examples/chat/server.ts | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/std/examples/chat/server.ts b/std/examples/chat/server.ts
index 6d8eb2a1570b79..7a5a3ea141f361 100644
--- a/std/examples/chat/server.ts
+++ b/std/examples/chat/server.ts
@@ -31,17 +31,25 @@ async function wsHandler(ws: WebSocket): Promise<void> {
 
 listenAndServe({ port: 8080 }, async req => {
   if (req.method === "GET" && req.url === "/") {
-    Deno.open("./index.html").then(file => {
-      req
-        .respond({
-          status: 200,
-          headers: new Headers({
-            "content-type": "text/html"
-          }),
-          body: file
-        })
-        .finally(() => file.close());
-    });
+    //Serve with hack
+    const u = new URL("./index.html", import.meta.url);
+    if (u.protocol.startsWith("http")) {
+      // server launched by deno run http(s)://.../server.ts,
+      fetch(u.href).then(resp => {
+        resp.headers.set("content-type", "text/html");
+        return req.respond(resp);
+      });
+    } else {
+      // server launched by deno run ./server.ts
+      const file = await Deno.open("./index.html");
+      req.respond({
+        status: 200,
+        headers: new Headers({
+          "content-type": "text/html"
+        }),
+        body: file
+      });
+    }
   }
   if (req.method === "GET" && req.url === "/ws") {
     if (acceptable(req)) {
