前端框架 Demo 合集

基于 Agora RTM SDK 的多框架前端 Demo 项目，涵盖主流前端技术栈，每个 Demo 均实现了登录、实时消息等核心功能。

项目结构

.
├── demos/
│   ├── shared/              # 共享工具库（RTM、数据 Mock）
│   ├── vue/
│   │   ├── vite/            # Vue3 + Vite
│   │   └── webpack/         # Vue3 + Webpack
│   ├── react/
│   │   ├── vite/            # React 18 + Vite
│   │   └── webpack/         # React 18 + Webpack
│   ├── nuxt/                # Nuxt 3（SSR）
│   ├── nextjs/              # Next.js 14（SSR）
│   ├── h5/                  # Vite + Vanilla TypeScript
│   └── electron/
│       ├── vue/             # Electron + Vue3 + Pinia
│       └── react/           # Electron + React + Zustand
└── docs/                    # 项目文档

技术栈

类别	技术
框架	Vue3、React 18、Nuxt 3、Next.js 14、Vanilla TS、Electron
构建工具	Vite 5.x、Webpack 5.x
状态管理	Pinia（Vue）、Zustand（React）
路由	Vue Router 4.x、React Router 6.x、框架内置
实时消息	Agora RTM SDK
运行时	Node.js v22
包管理	npm

功能说明

基础 Demo（Vue / React / Nuxt / Next.js / H5）

• 登录页面：输入 User ID，调用 RTM 登录
• Dashboard 页面：展示基础 UI

Electron Demo（electron/vue、electron/react）

• 用户登录：支持 Teacher / Student 角色切换
• 私聊消息：点对点消息收发，未读消息计数
• 频道消息：Classroom 频道订阅与消息广播
• 聊天抽屉：右侧滑出式聊天界面
• 互踢处理：同账号多设备登录提示
• 全局导航：Home / Message / More 页面切换

快速开始

环境准备

1. 安装 Node.js v22
2. 获取 Agora App ID 和 App Certificate
3. 在对应项目目录复制并填写环境变量：

cp .env.example .env
# 编辑 .env，填入 App ID 和 App Certificate

详细配置说明见 demos/ENV_SETUP.md。

各项目启动

项目	目录	端口
Vue3 + Vite	demos/vue/vite	5173
Vue3 + Webpack	demos/vue/webpack	8080
React + Vite	demos/react/vite	5173
React + Webpack	demos/react/webpack	8081
Nuxt 3	demos/nuxt	3000
Next.js 14	demos/nextjs	3000
H5	demos/h5	5173
Electron + Vue	demos/electron/vue	—
Electron + React	demos/electron/react	—

# 通用启动方式（Electron 除外）
cd demos/<项目目录>
npm install
npm run dev

# Electron 项目需要两个终端
cd demos/electron/vue  # 或 electron/react
npm install

# 终端 1
npm run dev

# 终端 2（等待终端 1 启动完成后执行）
NODE_ENV=development npm run electron

共享工具（demos/shared）

所有 Demo 共用 RTM 工具，无需重复实现：

import { createRTMClient } from "../../shared/rtm/util";

环境变量前缀

项目类型	前缀	示例
Vite 项目	VITE_	VITE_APP_ID
Webpack 项目	无	APP_ID
Next.js	NEXT_PUBLIC_	NEXT_PUBLIC_APP_ID
Nuxt	NUXT_PUBLIC_	NUXT_PUBLIC_APP_ID

文档

文档	说明
demos/README.md	Demo 项目详细说明
demos/ENV_SETUP.md	环境变量配置指南
docs/RTM_INTEGRATION.md	RTM SDK 集成文档
AGENTS.md	AI 协作规范
PROJECT_STATE.md	项目当前状态