PHP微信风格实时聊天系统

# 微信风格实时聊天系统

 

一个基于PHP、WebSocket和MySQL的实时聊天应用，具有群聊、私聊、消息历史记录等功能。

 

## 功能特性

 

– 实时群聊与私聊

– 在线用户列表

– 消息历史记录（永久保存，支持刷新恢复）

– 支持文本、图片、视频消息

– 用户自定义颜色

– 响应式设计，支持移动端

– 消息已读状态追踪

– 智能时间显示（今天只显示时间，非今天显示完整日期）

– 私聊会话状态本地存储（刷新页面自动恢复）

– 优化的用户体验（无白屏，聊天记录自动加载）

 

## 环境要求

 

– PHP 7.4+

– MySQL 5.7+

– 支持WebSocket的浏览器

– Apache或Nginx服务器

 

## 安装步骤

 

### 1. 数据库配置

 

1. 创建MySQL数据库：

   “`sql

   CREATE DATABASE chat CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

   “`

 

2. 导入数据库结构：

   “`bash

   mysql -u root -p chat < chat.sql

   “`

 

3. 修改数据库连接配置（`core/db.php`）：

   “`php

   $dbConfig = [

       ‘host’ => ‘localhost’, // 数据库主机

       ‘dbname’ => ‘chat’, // 数据库名

       ‘username’ => ‘root’, // 数据库用户名

       ‘password’ => ”, // 数据库密码

       ‘charset’ => ‘utf8mb4’ // 字符集

   ];

   “`

 

### 2. 启动服务

 

1. 启动WebSocket服务器（命令行执行）：

   “`bash

   php ws_server.php

   “`

 

2. 启动Web服务器（如使用PHP内置服务器）：

   “`bash

   php -S localhost:8000

   “`

 

3. 访问 `http://localhost:8000` 即可使用聊天系统

 

## 使用说明

 

1. 首次访问时需要设置用户名和颜色

2. 用户ID会自动生成6位数字

3. 可以在群聊和私聊之间切换

4. 支持发送文本、图片、视频消息

5. 点击在线用户可发起私聊

6. 私聊会话会自动保存，刷新页面后会自动恢复

7. 聊天记录时间显示智能优化：

   – 今天的消息只显示时间（HH:MM）

   – 非今天的消息显示完整日期和时间（YYYY年MM月DD日 HH:MM）

8. 首次登录时聊天记录会自动加载，无白屏体验

 

## 文件结构

 

“`

├── core/ # 核心配置

│ └── db.php # 数据库连接配置

├── models/ # 数据模型

│ ├── ConfigModel.php

│ ├── MessageModel.php

│ ├── OnlineUserModel.php

│ └── UserModel.php

├── media/ # 上传的媒体文件

├── ws_server.php # WebSocket服务器

├── index.php # 前端页面

├── script.js # 前端JavaScript

├── styles.css # 样式文件

├── upload.php # 文件上传处理

└── chat.sql # 数据库结构文件

“`

 

## 注意事项

 

1. 确保 `media/` 目录有写入权限

2. WebSocket服务器默认监听8080端口

3. 生产环境建议配置SSL证书

4. 定期清理数据库中的过期数据

5. 生产环境中使用Nginx时，需要配置WebSocket代理：

   “`nginx

   location /ws {

        proxy_pass http://127.0.0.1:8443;

        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;

        proxy_set_header Connection “upgrade”;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_cache_bypass $http_upgrade;

        proxy_read_timeout 600s;

   }

   “`

   注意：根据实际情况修改`proxy_pass`中的端口和地址

 

## 常见问题

 

1. **WebSocket连接失败**：检查端口是否被占用，防火墙设置

2. **数据库连接失败**：检查数据库配置，确保PDO和pdo_mysql扩展已启用

3. **文件上传失败**：检查 `media/` 目录权限，确认上传大小限制