如何使用PHP開發簡單的線上聊天室-php教程-PHP中文網

如何使用PHP開發簡單的線上聊天室

王林

發布： 2023-09-21 08:40:01

原創

1186 人瀏覽過

如何使用PHP開發簡單的線上聊天室

如何使用PHP開發簡單的線上聊天室？

隨著網路的快速發展，人們之間的交流也越來越依賴網路。線上聊天室作為一種常見的社交工具，已成為人們日常生活中不可或缺的一部分。在本文中，我們將介紹如何使用PHP語言開發一個簡單的線上聊天室，並給出具體的程式碼範例。

前期準備
在開始之前，確保你的電腦上已經安裝了PHP運作環境以及Apache伺服器。你可以透過XAMPP或WAMP等工具來建構PHP開發環境。同時，你也需要了解基本的HTML、CSS和JavaScript知識。
建立資料庫和表格
首先，在你的資料庫中建立一個用於儲存聊天記錄的表。可以使用如下的SQL語句來建立表格：
```
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
)
```
登入後複製
這個表包含了一個自增的ID，發送者的使用者名，訊息內容以及訊息發送的時間。
建立聊天頁面
在你的專案目錄下建立一個名為index.php的文件，這個文件將作為我們的聊天頁面。在檔案中匯入以下樣式和腳本：
```
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="script.js"></script>
```
登入後複製
在頁面中，建立一個div元素用於顯示聊天記錄：
```
<div id="chat-box"></div>
```
登入後複製
同時，新增一個表單用於輸入使用者名稱和傳送訊息：
```
<form id="chat-form">
  <input type="text" id="username" placeholder="用户名" required>
  <input type="text" id="message" placeholder="消息" required>
  <button type="submit">发送</button>
</form>
```
登入後複製

編寫後端處理程式碼
在同一級目錄下建立一個名為chat.php的文件，用於處理聊天記錄的儲存和讀取操作。首先，連接資料庫：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chatroom";

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

登入後複製

接下來，編寫一個用於保存訊息的函數：

<?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;
  }
}
?>

登入後複製

然後，建立一個用於取得聊天記錄的函數：

<?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>";
 }
  }
}
?>

登入後複製

最後，在chat.php檔案中加入以下程式碼用於處理前端發送過來的表單資料：

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

登入後複製

編寫前端腳本
在專案目錄下建立一個名為script. js的文件，用於發送表單資料並取得聊天記錄。使用jQuery的ajax方法來處理：

$(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);

登入後複製

編寫樣式
在專案目錄中建立一個名為style.css的文件，用於設定聊天頁面的樣式：

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;
}

登入後複製