Chat App |


const socket = io("http://localhost:8000");

// Get DOM elements in respective Js variables
const form = document.getElementById("send-container");
const messageInput = document.getElementById("messageInp");
const messageContainer = document.querySelector(".container");

// Audio that will play on receiving messages
var audio = new Audio("ting.mp3");

// Function which will append event info to the contaner
const append = (message, position) => {
  const messageElement = document.createElement("div");
  messageElement.innerText = message;
  messageElement.classList.add("message");
  messageElement.classList.add(position);
  messageContainer.append(messageElement);
  if (position == "left") {
    audio.play();
  }
};

// Ask new user for his/her name and let the server know
const name = prompt("Enter your name to join");
socket.emit("new-user-joined", name);

// If a new user joins, receive his/her name from the server
socket.on("user-joined", (name) => {
  append(`${name} joined the chat`, "right");
});

// If server sends a message, receive it
socket.on("receive", (data) => {
  append(`${data.name}: ${data.message}`, "left");
});

// If a user leaves the chat, append the info to the container
socket.on("left", (name) => {
  append(`${name} left the chat`, "right");
});

// If the form gets submitted, send server the message
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const message = messageInput.value;
  append(`You: ${message}`, "right");
  socket.emit("send", message);
  messageInput.value = "";
});

Css code here 👇


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
* {
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background-image: linear-gradient(#fff, hsla(211, 100%, 50%, 0.911));
}

.logo {
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
}
h1 {
  margin-top: 12px;
  font-size: 30px;
  text-align: center;
}
.container {
  max-width: 955px;
  border: 2px solid black;
  border-radius: 13px;
  margin: auto;
  height: 60vh;
  padding: 33px;
  overflow-y: auto;
  margin-bottom: 23px;
}

.message {
  background-color: rgb(211, 204, 204);
  width: auto;
  padding: 10px;
  margin: 17px 12px;
  border: 2px solid black;
  border-radius: 10px;
  height: auto;
}
.left {
  float: left;
  clear: both;
}

.right {
  float: right;
  clear: both;
}

#send-container {
  display: block;
  margin: auto;
  text-align: center;
  max-width: 1085px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#messageInp {
  width: 80%;
  border: 2px solid black;
  border-radius: 6px;
  height: 34px;
  font-size: 22px;
}

.btn {
  margin: 0 5px;
  width: 9%;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 6px;
  height: 34px;
}
.message .right {
  max-width: 80%;
}
.message .left {
  max-width: 80%;
}

Copy HTML Code here 👇


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChatBrowser</title>
    <script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
    <script defer src="js/client.js"></script>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="icon" type="image/png" href="chat1.png" />
  </head>
  <body>
    <nav>
      <img class="logo" src="chat1.png" alt="" />
      <h1>Welcome to ChatBrowser</h1>
    </nav>
    <div class="container"></div>
    <div class="send">
      <form action="#" id="send-container">
        <input type="text" name="messageInp" id="messageInp" />
        <input type="text" readonly value="" />
        <button class="btn" type="submit">Send</button>
      </form>
    </div>
  </body>
</html>" />

Chat App |

1 Comments

Contact Form