Fix connecting clients

Author: stefaluc

app/src/App.js

@@ -13,6 +13,7 @@ class App extends Component {
       init: true,
       participants: [],
       messages: [],
+      name: "",
     };
 
     this.participantSubmit = this.participantSubmit.bind(this);
@@ -25,21 +26,20 @@ class App extends Component {
     if (input === "") {
       return;
     }
+
+    // init client websocket
     socket = new WebSocket(`ws://127.0.0.1:8081/ws?name=${input}`);
     socket.onopen = (event) => {
       console.log('Opened socket');
-      console.log(event);
     };
     socket.onerror = (event) => {
       console.log(event);
     }
-    socket.onmessage = (event) => {
-      const names = JSON.parse(event.data);
-      this.setState({
-        init: false,
-        participants: names,
-      });
-    }
+    this.setState({
+      init: false,
+      name: input,
+      participants: [],
+    });
   }
 
   textSubmit(e) {
@@ -49,9 +49,10 @@ class App extends Component {
       return;
     }
 
+    // send message request to server
     socket.send(JSON.stringify({
       text: input,
-      client: "testClient",
+      name: this.state.name,
       timestamp: new Date().toLocaleTimeString(),
     }));
 
@@ -62,24 +63,30 @@ class App extends Component {
     // keep message box scrolled appropriately with new messages
     if (!this.state.init) {
       document.getElementById("conversation-main").scrollTop = document.getElementById("conversation-main").scrollHeight;
-    }
-  }
 
-  componentDidMount() {
-    if (!this.state.init) {
+      console.log("componentDidUpdate")
       socket.onmessage = (event) => {
-        const { text, client, timestamp } = JSON.parse(event.data);
+        console.log(event);
+        const data = JSON.parse(event.data);
+        console.log(data);
+        if (!data.text) { // client added
+          this.setState({
+            participants: data
+          });
+        } else { // message added
+          const { text, name, timestamp } = data;
 
-        this.setState({
-          messages: [
-            ...this.state.messages,
-            {
-              text,
-              client,
-              timestamp,
-            }
-          ],
-        });
+          this.setState({
+            messages: [
+              ...this.state.messages,
+              {
+                text,
+                name,
+                timestamp,
+              }
+            ],
+          });
+        }
       }
     }
   }

app/src/components/Message.js

@@ -3,13 +3,12 @@ import React from 'react';
 import '../styles/Message.css';
 
 const Message = (props) => {
-  console.log(props);
-  const { text, client, timestamp } = props.message;
+  const { text, name, timestamp } = props.message;
 
   return (
     <div className="message">
       <div className="message-top">
-        <span className="client-name">{client}</span>
+        <span className="client-name">{name}</span>
         <span className="timestamp">{timestamp}</span>
       </div>
       <div className="message-text">

server/websocket.go

@@ -30,7 +30,6 @@ var upgrader = websocket.Upgrader{
 type JsonData struct {
 	Name string `json:"name"`
 	Text string `json:"text"`
-	Client string `json:"client"`
 	Timestamp string `json:"timestamp"`
 }
 
@@ -58,6 +57,7 @@ func (c *Client) readPump() {
 
 	// handle connection read
 	for {
+		fmt.Println("reading from client")
 		// read JSON data from connection
 		message := JsonData{}
 		if err := c.conn.ReadJSON(&message); err != nil {
@@ -84,7 +84,7 @@ func (c *Client) writePump() {
 			c.conn.SetWriteDeadline(time.Now().Add(writeWait))
 			if !ok {
 				// channel has been closed by the hub
-				c.conn.WriteMessage(websocket.CloseMessage, []byte{})
+				// c.conn.WriteMessage(websocket.CloseMessage, []byte{})
 				return
 			}
 
@@ -138,7 +138,8 @@ func wsHandler(hub *ConnHub, w http.ResponseWriter, r *http.Request) {
 		i++
 	}
 	names[i] = name
-	client.conn.WriteJSON(names)
+	namesJson, _ := json.Marshal(names)
+	client.hub.broadcast <- namesJson
 
 	// separate reads and writes to conform to WebSocket standard of one concurrent reader and writer
 	go client.writePump()