I have given the client side and server side code for a real time chat application. Whenever I am sending a message, it is not being received by the other party. Also , in client.js,
socket.emit("new-user-joined", name);
, in this line, name is shown deprecated. As a result, the feature of giving notification when a person joins is not appearing in the app. Please suggest the solution.
client.js:-
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("sound.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 = "";
});
server.js:-
const io = require("socket.io")(8000);
const users = {};
io.on("connection", (socket) => {
// If any new user joins, let other users connected to the server know!
socket.on("new-user-joined", (name) => {
users[socket.id] = name;
socket.broadcast.emit("user-joined", name);
});
// If someone sends a message, broadcast it to other people
socket.on("send", (message) => {
socket.broadcast.emit("receive", {
message: message,
name: users[socket.id],
});
});
// If someone leaves the chat, let others know
socket.on("disconnect", (message) => {
socket.broadcast.emit("left", users[socket.id]);
delete users[socket.id];
});
});