done chat

public/js/chat.js

@@ -4,21 +4,50 @@ function getCookie(name) {
     if (parts.length === 2) return parts.pop().split(';').shift();
 }
 
-$(document).ready(() => {
-    //prod
-    // const socket = new WebSocket('wss://auth.foxarmy.org');
-    //dev
-    const socket = new WebSocket('ws://localhost:3000');
+$(document).ready(async () => {
+    const wsConnectionString = (await fetch(`/api/websocketConnection`)).text()
+    const socket = new WebSocket(wsConnectionString);
+    let lastMessageNumber = 0;
+    let page = 20;
+    const fetchMoreMessages = async () => {
+        if (lastMessageNumber < 0 ) return [];
+        let messages = await (await fetch(`/api/getChatMessages/${lastMessageNumber}/${page}`)).json();
+        lastMessageNumber = messages.length < page? -1 : lastMessageNumber + messages.length
+        return messages
+    }
 
     const appendMessageToChat = (author, content) => {
-        const messageDiv = document.createElement('div')//`<div class="chat-message" ><${message.author}> ${message.content}</div><br/>`
+        const messageDiv = document.createElement('div')
         messageDiv.className = "chat-message"
         messageDiv.textContent = `<${author}> ${content}`
         document.getElementsByClassName("messages-container")[0].appendChild(messageDiv)
     }
 
-    socket.onmessage = message => {
+    const prependMessageToChat = (author, content) => {
+        const messageDiv = document.createElement('div')
+        messageDiv.className = "chat-message"
+        messageDiv.textContent = `<${author}> ${content}`
+        const messageContainer = document.getElementsByClassName("messages-container")[0]
+        messageContainer.firstChild.insertAdjacentElement('afterend', messageDiv)
+    }
 
+    const onFetchMessageButtonClick = async () => {
+        let messages = await fetchMoreMessages(lastMessageNumber, page);
+        if (messages.length == 0) return;
+
+        messages.forEach(message => {
+            prependMessageToChat(message.author, message.content);
+        });
+    }
+
+    $("#fetch-messages-button").click(onFetchMessageButtonClick);
+
+    await onFetchMessageButtonClick();
+    
+
+    
+
+    socket.onmessage = message => {
         try {
             message = JSON.parse(message.data)
         } catch(e) {
@@ -40,6 +69,8 @@ $(document).ready(() => {
         socket.send(JSON.stringify(message));
         appendMessageToChat(message.author, message.content)
         $("#chat-input").val("")
+        let messageContainer = $(".messages-container")
+        messageContainer.animate({ scrollTop: messageContainer.prop("scrollHeight")}, 1000);
     }
 
     $("#send-message-button").click(sendData);