So, basically, I have created a basic chat app using html, css, and javascript. I am also using SocketIO, so that I can make the chat app real-time. The problem is, I am not able to figure out how I can make this chat app two – way, Ie, a user can only connect with one other user. Right now, everyone can connect with each other.
Here is the sample html code and the javascript code. :
NOTE: I am running this with node server.js to run my program. :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class="app">
<div class="screen join-screen active">
<div class="form">
<h2>Join Chatroom</h2>
<div class="form-input">
<label>Username</label>
<input type = "text" id = "username"/>
</div>
<div class="form-input">
<button id="join-user">Join</button>
</div>
</div>
</div>
<div class="screen chat-screen">
<div class="header">
<div class="logo">Chatroom</div>
<button id = "exit-chat">Exit</button>
</div>
<div class="messages">
<!--all of the message will appear here!-->
</div>
<div class="typebox">
<input type = "text" id = "message-input"/>
<button id="send-message">Send</button>
</div>
</div>
</div>
<script type = "text/javascript" src = "socket.io/socket.io.js"></script>
<script type = "text/javascript" src="code.js"></script>
</body>
</html>
(function() {
const app = document.querySelector(".app");
const socket = io();
let uname;
app.querySelector(".join-screen #join-user").addEventListener("click", function() {
let username = app.querySelector(".join-screen #username").value;
if (username.length == 0) {
return;
}
socket.emit("newuser", username);
uname = username;
app.querySelector(".join-screen").classList.remove("active");
app.querySelector(".chat-screen").classList.add("active");
});
app.querySelector(".chat-screen #send-message").addEventListener("click", function() {
let message = app.querySelector(".chat-screen #message-input").value;
if (message.length == 0) {
return;
}
renderMessage("my", {
username:uname,
text:message
})
socket.emit("chat", {
username:uname,
text:message
})
app.querySelector(".chat-screen #message-input").value = "";
});
app.querySelector(".chat-screen #exit-chat").addEventListener("click", function() {
socket.emit("exituser", uname);
window.location.href = window.location.href;
})
socket.on("update",function(update) {
renderMessage("update", update);
})
socket.on("chat",function(message) {
renderMessage("other", message);
})
function renderMessage(type,message) {
let messageContainer = app.querySelector(".chat-screen .messages");
console.log(type)
if (type == "my") {
let el = document.createElement("div");
el.setAttribute("class","message my-message");
el.innerHTML = `<div>
<div class = "name">You</div>
<div class = "text">${message.text}</div>
</div>`;
messageContainer.appendChild(el);
} else if (type == "other") {
let el = document.createElement("div");
el.setAttribute("class","message other-message");
el.innerHTML = `<div>
<div class = "name">${message.username}</div>
<div class = "text">${message.text}</div>
</div>`;
messageContainer.appendChild(el);
} else if (type == "update") {
let el = document.createElement("div");
el.setAttribute("class","update");
el.innerHTML = message;
messageContainer.appendChild(el);
}
//scroll the chat to the end.
messageContainer.scrollTop = messageContainer.scrollHeight - messageContainer.clientHeight;
};
})();
I appreciate any pointers and/or tips you may give.
Honestly, I do not have that much internet knowledge, so, I was pretty clueless on how to go about this.
