软件工程学习日志2025.10.21

项目概述

在本次开发任务中，我使用Trae框架成功实现了一个功能完整的即时在线聊天软件。该应用支持文字和图片的实时发送与接收，界面简洁美观，充分体现了现代Web应用的设计理念。

技术架构

前端技术栈

• 核心框架: Trae - 轻量级的HTTP客户端库

• 界面构建: 原生HTML5 + CSS3 + JavaScript

• 通信模拟: 自定义WebSocket模拟类

• 数据格式: JSON

项目结构

chat-app/
├── index.html # 主页面
├── style.css # 样式文件
└── script.js # 业务逻辑

核心功能实现

1. 用户界面设计

界面采用经典的聊天应用布局，分为三个主要区域：

顶部标题栏
• 应用名称"即时聊天室"

• 开发者信息展示（张三 | 学号：20230001）

• 实时连接状态指示器

消息显示区域
• 支持文本和图片消息显示

• 区分发送和接收消息样式

• 自动滚动至最新消息

消息输入区域
• 多行文本输入框

• 文字发送按钮

• 图片上传功能

2. 消息处理机制

文本消息处理
function sendTextMessage() {
const content = messageInput.value.trim();
if (content === '') return;

const message = {type: 'text',sender: currentUser.id,content: content,timestamp: new Date().toISOString()
};displayMessage(message, 'sent');
socket.send(JSON.stringify(message));

}

图片消息处理
function sendImageMessage(file) {
const reader = new FileReader();
reader.onload = function(e) {
const message = {
type: 'image',
sender: currentUser.id,
content: e.target.result,
timestamp: new Date().toISOString()
};

    displayMessage(message, 'sent');socket.send(JSON.stringify(message));
};
reader.readAsDataURL(file);

}

3. 通信模拟实现

由于实际WebSocket服务器部署需要后端支持，本项目实现了MockWebSocket类来模拟实时通信：
class MockWebSocket {
constructor(url) {
// 模拟连接建立
setTimeout(() => {
if (this.onopen) this.onopen({ type: 'open' });
this.updateStatus(true);
}, 1000);
}

send(data) {// 模拟消息接收和自动回复setTimeout(() => {if (this.onmessage) {const response = this.generateResponse(data);this.onmessage({ data: JSON.stringify(response) });}}, 500);
}

}

关键技术亮点

1. 响应式设计

• 使用Flexbox布局确保在不同屏幕尺寸下的良好显示

• 消息气泡自适应宽度，最大宽度限制为70%

2. 用户体验优化

• 消息发送后自动清空输入框

• 支持Enter键快速发送

• 实时滚动至最新消息

• 连接状态视觉反馈

3. 数据管理

• 使用JSON格式进行消息传输

• 为每条消息添加时间戳和发送者信息

• 支持多种消息类型扩展

开发挑战与解决方案

挑战1：实时通信模拟

问题：在没有真实后端服务器的情况下实现消息的实时收发。

解决方案：
• 创建MockWebSocket类模拟WebSocket行为

• 使用setTimeout模拟网络延迟

• 实现自动回复机制展示双向通信效果

挑战2：图片处理

问题：图片文件的读取和显示。

解决方案：
• 使用FileReader API读取图片文件

• 将图片转换为DataURL格式进行传输

• 在前端直接渲染Base64编码的图片

挑战3：状态管理

问题：连接状态和消息状态的实时更新。

解决方案：
• 实现状态指示器组件

• 使用CSS类切换显示不同状态

• 为每条消息添加已读/未读状态（可扩展）

功能扩展建议

本项目为基础版本，可以考虑以下扩展方向：

1. 用户系统：实现用户注册、登录功能
2. 多人群聊：支持多个用户同时在线聊天
3. 消息状态：已发送、已送达、已读状态显示
4. 文件传输：支持多种文件类型发送
5. 消息加密：端到端加密保护隐私
6. 消息记录：本地存储聊天记录
7. 移动端适配：PWA渐进式Web应用

部署与运行

本地运行

1. 创建项目文件夹
2. 将提供的代码保存为对应文件
3. 在浏览器中打开index.html

生产环境部署建议

1. 配置真实的WebSocket服务器（如Socket.IO）
2. 图片上传至云存储服务
3. 启用HTTPS确保安全
4. 添加服务端用户认证

总结

通过本次开发实践，我深入掌握了以下技术：

1. Trae框架的应用：虽然Trae主要用于HTTP请求，但本项目展示了如何将其与其他技术结合使用
2. 前端实时通信：理解了WebSocket通信原理和实现方式
3. 现代CSS布局：Flexbox的实际应用技巧
4. 文件API使用：图片上传和预览的实现方法
5. 模拟开发：在没有后端支持的情况下进行前端功能验证

这个聊天应用虽然简单，但包含了即时通讯软件的核心功能，为后续开发更复杂的企业级应用奠定了坚实基础。项目的模块化设计和清晰的代码结构也体现了良好的软件开发实践。