Support for displaying connected clients

Author: stefaluc

app/src/App.js

@@ -3,15 +3,7 @@ import React, { Component } from 'react';
 import Message from './components/Message';
 import './App.css';
 
-const socket = new WebSocket("ws://127.0.0.1:8081/ws");
-socket.onopen = (event) => {
-  console.log('Opened socket');
-  console.log(event);
-};
-
-socket.onerror = (event) => {
-  console.log(event);
-}
+let socket = null;
 
 class App extends Component {
   constructor(props) {
@@ -30,18 +22,24 @@ class App extends Component {
   participantSubmit(e) {
     e.preventDefault();
     const input = document.getElementById("participant-form").value;
-    console.log(input);
     if (input === "") {
       return;
     }
-
-    this.setState({
-      init: false,
-      participants: [
-        ...this.state.participants,
-        input,
-      ]
-    });
+    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,
+      });
+    }
   }
 
   textSubmit(e) {
@@ -68,19 +66,21 @@ class App extends Component {
   }
 
   componentDidMount() {
-    socket.onmessage = (event) => {
-      const { text, client, timestamp } = JSON.parse(event.data);
-
-      this.setState({
-        messages: [
-          ...this.state.messages,
-          {
-            text,
-            client,
-            timestamp,
-          }
-        ],
-      });
+    if (!this.state.init) {
+      socket.onmessage = (event) => {
+        const { text, client, timestamp } = JSON.parse(event.data);
+
+        this.setState({
+          messages: [
+            ...this.state.messages,
+            {
+              text,
+              client,
+              timestamp,
+            }
+          ],
+        });
+      }
     }
   }
 

server/conn_hub.go

@@ -1,7 +1,7 @@
 package main
 
 type ConnHub struct {
-	clients map[*Client]bool
+	clients map[*Client]string
 	broadcast chan []byte
 	register chan *Client
 	unregister chan *Client
@@ -10,7 +10,7 @@ type ConnHub struct {
 // init ConnHub
 func newConnHub() *ConnHub {
 	return &ConnHub{
-		clients: make(map[*Client]bool),
+		clients: make(map[*Client]string),
 		broadcast: make(chan []byte),
 		register: make(chan *Client),
 		unregister: make(chan *Client),
@@ -23,7 +23,7 @@ func (hub *ConnHub) run() {
 		select {
 		// register client to hub
 		case client := <-hub.register:
-			hub.clients[client] = true
+			hub.clients[client] = client.name
 		// unregister client to hub
 		case client := <-hub.unregister:
 			if _, ok := hub.clients[client]; ok {

server/websocket.go

@@ -1,9 +1,10 @@
 package main
 
 import (
-	// "fmt"
+	"fmt"
 	"net/http"
 	"time"
+	"encoding/json"
 
 	"github.com/gorilla/websocket"
 )
@@ -27,12 +28,14 @@ var upgrader = websocket.Upgrader{
 }
 
 type JsonData struct {
+	Name string `json:"name"`
 	Text string `json:"text"`
 	Client string `json:"client"`
 	Timestamp string `json:"timestamp"`
 }
 
 type Client struct {
+	name string
 	hub *ConnHub
 	conn *websocket.Conn
 	send chan []byte
@@ -56,14 +59,15 @@ func (c *Client) readPump() {
 	// handle connection read
 	for {
 		// read JSON data from connection
-		// message := JsonData{}
-		// if err := c.conn.ReadJSON(&message); err != nil {
-		// 	fmt.Println("Error reading JSON", err)
-		// }
-		// fmt.Printf("Get response: %#v\n", message)
-
-		// // queue message for writing
-		// c.hub.broadcast <- message
+		message := JsonData{}
+		if err := c.conn.ReadJSON(&message); err != nil {
+			fmt.Println("Error reading JSON", err)
+		}
+		fmt.Printf("Get response: %#v\n", message)
+
+		messageJson, _ := json.Marshal(message)
+		// queue message for writing
+		c.hub.broadcast <- messageJson
 	}
 }
 
@@ -117,14 +121,26 @@ func wsHandler(hub *ConnHub, w http.ResponseWriter, r *http.Request) {
 	}
 
 	// init new client, register to hub
+	name := r.URL.Query().Get("name")
 	client := &Client{
+		name: name, // sent in http query params
 		hub: hub,
 		conn: conn,
 		send: make(chan []byte, 256),
 	}
 	client.hub.register <- client
 
+	// construct JSON list of connected client names and send to new client for display
+	names := make([]string, len(client.hub.clients) + 1)
+	i := 0
+	for k := range client.hub.clients {
+		names[i] = client.hub.clients[k]
+		i++
+	}
+	names[i] = name
+	client.conn.WriteJSON(names)
+
 	// separate reads and writes to conform to WebSocket standard of one concurrent reader and writer
-	// go client.writePump()
-	// go client.readPump()
+	go client.writePump()
+	go client.readPump()
 }