WIP on more involved chat example

nhooyr · nhooyr · commit 7d2c35a73c39 · 2020-05-22T15:35:03.000-04:00
diff --git a/examples/chat/chat.go b/examples/chat/chat.go
@@ -2,8 +2,8 @@ package main
 
 import (
 	"context"
+	"encoding/json"
 	"errors"
-	"io/ioutil"
 	"log"
 	"net/http"
 	"sync"
@@ -14,6 +14,26 @@ import (
 	"nhooyr.io/websocket"
 )
 
+type clientJoin struct {
+	ClientID   string `json:"client_id"`
+	ClientName string `json:"client_name"`
+}
+
+type clientLeave struct {
+	ClientID string `json:"client_id"`
+}
+
+type clientRename struct {
+	ClientID string `json:"client_id"`
+	ClientName string `json:"client_name"`
+}
+
+type messageBroadcast struct {
+	ClientID string `json:"client_id"`
+	Time    time.Time `json:"time"`
+	Message string    `json:"msg"`
+}
+
 // chatServer enables broadcasting to a set of subscribers.
 type chatServer struct {
 	// subscriberMessageBuffer controls the max number
@@ -81,7 +101,7 @@ func (cs *chatServer) subscribeHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if websocket.CloseStatus(err) == websocket.StatusNormalClosure ||
-		websocket.CloseStatus(err) == websocket.StatusGoingAway {
+			websocket.CloseStatus(err) == websocket.StatusGoingAway {
 		return
 	}
 	if err != nil {
@@ -98,13 +118,18 @@ func (cs *chatServer) publishHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	body := http.MaxBytesReader(w, r.Body, 8192)
-	msg, err := ioutil.ReadAll(body)
+
+	var msg message
+	err := json.NewDecoder(body).Decode(&msg)
 	if err != nil {
-		http.Error(w, http.StatusText(http.StatusRequestEntityTooLarge), http.StatusRequestEntityTooLarge)
+		http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
 		return
 	}
 
-	cs.publish(msg)
+	msg.Author =
+
+	// TODO improve
+	cs.publish([]byte(msg.Message))
 
 	w.WriteHeader(http.StatusAccepted)
 }
diff --git a/examples/chat/index.css b/examples/chat/index.css
@@ -1,12 +1,8 @@
-body {
-  width: 100vw;
-  min-width: 320px;
-}
-
 #root {
   padding: 40px 20px;
-  max-width: 600px;
   margin: auto;
+  min-width: 320px;
+  max-width: 600px;
   height: 100vh;
 
   display: flex;
@@ -79,3 +75,15 @@ body {
 #publish-form input[type="submit"]:active {
   background-color: red;
 }
+
+#username-form-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/examples/chat/index.html b/examples/chat/index.html
@@ -12,6 +12,13 @@
   </head>
   <body>
     <div id="root">
+      <div id="username-form-overlay">
+        <form id="username-form">
+          <input name="message" id="username-input" type="text" />
+          <input value="Register Username" type="submit" />
+        </form>
+      </div>
+
       <div id="message-log"></div>
       <div id="publish-form-container">
         <form id="publish-form">
diff --git a/examples/chat/index.js b/examples/chat/index.js
@@ -64,7 +64,10 @@
     try {
       const resp = await fetch("/publish", {
         method: "POST",
-        body: msg,
+        body: {
+          time: new Date(),
+          msg: msg,
+        },
       })
       if (resp.status !== 202) {
         throw new Error(`Unexpected HTTP Status ${resp.status} ${resp.statusText}`)
