jQuery库来处理用户交互和向服务器发送异步请求,当提交按钮被点击时,通过Ajax将聊天内容提交到服务器;同时,每秒钟轮询一次服务器,从服务器获取最新的聊天消息并显示在页面上。

html

<!DOCTYPE html>
<html>
<head>
  <title>聊天室</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chat-container"></div>
  <form>
    <input type="text" id="chat-input" placeholder="输入聊天内容">
    <button type="submit" id="chat-submit">发送</button>
  </form>
  
  <script>
  $(document).ready(function() {
    // 当提交按钮被点击时,向服务器提交聊天内容
    $('#chat-submit').click(function(e) {
      e.preventDefault();
      var chatInput = $('#chat-input').val();
      $.ajax({
        url: 'chat.php',
        type: 'POST',
        data: {message: chatInput},
        success: function(response) {
          // 成功发送聊天消息后,清空输入框
          $('#chat-input').val('');
        }
      });
    });
    
    // 定时从服务器获取新的聊天消息
    setInterval(function() {
      $.ajax({
        url: 'chat.php',
        type: 'GET',
        success: function(response) {
          // 将获取到的聊天消息添加到聊天容器中
          $('#chat-container').html(response);
        }
      });
    }, 1000); // 每秒钟轮询一次
  });
  </script>
</body>
</html>

创建一个chat.php文件,在其中实现聊天室服务器的逻辑。

php

<?php

// 判断当前请求是GET还是POST
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  // 处理POST请求,即发送聊天消息
  $message = htmlspecialchars($_POST['message']);
  if (!empty($message)) {
    // 将聊天消息存储到文本文件中
    $file = fopen('chatlog.txt', 'a');
    fwrite($file, $message . PHP_EOL);
    fclose($file);
  }
} else {
  // 处理GET请求,即获取聊天记录
  $chatlog = file_get_contents('chatlog.txt');
  echo nl2br($chatlog); // 将换行符转换为HTML标签
}

?>

当接收到POST请求时,将消息内容存储到文本文件中。
当接收到GET请求时,从文本文件中读取所有聊天记录,并将其返回给浏览器。
使用nl2br()函数将每个聊天消息中的换行符转换为HTML标签,以便在页面上正常显示。

可以使用web服务器(如Apache、Nginx等)来向外提供服务,也可以直接使用内置的PHP web服务器(在命令行中运行php -S localhost:8000即可)。