Add docs to chat example

README.md

@@ -34,6 +34,8 @@ go get nhooyr.io/websocket
 
 For a production quality example that demonstrates the complete API, see the [echo example](https://godoc.org/nhooyr.io/websocket#example-package--Echo).
 
+For a full stack example, see the [./example](./example) subdirectory which contains a full chat example.
+
 ### Server
 
 ```go

example/README.md

+# Chat Example
+
+This directory contains a full stack example
+of a simple chat webapp using nhooyr.io/websocket.
+
+```bash
+$ cd example
+$ go run .
+listening on http://127.0.0.1:51055
+```
+
+Visit the printed URL to submit and view broadcasted messages in a browser.
+
+![Image of Example](https://i.imgur.com/iSdpZFT.png)
+
+## Structure
+
+The frontend is contained in `index.html`, `index.js` and `index.css`. It setups the
+DOM with a form at the buttom to submit messages and at the top is a scrollable div
+that is populated with new messages as they are broadcast. The messages are received
+via a WebSocket and messages are published via a POST HTTP endpoint.
+
+The server portion is `main.go` and `chat.go` and implements serving the static frontend
+assets as well as the `/subscribe` WebSocket endpoint for subscribing to
+broadcast messages and `/publish` for publishing messages.

example-chat/chat.go → example/chat.go

@@ -18,8 +18,6 @@ type chatServer struct {
 }
 
 func (cs *chatServer) subscribeHandler(w http.ResponseWriter, r *http.Request) {
-	println("HELLO")
-
 	c, err := websocket.Accept(w, r, nil)
 	if err != nil {
 		log.Print(err)
@@ -30,6 +28,10 @@ func (cs *chatServer) subscribeHandler(w http.ResponseWriter, r *http.Request) {
 }
 
 func (cs *chatServer) publishHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, http.StatusText(http.StatusMethodNotAllowed), http.StatusMethodNotAllowed)
+		return
+	}
 	body := io.LimitReader(r.Body, 8192)
 	msg, err := ioutil.ReadAll(body)
 	if err != nil {

example-chat/index.js → example/index.js

 ;(() => {
   let conn
-  let submitted = false
+  let expectingMessage = false
   function dial() {
     conn = new WebSocket(`ws://${location.host}/subscribe`)
 
-    conn.addEventListener("close", () => {
-      conn = undefined
+    conn.addEventListener("close", (ev) => {
+      console.error("subscribe WebSocket closed", ev)
+      console.info("reconnecting in 1000ms", ev)
       setTimeout(dial, 1000)
     })
     conn.addEventListener("message", ev => {
       if (typeof ev.data !== "string") {
+        console.error("unexpected message type", typeof ev.data)
         return
       }
       appendLog(ev.data)
-      if (submitted) {
+      if (expectingMessage) {
         messageLog.scrollTo(0, messageLog.scrollHeight)
-        submitted = false
+        expectingMessage = false
       }
     })
-
-    return conn
   }
   dial()
 
@@ -34,7 +34,7 @@
   }
   appendLog("Submit a message to get started!")
 
-  publishForm.onsubmit = ev => {
+  publishForm.onsubmit = async ev => {
     ev.preventDefault()
 
     const msg = messageInput.value
@@ -43,10 +43,12 @@
     }
     messageInput.value = ""
 
-    submitted = true
+    expectingMessage = true
     fetch("/publish", {
       method: "POST",
       body: msg,
+    }).catch(err => {
+      console.error("failed to publish", err)
     })
   }
 })()