一个基于WebSocket的实时聊天应用，无需注册或登录。用户只需输入房间ID和用户名即可加入房间，与同房间的其他用户实时聊天。应用支持房间管理、实时消息广播、在线用户列表显示、用户名冲突检测和身份伪造防护。前端使用Next.js 16、React 19、TypeScript、Tailwind CSS、Zustand和Radix UI，后端使用Node.js、TypeScript和ws库。

核心要点

无需注册或登录，通过房间ID和用户名即可加入聊天
实时消息通过WebSocket广播，支持房间内所有用户即时接收
服务器端进行用户名冲突检测，拒绝重复用户名加入同一房间
身份伪造防护：服务器使用用户加入时指定的username/room发送消息，忽略客户端负载中的身份信息
技术栈：前端Next.js 16 + React 19 + TypeScript + Tailwind CSS + Zustand + Radix UI，后端Node.js + TypeScript + ws库

正文

dv2202/ChatApplication

聊天应用

一个基于房间的实时聊天应用，无需注册或登录。选择一个房间ID和一个用户名，立即加入，并通过WebSocket与房间内的所有人聊天。

功能特性

基于房间的聊天 — 通过ID创建或加入任意房间（例如 team-chat、study-group）
无需注册 — 每次加入时选择一个显示名称
实时消息 — 消息通过WebSocket即时广播
在线状态 — 每个客户端都能看到房间内最新的用户列表
用户名冲突预防 — 服务器拒绝同一房间内的重复用户名
身份伪造防护 — 服务器使用加入时的 username/room 发送出站消息；客户端负载中的身份信息被忽略

技术栈

层	技术
前端	Next.js 16, React 19, TypeScript, Tailwind CSS, Zustand, Radix UI
后端	Node.js, TypeScript, `ws`

项目结构

ChatApplication/
├── chat-frontend/         # Next.js Web应用（默认：http://localhost:3000）
│   ├── app/               # 页面和布局
│   ├── components/        # UI和聊天组件
│   └── store/             # WebSocket状态（Zustand）
└── chat-backend/          # WebSocket服务器（ws://localhost:8080）
    └── src/index.ts       # 服务器逻辑

前提条件

Node.js 18或更高版本
npm（随Node.js一起安装）

快速开始

在两个独立的终端中分别运行后端和前端。

1. 启动WebSocket服务器

cd chat-backend
npm install
npm run dev

服务器监听端口8080。当客户端连接时，控制台会显示 New connection。

2. 启动前端

cd chat-frontend
npm install
npm run dev

在浏览器中打开 http://localhost:3000。

3. 使用应用

在首页输入房间ID。
输入用户名。
点击加入房间并开始聊天。
打开另一个浏览器标签页或窗口，使用相同的房间ID测试多用户聊天。

WebSocket协议

客户端连接到 ws://localhost:8080，并交换以下格式的JSON消息：

{ "type": "<event>", "payload": { ... } }

客户端 → 服务器

`type`	`payload`	描述
`join`	`{ roomId, username }`	加入一个房间
`chat`	`{ message }`	向已加入的房间发送消息（服务器使用你加入时的 `username`/`roomId`）

服务器 → 客户端

`type`	`payload`	描述
`join_success`	`{ roomId, username }`	加入成功
`join_error`	`{ message }`	加入失败（例如用户名已被占用）
`room_users`	`{ roomId, users }`	房间内用户列表更新
`message`	`{ username, message }`	房间内用户发送的聊天消息
`chat_error`	`{ message }`	发送失败（例如未加入房间、空消息）
`error`	`{ message }`	无效JSON或其他协议错误

脚本

前端（`chat-frontend`）

命令	描述
`npm run dev`	启动开发服务器
`npm run build`	生产构建
`npm run start`	运行生产构建
`npm run lint`	运行ESLint

后端（`chat-backend`）

命令	描述
`npm run dev`	编译TypeScript并启动服务器

许可证

ISC

关联概念

WebSocket
实时通信
房间管理
身份验证
Next.js
React
TypeScript
Tailwind CSS
Zustand
Radix UI
Node.js
ws库

可操作项

克隆项目仓库：git clone <仓库地址>
按照快速开始步骤，在两个终端中分别启动后端和前端
打开浏览器访问 http://localhost:3000
输入房间ID和用户名，加入房间开始聊天
打开另一个浏览器标签页，使用相同房间ID测试多用户聊天
尝试发送消息、查看在线用户列表、测试用户名冲突等场景

原文: dv2202/ChatApplication
自动加工于 2026-05-21 01:51