Chat updates (#92)

* Send PONG responses to PINGs

* Split out client IDs for viewer counts vs. websocket IDs

* WIP username change event

* Display username changes

* Revert commented out code

* Add support for building from the current branch

* Fix PONG

* Make username changes have a unique ID

* Add a version param to js to cachebust

webroot/js/app.js

@@ -114,6 +114,11 @@ class Owncast {
       if (this.websocketReconnectTimer) {
         clearTimeout(this.websocketReconnectTimer);
       }
+
+      // If we're "online" then enable the chat.
+      if (this.streamStatus && this.streamStatus.online) {
+        this.messagingInterface.enableChat();
+      }
     };
     ws.onclose = (e) => {
       // connection closed, discard old websocket and create a new one in 5s
@@ -124,22 +129,36 @@ class Owncast {
     };
     // On ws error just close the socket and let it re-connect again for now.
     ws.onerror = e => {
-      this.handleNetworkingError(`Stream status: ${e}`);
+      this.handleNetworkingError(`Socket error: ${JSON.parse(e)}`);
       ws.close();
     };
     ws.onmessage = (e) => {
       const model = JSON.parse(e.data);
-      // Ignore non-chat messages (such as keepalive PINGs)
-      if (model.type !== SOCKET_MESSAGE_TYPES.CHAT) {
-        return; 
+
+      // Send PONGs
+      if (model.type === SOCKET_MESSAGE_TYPES.PING) {
+        this.sendPong(ws);
+        return;
+      } else if (model.type === SOCKET_MESSAGE_TYPES.CHAT) {
+        const message = new Message(model);
+        this.addMessage(message);
+      } else if (model.type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
+        this.addMessage(model);
       }
-      const message = new Message(model);
-      this.addMessage(message);
     };
     this.websocket = ws;
     this.messagingInterface.setWebsocket(this.websocket);
   };
 
+  sendPong(ws) {
+    try {
+      const pong = { type: SOCKET_MESSAGE_TYPES.PONG };
+      ws.send(JSON.stringify(pong));
+    } catch (e) {
+      console.log('PONG error:', e);
+    }
+  }
+
   addMessage(message) {
     const existing = this.vueApp.messages.filter(function (item) {
       return item.id === message.id;