Show viewer count and reconnect to websocket

main.go

@@ -11,6 +11,8 @@ import (
 
 var ipfs icore.CoreAPI
 var configuration = getConfig()
+var server *Server
+
 var online = false
 
 func main() {
@@ -46,7 +48,7 @@ func startChatServer() {
 	// log.SetFlags(log.Lshortfile)
 
 	// websocket server
-	server := NewServer("/entry")
+	server = NewServer("/entry")
 	go server.Listen()
 
 	// static files
@@ -61,14 +63,11 @@ func startChatServer() {
 func getStatus(w http.ResponseWriter, r *http.Request) {
 	status := Status{
 		Online:      online,
+		ViewerCount: server.ClientCount(),
 	}
 	json.NewEncoder(w).Encode(status)
 }
 
-type Status struct {
-	Online bool `json:"online"`
-}
-
 func streamConnected() {
 	online = true
 }
@@ -76,3 +75,9 @@ func streamConnected() {
 func streamDisconnected() {
 	online = false
 }
+
+func viewerAdded() {
+}
+
+func viewerRemoved() {
+}

server.go

@@ -41,6 +41,10 @@ func NewServer(pattern string) *Server {
 	}
 }
 
+func (s *Server) ClientCount() int {
+	return len(s.clients)
+}
+
 func (s *Server) Add(c *Client) {
 	s.addCh <- c
 }
@@ -99,12 +103,14 @@ func (s *Server) Listen() {
 			log.Println("Added new client")
 			s.clients[c.id] = c
 			log.Println("Now", len(s.clients), "clients connected.")
+			viewerAdded()
 			s.sendPastMessages(c)
 
 		// del a client
 		case c := <-s.delCh:
 			log.Println("Delete client")
 			delete(s.clients, c.id)
+			viewerRemoved()
 
 		// broadcast message for all clients
 		case msg := <-s.sendAllCh:

status.go

@@ -0,0 +1,6 @@
+package main
+
+type Status struct {
+	Online      bool `json:"online"`
+	ViewerCount int  `json:"viewerCount"`
+}

webroot/index.html

@@ -25,7 +25,7 @@
         style="width: 100%;"
       ></video>
       <div id="app">
-        {{ streamStatus }}
+        {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
       </div>
     </div>
 

webroot/js/app.js

@@ -1,8 +1,17 @@
 function setupApp() {
+  Vue.filter('plural', function (string, count) {
+    if (count === 1) {
+      return string
+    } else {
+      return string + "s"
+    }
+  })
+
   window.app = new Vue({
     el: "#app",
     data: {
       streamStatus: "",
+      viewerCount: 0,
     },
   });
 
@@ -45,8 +54,11 @@ async function getStatus() {
       ? "Stream is online."
       : "Stream is offline."
     
+    app.viewerCount = status.viewerCount
+
   } catch (e) {
     app.streamStatus = "Stream server is offline."
+    app.viewerCount = 0
   }
 
 }
@@ -60,14 +72,27 @@ function setupWebsocket() {
     this.messagesContainer.messages.push(message)
     scrollSmoothToBottom("messages-container")
   }
+
+  ws.onclose = (e) => {
+    // connection closed, discard old websocket and create a new one in 5s
+    ws = null
+    setTimeout(setupWebsocket, 5000)
+  }
+
+  ws.onerror = (e) => {
+    console.log("ERROR")
+    setupWebsocket()
+  }
+
   window.ws = ws
 }
 
 setupApp()
-getStatus();
+getStatus()
 setupWebsocket()
 setInterval(getStatus, 5000)
 
+// HLS Video setup
 var video = document.getElementById("video")
 var videoSrc = "hls/stream.m3u8"
 if (Hls.isSupported()) {