# 对话-聊天

**Repository Path**: judy6/dialogue---chat

## Basic Information

- **Project Name**: 对话-聊天
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-01
- **Last Updated**: 2025-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 项目

## 项目结构
```
websocket-chat/
├── server/               # 服务端代码
│   ├── server.js         # WebSocket服务器主文件（核心）‌:ml-citation{ref="2,3" data="citationList"}
│   └── config.js         # 端口等配置（可选）
├── public/               # 前端静态资源
│   ├── index.html        # 聊天主界面 ‌:ml-citation{ref="4,5" data="citationList"}
│   ├── style.css         # 样式文件 ‌:ml-citation{ref="4,6" data="citationList"}
│   └── script.js         # WebSocket客户端逻辑 ‌:ml-citation{ref="9,10" data="citationList"}
├── package.json          # 项目依赖和脚本 ‌:ml-citation{ref="3" data="citationList"}
└── README.md             # 项目说明文档
```
## 一、技术选型与架构设计
### 1.核心协议
    采用WebSocket协议实现全双工通信，相比HTTP轮询更高效‌12。服务端使用Node.js的ws库或socket.io框架‌
### 2.分层架构
    - 前端：HTML+JavaScript实现聊天界面
    - 后端：Node.js处理消息路由与广播
    - 通信层：WebSocket维持长连接‌

## 二、开发环境配置

### 1.必要工具
    - VSCode插件：ESLint（代码检查）、Live Server（前端热更新）‌
    - Node.js 18+ 和 pnpm 包管理器‌

### 初始化项目
```bash 
# 创建项目目录
mkdir chat-project && cd chat-project
npm init -y
# 安装WebSocket库
pnpm install ws express

```
## 三、关键代码实现(略)

## 四、进阶功能扩展

### 1.‌用户识别
> 在连接时生成唯一ID标识用户‌
### 2.‌消息持久化
> 使用SQLite或MongoDB存储历史记录‌(我是用的是MySQL)
### 3.跨平台支持‌
> 通过Electron打包为桌面应用‌

## 五、调试与部署

### 1.VSCode调试配置
> 添加launch.json配置同时启动服务端和客户端‌
### 2.生产环境部署
> 使用PM2进程管理工具‌


# 涉及到的技术

## WebSocket 技术
建立 TCP 长连接后，客户端与服务器可同时主动发送数据，无需重复握手（如在线聊天、实时游戏）。
### 实时框架
    - 前段
        - 浏览器原生 WebSocket API
    - 后端
        - Socket.IO（Node.js）
        - gorilla/websocket（Go）
        - Spring WebSocket（Java）‌

## SSE（Server-Sent Events）
基于 HTTP 长连接，服务器可主动推送数据至客户端（如新闻推送、股价更新）
## HTTP 长轮询（Long Polling）
**适用场景‌**兼容老旧浏览器的实时通知系统（如配置中心 Nacos 的动态更新）‌
## ⚖️ 实时通信技术对比表

| ‌**特性**‌        | WebSocket      | SSE               | HTTP 长轮询    |
|--------------------|-----------------|----------------|----------------|
| ‌**通信方向**‌    | 全双工双向     | 单向(服务器→客户端)| 半双工请求-响应|
| ‌**协议**‌        | WS/WSS        | HTTP             | HTTP           |
| ‌**延迟**‌        | 50-100ms      | 100-200ms        | 300-500ms      |
| ‌**二进制支持**‌  | ✅            | ❌               | ✅             |
| ‌**移动端兼容性**‌| 需处理iOS限制  | iOS 15+部分受限  | 全支持         |
| ‌**典型应用场景**‌| 在线游戏/IM   | 股价推送/监控    | 兼容老旧系统   |

# 操作步骤

1. 创建项目WebSocked_Chat
2. 进入项目cd 
3. 初始化Node.js,自动生成package.json文件：npm init -y
4. 安装WebSocket 实现库 ws：npm install ws  
5. 创建文件结构
    - 创建server.js → 服务端主逻辑
    - 创建client.js → 客户端主逻辑(使用浏览器客户端时可省略)
    - /public/* → 前端三件套（HTML/CSS/JS）
    - package.json → 确保main字段指向server.js
6. 配置脚本文件(在package.json中)：
```json
"scripts": {
  "start": "node server.js"
}
```
7. 运行项目：服务器端和客户端都要启动
```bash
    npm start /node server.js     # 启动服务端  
    node client.js    # 启动终端-客户端
    npx serve public    # 启动浏览器客户端
```

**实际部署‌**建议使用Nginx等专业服务器‌**托管‌**静态资源

8. 显示信息排除发送者时不使用ID判断，直接在服务器端判断

```js
    if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
    }
```

9. 唯一ID生成库：npm install uuid
在服务器端生成唯一ID
    - **安全可信**‌：防止客户端伪造ID（如恶意用户篡改自己的ID）
    - **‌全局唯一**‌：服务端可确保集群环境中ID唯一性
    - ‌**避免冲突**‌：服务端掌握所有连接，可防止ID碰撞

|平台|推荐库|特点|
|---|---|----|
|Node.js|uuid|RFC4122标准UUID|
|Browser|crypto.randomUUID()|现代浏览器原生API|
|Java|java.util.UUID.randomUUID()|标准UUID实现|
|Python|uuid.uuid4()|标准UUID实现|