当前位置: 首页 > news >正文

软件工程学习日志2025.10.21

项目概述

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

技术架构

前端技术栈

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

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

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

• 数据格式: JSON

项目结构

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

核心功能实现

  1. 用户界面设计

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

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

• 开发者信息展示(张三 | 学号:20230001)

• 实时连接状态指示器

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

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

• 自动滚动至最新消息

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

• 文字发送按钮

• 图片上传功能

  1. 消息处理机制

文本消息处理
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);

}

  1. 通信模拟实现

由于实际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%

  1. 用户体验优化

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

• 支持Enter键快速发送

• 实时滚动至最新消息

• 连接状态视觉反馈

  1. 数据管理

• 使用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. 模拟开发:在没有后端支持的情况下进行前端功能验证

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

http://www.hskmm.com/?act=detail&tid=36137

相关文章:

  • [PaperReading] DeepSeek-OCR: Contexts Optical Compression
  • Win10安装WindowsCamera相机
  • 简易的本地部署OI-Wiki方法 for CCSP
  • Say 题选记 (10.19 - 10.25)
  • 宝塔面板
  • React Native 启动流程 (Android版)
  • 以TrustedInstaller/System用户运行软件
  • 10月21号
  • 机器学习基础 -- 线性回归模型
  • 泰勒展开
  • MySQL 创建和授权用户
  • 因果机器学习算法新进展解析
  • 软件工程作业三
  • CF2127 Atto Round 1 (Codeforces Round 1041, Div. 1 + Div. 2) 游记(VP)
  • 一键生成爆款文章,并自动发布!
  • 机器学习到深度学习发展历程
  • Java数据类型
  • [CF 516 E] Drazil and His Happy Friends
  • NVIDIA Triton服务器漏洞危机:攻击者可远程执行代码,AI模型最高权限告急
  • 2025-10-21
  • 个人骗分导论
  • Java三大特性
  • 高级程序设计第二次作业
  • 10月21日日记
  • home-assistant.-Adding integrations
  • Windows系统内存占用过高,且任务管理器找不到对应进程
  • NOIP 二十五
  • 理想婚姻
  • equal和hashcode
  • Ancestral Problem 题解