# NexusChat-Web

**Repository Path**: starlight-apk/NexusChat-Web

## Basic Information

- **Project Name**: NexusChat-Web
- **Description**: NexusChat Server 官方 Web 前端 - 零依赖纯原生 JavaScript
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-14
- **Last Updated**: 2026-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NexusChat Web

<div align="center">

**NexusChat Server 官方 Web 前端**

零依赖 · 纯原生 JavaScript · 现代化 UI

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Platform](https://img.shields.io/badge/platform-Any%20Browser-green.svg)](./index.html)

</div>

---

## 📖 项目说明

NexusChat Web 是 NexusChat Server 的官方 Web 前端项目，采用纯原生 JavaScript 开发，**零依赖**任何框架或库。

### ✨ 特性

- 🚀 **零依赖** - 无需 npm、webpack，开箱即用
- 💬 **实时聊天** - WebSocket 实时通信
- 🏠 **房间功能** - 创建和加入聊天房间
- 👥 **用户列表** - 查看在线用户
- 🎨 **现代 UI** - 深色主题 + 渐变效果
- 📱 **响应式** - 支持移动端

---

## 🚀 快速开始

### 方式一：使用 Python 内置服务器

```bash
# Python 3
cd NexusChat-Web
python3 -m http.server 8080

# 访问 http://localhost:8080
```

### 方式二：使用部署脚本

```bash
# 启动 Web 服务器
./scripts/start-web.sh
```

### 方式三：直接打开

```bash
# 直接双击打开 index.html
# 注意：WebSocket 可能需要修改为 http 协议
```

---

## 📁 项目结构

```
NexusChat-Web/
├── index.html      # 主页面
├── css/
│   └── style.css   # 样式表
├── js/
│   └── app.js      # 应用逻辑
├── assets/         # 资源文件
└── README.md       # 说明文档
```

---

## ⚙️ 配置

编辑 `js/app.js` 中的服务器地址：

```javascript
this.serverUrl = 'ws://localhost:5222';
```

如果 NexusChat Server 运行在其他地址，请相应修改。

---

## 🎨 界面预览

### 登录界面
- 用户名/密码登录
- 新用户注册
- 美观的渐变效果

### 聊天界面
- 侧边栏导航
- 私聊消息
- 房间群聊
- 在线用户列表

---

## 🔌 与后端连接

确保 NexusChat Server 已启动：

```bash
cd ../NexusChat
python3 main.py
```

然后访问 Web 前端即可自动连接。

---

## 📝 使用说明

1. **登录/注册** - 输入用户名和密码
2. **私聊** - 在消息页面输入用户名开始聊天
3. **创建房间** - 点击房间页面的创建按钮
4. **加入房间** - 点击房间卡片上的加入按钮
5. **群聊** - 加入房间后在消息页面发送

---

## 🛠️ 技术栈

| 技术 | 说明 |
|------|------|
| HTML5 | 语义化结构 |
| CSS3 | 渐变、动画、响应式 |
| JavaScript (ES6+) | 原生实现，无框架 |
| WebSocket | 实时通信 |

---

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

<div align="center">

**Made with ❤️ by NexusChat Team**

[GitHub](https://github.com/Starlight-apk/NexusChat)

</div>