Chat feature now working

public/Styles/RoomStyle.css

@@ -142,3 +142,13 @@ input {
   line-height: 15px;
   color: black;
 }
+
+li {
+  background-color: rgb(241, 243, 244);
+  font-family: "Roboto", sans-serif;
+  list-style: none;
+  padding: 10px;
+  border: 1px solid black;
+  border-radius: 10px;
+  margin: 10px 10px 10px 10px;
+}

public/scripts/Roomscripts.js

@@ -14,7 +14,7 @@ navigator.mediaDevices
     //we need video so this is true
     video: true,
     //we also need the audio then so audio is true
-    audio: true,
+    audio: false,
   })
   .then((stream) => {
     VideoStream: stream;
@@ -91,3 +91,41 @@ if (Room_id) {
 
 const pageTitle = document.getElementById("title-id");
 pageTitle.innerHTML = `Meeting-${Room_id}`;
+
+//bringing input-field and the paper rocket button
+const inputText = document.getElementById("chat-message");
+const send = document.getElementById("send");
+
+inputText.addEventListener("input", changeTheColorOfSend);
+
+function changeTheColorOfSend(event) {
+  if (inputText.value) {
+    send.style.color = `rgb(55,118,224)`;
+  } else {
+    send.style.color = `grey`;
+  }
+}
+
+//adding event listener to the send button
+send.addEventListener("click", sendMessage);
+
+function sendMessage(event) {
+  var messageText = inputText.value;
+  if (messageText) {
+    //emit the message text
+    socket.emit("chat message", messageText);
+    //and clear the chat
+    inputText.value = "";
+    send.style.color = `grey`;
+  }
+}
+
+const chatWindowTexts = document.getElementById("UserTexts");
+//recieving the message and adding that as a list
+socket.on("chat message", (message) => {
+  var messageElement = document.createElement("li");
+  console.log(message);
+  messageElement.textContent = message;
+  chatWindowTexts.appendChild(messageElement);
+  window.scrollTo(0, document.body.scrollHeight);
+});

server.js

@@ -23,6 +23,12 @@ io.on("connection", (socket) => {
     console.log("request reached server");
     socket.broadcast.emit("user-connected", id);
   });
+
+  socket.on("chat message", (message) => {
+    //if we do this we will not recieve our own messages but here we wnt our texts too
+    //socket.broadcast.emit("chat message", message);
+    io.emit("chat message", message);
+  });
 });
 
 port = process.env.PORT || 3000;

views/room.ejs

@@ -42,7 +42,7 @@
               call ends.
             </div>
           </div>
-          <ul class="messages">
+          <ul id="UserTexts" class="messages-list">
             <!-- Here lies the in meeting chat messages-->
           </ul>
         </div>