Make messages unique and dedupe on reconnection

webroot/js/app.js

@@ -33,6 +33,7 @@ function setupApp() {
     methods: {
       submitChatForm: function (e) {
         const message = new Message(this.message)
+        message.id = uuidv4()
         localStorage.author = message.author
         const messageJSON = JSON.stringify(message)
         window.ws.send(messageJSON)
@@ -47,6 +48,7 @@ function setupApp() {
 
 async function getStatus() {
   let url = "/status";
+
   try {
     let response = await fetch(url);
     let status = await response.json(); // read response body and parse as JSON
@@ -66,11 +68,19 @@ async function getStatus() {
 function setupWebsocket() {
   const protocol = location.protocol == "https:" ? "wss" : "ws"
   var ws = new WebSocket(protocol + "://" + location.host + "/entry")
+  
   ws.onmessage = (e) => {
     var model = JSON.parse(e.data)
-    var message = new Message(model);
-    this.messagesContainer.messages.push(message)
-    scrollSmoothToBottom("messages-container")
+    var message = new Message(model)
+
+    const existing = this.messagesContainer.messages.filter(function (item) {
+      return item.id === message.id
+    })
+    
+    if (existing.length === 0 || !existing) {
+      this.messagesContainer.messages.push(message)
+      scrollSmoothToBottom("messages-container")
+    }
   }
 
   ws.onclose = (e) => {
@@ -80,8 +90,7 @@ function setupWebsocket() {
   }
 
   ws.onerror = (e) => {
-    console.log("ERROR")
-    setupWebsocket()
+    setTimeout(setupWebsocket, 5000)
   }
 
   window.ws = ws
@@ -128,4 +137,11 @@ function scrollSmoothToBottom(id) {
   $('#' + id).animate({
     scrollTop: div.scrollHeight - div.clientHeight
   }, 500)
-}
+}
+
+function uuidv4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}