简体   繁体   English

需要帮助在线制作 html(带 js)聊天应用程序

[英]need help making html(with js) chat application online

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尝试了一些 php 的东西,但不知道该怎么做,所以它没有用

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.要使其联机运行,您需要一台服务器和一个数据库。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM