Make messages unique and dedupe on reconnection

message.go

@@ -4,6 +4,7 @@ type Message struct {
 	Author string `json:"author"`
 	Body   string `json:"body"`
 	Image  string `json:"image"`
+	Id     string `json:"id"`
 }
 
 func (self *Message) String() string {

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);
+    var message = new Message(model)
-    this.messagesContainer.messages.push(message)
+
-    scrollSmoothToBottom("messages-container")
+    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")
+    setTimeout(setupWebsocket, 5000)
-    setupWebsocket()
   }
 
   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);
+  });
+}

webroot/js/message.js

@@ -3,17 +3,19 @@ class Message {
 		this.author = model.author
 		this.body = model.body
 		this.image = "https://robohash.org/" + model.author
+		this.id = model.id
 	}
 
 	linkedText() {
 		return autoLink(this.body, { embed: true })
 	}
-	
+
 	toModel() {
 		return {
 			author: this.author(),
 			body: this.body(),
-			image: this.image()
+			image: this.image(),
+			id: this.id
 		}
 	}
 }