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.
What if... instead of using Node you used Deno from the same creators of Node? You also don't need socket.io either.
They literally have a simple and complete guide on their web site at the link below: