How to develop a simple online chat room using PHP

How to develop a simple online chat room using PHP?

With the rapid development of the Internet, communication between people is increasingly dependent on the Internet. As a common social tool, online chat rooms have become an indispensable part of people's daily lives. In this article, we will introduce how to use PHP language to develop a simple online chat room and give specific code examples.

1. Preliminary preparation
   Before you start, make sure that the PHP running environment and Apache server have been installed on your computer. You can build a PHP development environment through tools such as XAMPP or WAMP. At the same time, you also need to know basic HTML, CSS and JavaScript knowledge.

2. Create database and table
   First, create a table in your database to store chat records. You can use the following SQL statement to create a table:

   CREATE TABLE chat (
     id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
     username VARCHAR(30) NOT NULL,
     message TEXT NOT NULL,
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   )

   This table contains an auto-incremented ID, the sender's user name, the message content and the time when the message was sent.

3. Create a chat page
   Create a file named index.php in your project directory. This file will serve as our chat page. Import the following styles and scripts in the file:

   <link rel="stylesheet" href="style.css">
   <script src="jquery.min.js"></script>
   <script src="script.js"></script>

   In the page, create a div element to display the chat history:

   <div id="chat-box"></div>

   At the same time, add a form for entering the username and sending messages:

   <form id="chat-form">
     <input type="text" id="username" placeholder="用户名" required>
     <input type="text" id="message" placeholder="消息" required>
     <button type="submit">发送</button>
   </form>

4. Write back-end processing code
   Create a file named chat.php in the same directory to handle the storage and reading of chat records. First, connect to the database:

   <?php
   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "chatroom";
   
   $conn = new mysqli($servername, $username, $password, $dbname);
   if ($conn->connect_error) {
     die("连接失败: " . $conn->connect_error);
   }
   ?>

   Next, write a function for saving messages:

   <?php
   function saveMessage($username, $message)
   {
     global $conn;
     
     $sql = "INSERT INTO chat (username, message) VALUES ('$username', '$message')";
     
     if ($conn->query($sql) === TRUE) {
    return true;
     } else {
    return false;
     }
   }
   ?>

   Then, create a function for getting chat records:

   <?php
   function getChatHistory()
   {
     global $conn;
     
     $sql = "SELECT * FROM chat";
     $result = $conn->query($sql);
     
     if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
      echo "<p>{$row['username']}: {$row['message']}</p>";
    }
     }
   }
   ?>

   Finally, add the following code to the chat.php file to process the form data sent by the front end:

   <?php
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
     $username = $_POST["username"];
     $message = $_POST["message"];
     
     if (saveMessage($username, $message)) {
    echo "消息发送成功！";
     } else {
    echo "消息发送失败！";
     }
   }
   ?>

5. Writing the front-end script
   Create a file named script in the project directory. js file, used to send form data and obtain chat records. Use jQuery's ajax method to process:

   $(document).on("submit", "#chat-form", function(e) {
     e.preventDefault();
     
     var username = $("#username").val();
     var message = $("#message").val();
     
     $.ajax({
    url: "chat.php",
    method: "POST",
    data: { username: username, message: message },
    success: function(response) {
      $("#message").val("");
    }
     });
   });
   
   function getChatHistory() {
     $.ajax({
    url: "chat.php",
    method: "GET",
    success: function(response) {
      $("#chat-box").html(response);
    }
     });
   }
   
   setInterval(getChatHistory, 1000);

6. Writing style
   Create a file named style.css in the project directory to set the style of the chat page:

   body {
     background: #f2f2f2;
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
   }
   
   #chat-box {
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
     height: 200px;
     margin: 20px auto;
     overflow: auto;
     padding: 10px;
     width: 400px;
   }
   
   #chat-form {
     display: flex;
     margin: 0 auto;
     width: 400px;
   }
   
   #chat-form input[type="text"] {
     flex: 1;
     padding: 5px;
   }

7. Run the project
   Open the index.php file in your browser. You can now enter your username and send messages. Your messages will be stored in the database and displayed on the chat page in real time.

Through the above steps, we developed a simple online chat room using PHP. Of course, this is just an entry-level implementation, and you can further develop and optimize it according to your own needs. Hope this article can be helpful to you!

The above is the detailed content of How to develop a simple online chat room using PHP. For more information, please follow other related articles on the PHP Chinese website!