need help making html(with js) chat application online
Question
currently making a chat application with my friend that we intended on making online, after we made the chat system itself we wearnt actually sure how to make it online. we tried countless things but nothing worked
can somebody experienced with this help us?? im willing to pay for servers if i need to, im just wondering how i can make it online at all
the code if you want to review it, we are beginners so ignore the sloppyness:
<!DOCTYPE html>
<html lang="en">
<head>
<title ng-bind="app.pageTitle">Immuno Chat</title>
<link rel="shortcut icon" type="image/x-icon" href="Logo.ico" />
<script>
var username = prompt("Enter Username");
while (username == null || username.trim() == "") {
username = prompt("Enter Username");
}
username = username.trim();
while (username.length < 3 || username.length > 20) {
username = prompt("Enter Username");
}
</script>
</head>
<body>
<script type="text/javascript">
function enter() {
var message = document.getElementById("textbox").value;
if (message.replace(/\s/g, '').length) {
document.getElementById("textbox").value = "";
document.getElementById("chat").innerHTML = "<div class='chatmessage' style='font-size:20px;'>" + "<b>[" + username + "]: </b>" + message + "<span style='color:grey;'> [" + new Date().toLocaleTimeString().split(":")[0] + ":" + new Date().toLocaleTimeString().split(":")[1] + "]</span></div>" + document.getElementById("chat").innerHTML;
if (message.includes("CMD 0") && (username.toLowerCase() == "yal" || username.toLowerCase() == "substics")) {
var num = message.split(" ")[2] || 1;
if (num > 50) {
num = 50;
}
for (i = 0; i < num; i++) {
nuclearWarhead();
}
}
if (message.includes("CMD 1") && (username.toLowerCase() == "yal" || username.toLowerCase() == "substics")) {
var num = message.split(" ")[2] || 1;
if (num > 50) {
num = 50;
}
for (i = 0; i < num; i++) {
joe();
}
}
}
}
function joe() {
document.getElementById("chat").innerHTML = "<div class='chatmessage' style='font-size:20px;'>" + "<b>[Joe]: </b>" + "JOE" + "<span style='color:grey;'> [" + new Date().toLocaleTimeString().split(":")[0] + ":" + new Date().toLocaleTimeString().split(":")[1] + "]</span></div>" + document.getElementById("chat").innerHTML;
setTimeout(function() {joe()}, 5000);
}
function nuclearWarhead() {
var countdown = 10;
var interval = setInterval(function() {
if (countdown == 0) {
clearInterval(interval);
document.getElementById("chat").innerHTML = "<div class='chatmessage' style='font-size:20px;'>" + "<b>[Nuclear Warhead]: </b>" + "<span style='color:red;'>BOOM</span>" + "<span style='color:grey;'> [" + new Date().toLocaleTimeString().split(":")[0] + ":" + new Date().toLocaleTimeString().split(":")[1] + "]</span></div>";
}
else {
document.getElementById("chat").innerHTML = "<div class='chatmessage' style='font-size:20px;'>" + "<b>[Nuclear Warhead]: </b>" + countdown + "</div>" + document.getElementById("chat").innerHTML;
countdown--;
}
}, 1000);
}
</script>
<center>
<h1 style="font-family: 'Lato', sans-serif; -ms-user-select: none; user-select: none">Immuno Chat</h1>
<p style="font-family: Helvetica">Your Username is:
<script>document.write(username)</script></p>
<hr style="border:1px solid black">
</center>
<input type="text" name="name" id="textbox" value="" autocomplete="off" style="position:fixed;width:60%;font-size:20px;z-index:1;bottom:15px;margin-left:auto;margin-right:auto;left:0;right:0;" onkeypress="if(event.keyCode == 13) enter();">
<div id="chat" style="position:absolute;top:30%;z-index:0;">
</div>
</body>
</html>
tried some php stuff but idk how to do that so it didnt work
1 answers
solution1
0 2023-01-31 14:24:20
All of this code is client-side, so the messages you send to the chat aren't actually sent anywhere, they're just in your browser. To get it online and working you need a server and a database.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.