switch back to localhost, and make timestamp at the backend

Author: TzeMingHo

chat-app/backend/app.js

@@ -2,9 +2,11 @@ import express from "express";
 import cors from "cors";
 
 const app = express();
-app.use(cors({
-  origin: "https://tzemingho-chatapp-server-frontend.hosting.codeyourfuture.io"
-}));
+app.use(
+  cors({
+    // origin: "https://tzemingho-chatapp-server-frontend.hosting.codeyourfuture.io"
+  }),
+);
 app.use(express.json());
 const port = 4000;
 
@@ -28,45 +30,46 @@ app.get("/messages", (req, res) => {
   if (isNaN(since)) {
     return res.json(chatHistory);
   }
-  const newMessages = chatHistory.filter(({timestamp}) => timestamp > since);
+  const newMessages = chatHistory.filter(({ timestamp }) => timestamp > since);
 
   if (newMessages.length > 0) {
     return res.json(newMessages);
   }
 
-  const callback = (message) => res.json([message])
+  const callback = (message) => res.json([message]);
   waitingRoom.push(callback);
 
   const seconds = 25;
-  const miliseconds = 1000;
+  const milliseconds = 1000;
 
   const timeout = setTimeout(() => {
     const index = waitingRoom.indexOf(callback);
     if (index !== -1) {
-      waitingRoom.splice(index, 1)
-      res.send([])
+      waitingRoom.splice(index, 1);
+      res.send([]);
     }
-  }, seconds * miliseconds)
-})
+  }, seconds * milliseconds);
+});
 
 app.post("/", (req, res) => {
   try {
-    let { message, user, timestamp } = req.body;
+    let { message, user } = req.body;
     if (!message?.trim() || !user?.trim()) {
       res.status(406).json({ error: "Empty message or user are not allowed." });
       return;
     } else {
+      const newTimestamp = new Date().getTime();
       const newMessage = {
         message: message,
         user: user,
-        timestamp: timestamp
-      }
+        timestamp: newTimestamp,
+      };
       chatHistory.push(newMessage);
 
-      while(waitingRoom.length > 0) {
+      while (waitingRoom.length > 0) {
         const callback = waitingRoom.pop();
         callback(newMessage);
-      }      
+      }
       res.status(201).send("sent");
     }
   } catch (error) {

chat-app/frontend/scripts.js

@@ -1,11 +1,10 @@
 const state = {
   messageString: "",
   userString: "",
-  backendURL: "https://tzemingho-chatapp-server-backend.hosting.codeyourfuture.io",
-  // backendURL: "http://localhost:4000",
+  // backendURL: "https://tzemingho-chatapp-server-backend.hosting.codeyourfuture.io",
+  backendURL: "http://localhost:4000",
   messages: [],
-}
-
+};
 
 function createEmptyMessage() {
   const emptyMessage = document.createElement("p");
@@ -38,10 +37,9 @@ function createMessageThreads(chatHistoryArray) {
   });
 }
 
-
 async function chatDisplay() {
   const chatDisplayArea = document.getElementById("chat-display-area");
-  chatDisplayArea.innerHTML = '';
+  chatDisplayArea.innerHTML = "";
   const chatHistoryArray = state.messages;
   if (chatHistoryArray.length == 0) {
     chatDisplayArea.append(createEmptyMessage());
@@ -51,21 +49,24 @@ async function chatDisplay() {
 }
 
 const keepFetchingMessages = async () => {
-    const lastMessageTime = state.messages.length > 0 ? state.messages[state.messages.length - 1].timestamp : null;
-    const queryString = lastMessageTime ? `?since=${lastMessageTime}` : "";
-    const url = `${state.backendURL}/messages${queryString}`;
-    try {
-      const rawResponse = await fetch(url);
-      const response = await rawResponse.json();
-      if (response.length > 0) {
-        state.messages.push(...response);
-        chatDisplay();
-      }
-    } catch (error) {
-      console.log(`Failed on connection: ${error}`)
+  const lastMessageTime =
+    state.messages.length > 0
+      ? state.messages[state.messages.length - 1].timestamp
+      : null;
+  const queryString = lastMessageTime ? `?since=${lastMessageTime}` : "";
+  const url = `${state.backendURL}/messages${queryString}`;
+  try {
+    const rawResponse = await fetch(url);
+    const response = await rawResponse.json();
+    if (response.length > 0) {
+      state.messages.push(...response);
+      chatDisplay();
     }
-    setTimeout(keepFetchingMessages, 100);
-}
+  } catch (error) {
+    console.log(`Failed on connection: ${error}`);
+  }
+  setTimeout(keepFetchingMessages, 100);
+};
 
 function messageInputReset() {
   state.messageString = "";
@@ -82,14 +83,14 @@ async function postingMessage(messageString, userString) {
     const response = await fetch(state.backendURL, {
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         message: messageString,
         user: userString,
-        timestamp: newTimestamp
-      })
-    })
+        timestamp: newTimestamp,
+      }),
+    });
     if (response.ok) {
       const confirmMessage = await response.text();
       if (confirmMessage == "sent") {
@@ -98,36 +99,37 @@ async function postingMessage(messageString, userString) {
       }
     }
   } catch (error) {
-    console.error(`Failed to post message: ${error}`)
+    console.error(`Failed to post message: ${error}`);
   }
 }
 
 async function messageSubmitHandler(e, messageString, userString) {
   e.preventDefault();
   if (!messageString || !userString) {
-    console.error(`Message or user cannot be empty.`)
-    window.alert("Message or user cannot be empty.")
+    console.error(`Message or user cannot be empty.`);
+    window.alert("Message or user cannot be empty.");
     return;
   } else {
-    await postingMessage(messageString, userString)
+    await postingMessage(messageString, userString);
   }
 }
 
 function messageInputHandler() {
-  
-  const messageInputElement = document.getElementById("message-input")
+  const messageInputElement = document.getElementById("message-input");
   messageInputElement.addEventListener("input", (e) => {
     state.messageString = e.target.value.trim();
-  })
+  });
 
-  const userInputElement = document.getElementById("user-name-input")
+  const userInputElement = document.getElementById("user-name-input");
   userInputElement.addEventListener("input", (e) => {
     state.userString = e.target.value.trim();
-  })
+  });
 
-  document.getElementById("message-submit-button").addEventListener("click", async (e) => {
-    await messageSubmitHandler(e, state.messageString, state.userString)
-  })
+  document
+    .getElementById("message-submit-button")
+    .addEventListener("click", async (e) => {
+      await messageSubmitHandler(e, state.messageString, state.userString);
+    });
 }
 
 window.onload = async () => {