diff --git a/message.go b/message.go index 8d1e3a181..a579ef83e 100644 --- a/message.go +++ b/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 { diff --git a/webroot/js/app.js b/webroot/js/app.js index 900c06c22..ae9060b47 100644 --- a/webroot/js/app.js +++ b/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) -} \ No newline at end of file +} + +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); + }); +} diff --git a/webroot/js/message.js b/webroot/js/message.js index b1ce1b282..36720ed2e 100644 --- a/webroot/js/message.js +++ b/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 } } } \ No newline at end of file