使用PHP 的在线群聊应用程序(1)

📌 相关文章

📜 使用PHP 的在线群聊应用程序(1)

📅 最后修改于: 2023-12-03 15:06:52.890000 🧑 作者: Mango

使用PHP的在线群聊应用程序

本文将介绍如何使用PHP开发一个简单的在线群聊应用程序。我们将使用PHP、MySQL和AJAX技术来实现该应用程序。

简介

该在线群聊应用程序将允许多个用户在线聊天。用户可以在聊天室中发送消息、查看在线用户列表等等。

技术栈

PHP
MySQL
AJAX
HTML/CSS/JavaScript
Bootstrap框架

实现步骤

步骤1：创建数据库

我们首先需要创建一个MySQL数据库来保存用户信息和聊天记录。可以使用以下SQL命令创建数据库和相应的表：

CREATE DATABASE IF NOT EXISTS chat_db;
USE chat_db;

CREATE TABLE IF NOT EXISTS users (
  id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) NOT NULL,
  password VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS messages (
  id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  user_id INT(11) NOT NULL,
  username VARCHAR(255) NOT NULL,
  message TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

这个SQL语句将创建一个名为chat_db的数据库，其中包含两个表：users和messages。

步骤2：创建PHP文件

我们需要创建以下PHP文件：

config.php - 用于存储数据库连接信息和其他常量。
database.php - 用于连接数据库并执行SQL查询。
functions.php - 用于定义常用函数。
index.php - 用于显示登录页面和处理用户登录请求。
chat.php - 用于显示聊天页面和处理聊天消息。

`config.php`

<?php

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'chat_db');

// 创建数据库连接
$conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

if ($conn === false) {
  die('无法连接到数据库：' . mysqli_connect_error());
}

`database.php`

<?php

require_once 'config.php';

function db_query($sql) {
  global $conn;

  $result = mysqli_query($conn, $sql);

  if (!$result) {
    die('数据库查询错误：' . mysqli_error($conn));
  }

  return $result;
}

`functions.php`

<?php

require_once 'database.php';

// 检查用户名和密码是否匹配
function check_login($username, $password) {
  $sql = "SELECT id FROM users WHERE username='$username' AND password='$password'";
  $result = db_query($sql);
  return mysqli_num_rows($result) > 0;
}

// 获取用户ID
function get_user_id($username) {
  $sql = "SELECT id FROM users WHERE username='$username'";
  $result = db_query($sql);
  $row = mysqli_fetch_assoc($result);
  return $row['id'];
}

// 获取用户名
function get_username($user_id) {
  $sql = "SELECT username FROM users WHERE id='$user_id'";
  $result = db_query($sql);
  $row = mysqli_fetch_assoc($result);
  return $row['username'];
}

// 获取所有用户列表
function get_users() {
  $sql = "SELECT username FROM users";
  $result = db_query($sql);
  
  $users = array();
  while ($row = mysqli_fetch_assoc($result)) {
    $users[] = $row['username'];
  }

  return $users;
}

// 获取最新的消息记录
function get_messages($last_id) {
  $sql = "SELECT * FROM messages WHERE id > '$last_id'";
  $result = db_query($sql);
  
  $messages = array();
  while ($row = mysqli_fetch_assoc($result)) {
    $messages[] = $row;
  }

  return $messages;
}

`index.php`

<?php

require_once 'config.php';
require_once 'functions.php';

// 处理登录请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $username = $_POST['username'];
  $password = $_POST['password'];

  if (check_login($username, $password)) {
    // 登录成功，跳转到聊天页面
    session_start();
    $_SESSION['username'] = $username;
    header('Location: chat.php');
    exit();
  } else {
    // 登录失败，显示错误消息
    $error = '用户名或密码错误';
  }
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container pt-5">
      <div class="row justify-content-center">
        <div class="col-md-4">
          <h4 class="text-center">登录</h4>
          <?php if (isset($error)): ?>
            <div class="alert alert-danger"><?php echo $error; ?></div>
          <?php endif; ?>
          <form method="post">
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" class="form-control" id="username" name="username" required>
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

`chat.php`

<?php

session_start();
if (!isset($_SESSION['username'])) {
  // 如果用户未登录，重定向到登录页面
  header('Location: index.php');
  exit();
}

require_once 'config.php';
require_once 'functions.php';

// 处理提交的聊天消息
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $user_id = get_user_id($_SESSION['username']);
  $username = $_SESSION['username'];
  $message = $_POST['message'];

  $message = mysqli_real_escape_string($conn, $message);

  $sql = "INSERT INTO messages (user_id, username, message) VALUES ('$user_id', '$username', '$message')";
  db_query($sql);
}

?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>在线群聊</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="container pt-5">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <h4 class="text-center mb-4">在线群聊</h4>
          <div class="row">
            <div class="col-md-3 border-right">
              <h5 class="mb-3">在线用户</h5>
              <ul class="list-unstyled" id="userList"></ul>
            </div>
            <div class="col-md-9">
              <div class="card mb-4">
                <div class="card-header">聊天室</div>
                <div class="card-body p-0" id="messages"></div>
                <div class="card-footer">
                  <form method="post">
                    <div class="input-group">
                      <input type="text" class="form-control" id="messageInput" name="message" placeholder="输入消息" required>
                      <div class="input-group-append">
                        <button type="submit" class="btn btn-primary">发送</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      // 定义变量
      var lastMessageId = 0;
      
      // 显示所有在线用户
      function showUsers() {
        setInterval(function() {
          $.get('get_users.php', {}, function(data) {
            var html = '';
            $.each(data, function(index, value) {
              html += '<li>' + value + '</li>';
            });
            $('#userList').html(html);
          }, 'json');
        }, 1000);
      }

      // 显示所有消息记录
      function showMessages() {
        setInterval(function() {
          $.get('get_messages.php?last_id=' + lastMessageId, {}, function(data) {
            var html = '';
            $.each(data, function(index, value) {
              html += '<div class="py-2 px-3"><strong>' + value.username + '：</strong> ' + value.message + '</div>';
              lastMessageId = value.id;
            });
            $('#messages').append(html);
          }, 'json');
        }, 1000);
      }

      $(document).ready(function() {
        showUsers();
        showMessages();        
      });
    </script>
  </body>
</html>

步骤3：创建AJAX文件

我们需要创建两个PHP文件来返回在线用户列表和最新的聊天消息：

`get_users.php`

<?php

require_once 'config.php';
require_once 'functions.php';

// 获取所有在线用户
$users = get_users();

header('Content-Type: application/json');
echo json_encode($users);

`get_messages.php`

<?php

require_once 'config.php';
require_once 'functions.php';

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
  if (isset($_GET['last_id'])) {
    // 获取最新的消息记录
    $last_id = $_GET['last_id'];
    $messages = get_messages($last_id);

    header('Content-Type: application/json');
    echo json_encode($messages);
  }
}

总结

通过本文的介绍，我们学习了如何使用PHP、MySQL和AJAX技术来实现一个简单的在线群聊应用程序。在实际开发中，我们可以根据具体需求对程序进行修改和扩展，以满足更多的功能需求。