【问题标题】:Is it possible to build a chatroom strictly with html? [closed]是否可以严格使用 html 建立聊天室? [关闭]
【发布时间】:2026-02-09 14:45:01
【问题描述】:

这是我的代码,使用 PHP 和 jquery。这是我的网站http://bubblewschat.com。我遇到的部分问题是代码显示在已发布的网站上。如何删除它,是否可以严格使用 html 构建聊天室?

<div id="page-wrap"> 
 <h2>Let's talk</h2> 
 <p id="name-area"></p> 
 <div id="chat-wrap"> 
  <div id="chat-area"></div> 
 </div> 
 <form id="send-message-area"> 
  <p>Your message: </p> 
  <textarea id="sendie" maxlength="100"></textarea> 
 </form>
</div>function Chat () { this.update = updateChat; this.send = sendChat; this.getState = getStateOfChat;}//gets the state of the chatfunction getStateOfChat() { if(!instanse){ instanse = true; $.ajax({ type: &quot;POST&quot;, url: &quot;process.php&quot;, data: {'function': 'getState', 'file': file}, dataType: &quot;json&quot;, success: function(data) {state = data.state;instanse = false;} }); } }//Updates the chatfunction updateChat() { if(!instanse){ instanse = true; $.ajax({ type: &quot;POST&quot;, url: &quot;process.php&quot;, data: {'function': 'update','state': state,'file': file}, dataType: &quot;json&quot;, success: function(data) { if(data.text){ for (var i = 0; i &lt; data.text.length; i++) { $('#chat-area').append($(&quot; &quot;+ data.text[i] +&quot; &quot;)); } } document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight; instanse = false; state = data.state; } }); } else { setTimeout(updateChat, 1500); }}//send the messagefunction sendChat(message, nickname) { updateChat(); $.ajax({ type: &quot;POST&quot;, url: &quot;process.php&quot;, data: {'function': 'send','message': message,'nickname': nickname,'file': file}, dataType: &quot;json&quot;, success: function(data){ updateChat(); } });}
<!--?php    $function = $_POST['function'];        $log = array();        switch($function) {           case('getState'):           if (file_exists('chat.txt')) {               $lines = file('chat.txt');           }           $log['state'] = count($lines);            break;               case('update'):          $state = $_POST['state'];          if (file_exists('chat.txt')) {             $lines = file('chat.txt');          }          $count =  count($lines);          if ($state == $count){             $log['state'] = $state;             $log['text'] = false;          } else {             $text= array();             $log['state'] = $state + count($lines) - $state;             foreach ($lines as $line_num =--> $line) { if ($line_num &gt;= $state){ $text[] = $line = str_replace(&quot;\n&quot;, &quot;&quot;, $line); } } $log['text'] = $text; } break; case('send'): $nickname = htmlentities(strip_tags($_POST['nickname'])); $reg_exUrl = &quot;/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/&quot;; $message = htmlentities(strip_tags($_POST['message'])); if (($message) != &quot;\n&quot;) { if (preg_match($reg_exUrl, $message, $url)) { $message = preg_replace($reg_exUrl, '
<a href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message); } fwrite(fopen('chat.txt', 'a'), &quot;
<span>&quot;. $nickname . &quot;</span>&quot; . $message = str_replace(&quot;\n&quot;, &quot; &quot;, $message) . &quot;\n&quot;); } break; } echo json_encode($log);?&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="chat.js"></script>
<script>  // ask user for name with popup prompt      var name = prompt("Enter your chat name:", "Guest");   // default name is 'Guest'  if (!name || name === ' ') {    name = "Guest";    }    // strip tags  name = name.replace(/(<([^>]+)>)/ig,"");    // display name on page  $("#name-area").html("You are: <span>" + name + "</span>");    // kick off chat  var chat =  new Chat();  $(function() {       chat.getState();           // watch textarea for key presses     $("#sendie").keydown(function(event) {                var key = event.which;              //all keys including return.           if (key >= 33) {                        var maxLength = $(this).attr("maxlength");               var length = this.value.length;                            // don't allow new content if length is maxed out             if (length >= maxLength) {                   event.preventDefault();               }           }                                                                                                       });     // watch textarea for release of key press     $('#sendie').keyup(function(e) {                          if (e.keyCode == 13) {                       var text = $(this).val();              var maxLength = $(this).attr("maxlength");                var length = text.length;                              // send               if (length <= maxLength + 1) {                 chat.send(text, name);                  $(this).val("");              } else {                $(this).val(text.substring(0, maxLength));              }          }     });  });</script>

【问题讨论】:

  • 能否正确格式化您的代码?我们现在根本无法阅读/理解它。
  • 您的代码有很多问题。其中之一是您在最后一个&lt;/div&gt; 之后忘记了&lt;script type="text/javascript"&gt;。建议清理它并发布jsfiddle 链接。

标签: php jquery html


【解决方案1】:

Is it possible to build a chatroom strictly with html?

没有。

聊天室是一个交互式网站,它接收来自多个用户的输入并将其显示给多个用户。因此,它需要一些能够做到这一点的代码。

html 不是编程语言。它是一种标记语言 - 即它有代码,您可以使用它来告诉浏览器“这段文本是一个段落”......但这就是它的范围。

要编写聊天室,您需要使用 PHP/javascript/ruby 等工具...这意味着它必须由实际运行 PHP 的服务器/浏览器运行。 .

【讨论】:

    【解决方案2】:

    $url[0]你必须将你的$variables声明包装在这样的php标签中 &lt;?php声明?&gt;

    这将告诉您的服务器将代码解释为 Php。关于您的问题,您可以使用 Html AND Ajax(异步 JavaScript 和 XML)构建聊天室。

    由于 php 是在服务器端呈现的,因此您将需要 Ajax 来调用以发布消息、轮询接收到的消息并显示消息。

    【讨论】:

    • function chat() ... 似乎是一些 Javascript 代码顺便说一句,而不是 PHP。