Make chat example responsive

coder · nhooyr · Feb 17, 2020 · Feb 17, 2020 · Feb 17, 2020 · Feb 17, 2020
commit 2c8283379a032055e9057b83cd7f0ef3f54b7361
diff --git a/example/README.md b/example/README.md
@@ -5,7 +5,7 @@ of a simple chat webapp using nhooyr.io/websocket.
 
 ```bash
 $ cd example
-$ go run .
+$ go run . localhost:0
 listening on http://127.0.0.1:51055
 ```
 

diff --git a/example/index.css b/example/index.css
@@ -1,14 +1,13 @@
 body {
   width: 100vw;
-  height: 100vh;
   min-width: 320px;
 }
 
 #root {
-  padding: 20px;
-  max-width: 500px;
+  padding: 40px 20px;
+  max-width: 480px;
   margin: auto;
-  max-height: 100vh;
+  height: 100vh;
 
   display: flex;
   flex-direction: column;
@@ -20,42 +19,57 @@ body {
   margin: 20px 0 0 0;
 }
 
+/* 100vh on safari does not include the bottom bar. */
+@supports (-webkit-overflow-scrolling: touch) {
+  #root {
+    height: 85vh;
+  }
+}
+
 #message-log {
   width: 100%;
-  height: 100vh;
   flex-grow: 1;
   overflow: auto;
 }
 
 #message-log p:first-child {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: 0;
 }
 
 #message-log > * + * {
   margin: 10px 0 0 0;
 }
 
-#publish-form {
-  appearance: none;
+#publish-form-container {
+  width: 100%;
+}
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+#publish-form {
   width: 100%;
+  display: flex;
+  height: 40px;
+}
+
+#publish-form > * + * {
+  margin: 0 0 0 10px;
 }
 
 #publish-form input[type="text"] {
   flex-grow: 1;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
   word-break: normal;
   border-radius: 5px;
+  border: 1px solid #ccc;
 }
 
 #publish-form input[type="submit"] {
   color: white;
   background-color: black;
   border-radius: 5px;
-  margin-left: 10px;
+  padding: 5px 10px;
+  border: none;
 }
 
 #publish-form input[type="submit"]:hover {

diff --git a/example/index.html b/example/index.html
@@ -5,18 +5,20 @@
     <title>nhooyr.io/websocket - Chat Example</title>
     <meta name="viewport" content="width=device-width" />
 
-    <link href="/index.css" rel="stylesheet" />
     <link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
     <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
     <link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
+    <link href="/index.css" rel="stylesheet" />
   </head>
   <body>
     <div id="root">
       <div id="message-log"></div>
-      <form id="publish-form">
-        <input name="message" id="message-input" type="text" />
-        <input type="submit" />
-      </form>
+      <div id="publish-form-container">
+        <form id="publish-form">
+          <input name="message" id="message-input" type="text" />
+          <input type="submit" />
+        </form>
+      </div>
     </div>
     <script type="text/javascript" src="/index.js"></script>
   </body>

diff --git a/example/index.js b/example/index.js
@@ -4,19 +4,21 @@
   function dial() {
     conn = new WebSocket(`ws://${location.host}/subscribe`)
 
-    conn.addEventListener("close", (ev) => {
-      console.error("subscribe WebSocket closed", ev)
-      console.info("reconnecting in 1000ms", ev)
+    conn.addEventListener("close", ev => {
+      console.info("websocket disconnected, reconnecting in 1000ms", ev)
       setTimeout(dial, 1000)
     })
+    conn.addEventListener("open", ev => {
+      console.info("websocket connected")
+    })
     conn.addEventListener("message", ev => {
       if (typeof ev.data !== "string") {
         console.error("unexpected message type", typeof ev.data)
         return
       }
-      appendLog(ev.data)
+      const p = appendLog(ev.data)
       if (expectingMessage) {
-        messageLog.scrollTo(0, messageLog.scrollHeight)
+        p.scrollIntoView()
         expectingMessage = false
       }
     })
@@ -31,6 +33,7 @@
     const p = document.createElement("p")
     p.innerText = `${new Date().toLocaleTimeString()}: ${text}`
     messageLog.append(p)
+    return p
   }
   appendLog("Submit a message to get started!")
 
@@ -47,8 +50,6 @@
     fetch("/publish", {
       method: "POST",
       body: msg,
-    }).catch(err => {
-      console.error("failed to publish", err)
     })
   }
 })()
diff --git a/example/main.go b/example/main.go
@@ -1,26 +1,33 @@
 package main
 
 import (
-	"fmt"
+	"errors"
 	"log"
 	"net"
 	"net/http"
+	"os"
 	"time"
 )
 
 func main() {
+	log.SetFlags(0)
+
 	err := run()
 	if err != nil {
 		log.Fatal(err)
 	}
 }
 
 func run() error {
-	l, err := net.Listen("tcp", "localhost:0")
+	if len(os.Args) < 2 {
+		return errors.New("please provide an address to listen on as the first argument")
+	}
+
+	l, err := net.Listen("tcp", os.Args[1])
 	if err != nil {
 		return err
 	}
-	fmt.Printf("listening on http://%v\n", l.Addr())
+	log.Printf("listening on http://%v", l.Addr())
 
 	var ws chatServer