366 lines
9.5 KiB
Markdown
366 lines
9.5 KiB
Markdown
|
# OneByOne 知识图谱
|
||
|
|
|
||
|
|
## 1. 模块依赖关系图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TB
|
||
|
|
subgraph Page["📄 页面层"]
|
||
|
|
INDEX[index.html<br/>主通话页面]
|
||
|
|
CONN[connect/connect.html<br/>连接页面]
|
||
|
|
END[endcall/endcall.html<br/>结束页面]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph Core["⚙️ 核心模块"]
|
||
|
|
MAIN[main.js<br/>应用入口]
|
||
|
|
STORE[store.js<br/>状态管理]
|
||
|
|
RENDER[renderer.js<br/>UI渲染器]
|
||
|
|
CHAT[chatmessage.js<br/>消息模块]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph Base["📦 数据与工具"]
|
||
|
|
MODELS[models.js<br/>数据模型]
|
||
|
|
UTILS[utils.js<br/>工具函数]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph External["🔗 外部依赖"]
|
||
|
|
SIGNALING[signaling.js<br/>信令管理]
|
||
|
|
RENDERSTR[renderstreaming.js<br/>WebRTC管理]
|
||
|
|
CONFIG[config.js<br/>配置管理]
|
||
|
|
end
|
||
|
|
|
||
|
|
INDEX --> MAIN
|
||
|
|
CONN --> CONN_JS[connect.js]
|
||
|
|
END --> END_JS[endcall.js]
|
||
|
|
|
||
|
|
MAIN --> STORE
|
||
|
|
MAIN --> RENDER
|
||
|
|
MAIN --> UTILS
|
||
|
|
MAIN --> CHAT
|
||
|
|
|
||
|
|
STORE --> MODELS
|
||
|
|
STORE --> SIGNALING
|
||
|
|
STORE --> RENDERSTR
|
||
|
|
STORE --> CONFIG
|
||
|
|
STORE --> UTILS
|
||
|
|
STORE --> CHAT
|
||
|
|
|
||
|
|
RENDER --> UTILS
|
||
|
|
RENDER --> MODELS
|
||
|
|
RENDER --> CHAT
|
||
|
|
|
||
|
|
CHAT --> UTILS
|
||
|
|
CHAT --> STORE
|
||
|
|
CHAT --> MODELS
|
||
|
|
|
||
|
|
CONN_JS --> STORE
|
||
|
|
|
||
|
|
style STORE fill:#f9f,stroke:#333,stroke-width:2px
|
||
|
|
style RENDER fill:#bbf,stroke:#333,stroke-width:2px
|
||
|
|
style CHAT fill:#bfb,stroke:#333,stroke-width:2px
|
||
|
|
```
|
||
|
|
|
||
|
|
## 2. 数据模型关系图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TB
|
||
|
|
subgraph Models["数据模型结构"]
|
||
|
|
SESSION[CallSession<br/>通话会话]
|
||
|
|
LOCAL[LocalUser<br/>本地用户]
|
||
|
|
REMOTE[RemoteUser<br/>远端用户]
|
||
|
|
MEDIA[MediaState<br/>媒体状态]
|
||
|
|
MSG[ChatMessage<br/>聊天消息]
|
||
|
|
end
|
||
|
|
|
||
|
|
SESSION --> LOCAL
|
||
|
|
SESSION --> REMOTE
|
||
|
|
LOCAL --> MEDIA
|
||
|
|
REMOTE --> MEDIA
|
||
|
|
|
||
|
|
style SESSION fill:#f96,stroke:#333,stroke-width:2px
|
||
|
|
style MEDIA fill:#9f6,stroke:#333,stroke-width:2px
|
||
|
|
```
|
||
|
|
|
||
|
|
### 模型属性说明
|
||
|
|
|
||
|
|
| 模型 | 属性 |
|
||
|
|
|-----|------|
|
||
|
|
| **CallSession** | id, type, status, startTime, duration, isEncrypted |
|
||
|
|
| **LocalUser** | id, name, avatar, isHost, mediaState |
|
||
|
|
| **RemoteUser** | id, name, avatar, status, networkQuality, mediaState |
|
||
|
|
| **MediaState** | audio, video, screenShare, recording, isSpeaking |
|
||
|
|
| **ChatMessage** | id, senderId, senderName, content, type, timestamp, isSelf |
|
||
|
|
|
||
|
|
## 3. 状态更新时序图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
sequenceDiagram
|
||
|
|
autonumber
|
||
|
|
participant USER as 👤 用户
|
||
|
|
participant DOM as 🖱️ DOM事件
|
||
|
|
participant MAIN as ⚙️ main.js
|
||
|
|
participant STORE as 📦 store.js
|
||
|
|
participant RENDER as 🎨 renderer.js
|
||
|
|
participant UI as 🖥️ UI界面
|
||
|
|
|
||
|
|
USER->>DOM: 点击麦克风按钮
|
||
|
|
DOM->>MAIN: toggleMute()
|
||
|
|
MAIN->>STORE: updateLocalMedia('audio', false)
|
||
|
|
STORE->>STORE: 更新 mediaState.audio
|
||
|
|
STORE->>STORE: notify({type: 'LOCAL_MEDIA_CHANGE'})
|
||
|
|
STORE->>RENDER: 回调 render(state, changes)
|
||
|
|
RENDER->>RENDER: renderControlButtons(mediaState)
|
||
|
|
RENDER->>RENDER: renderLocalUserStatus(localUser)
|
||
|
|
RENDER->>UI: 更新DOM
|
||
|
|
UI->>USER: 显示更新后的界面
|
||
|
|
```
|
||
|
|
|
||
|
|
## 4. WebRTC 连接建立时序图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
sequenceDiagram
|
||
|
|
autonumber
|
||
|
|
participant USER as 👤 用户
|
||
|
|
participant MAIN as ⚙️ main.js
|
||
|
|
participant STORE as 📦 store.js
|
||
|
|
participant SIGNAL as 📡 signaling.js
|
||
|
|
participant RTC as 🔗 renderstreaming.js
|
||
|
|
participant PEER as 👤 远端对等端
|
||
|
|
|
||
|
|
USER->>MAIN: 访问页面
|
||
|
|
MAIN->>STORE: joinCall(connectionId)
|
||
|
|
STORE->>STORE: init()
|
||
|
|
STORE->>STORE: getLocalStream()<br/>获取本地摄像头
|
||
|
|
MAIN->>STORE: setUp(connectionId)
|
||
|
|
STORE->>SIGNAL: 创建信令实例
|
||
|
|
STORE->>RTC: new RenderStreaming<br/>(signaling, config)
|
||
|
|
RTC->>SIGNAL: start()
|
||
|
|
RTC->>SIGNAL: createConnection(connectionId)
|
||
|
|
|
||
|
|
loop WebSocket信令交换
|
||
|
|
PEER->>SIGNAL: 交换SDP/ICE
|
||
|
|
SIGNAL->>RTC: 信令数据
|
||
|
|
end
|
||
|
|
|
||
|
|
RTC->>STORE: onConnect 回调
|
||
|
|
STORE->>STORE: 状态更新为 ongoing
|
||
|
|
PEER->>RTC: 接收媒体流
|
||
|
|
RTC->>STORE: onTrackEvent 回调
|
||
|
|
STORE->>STORE: notify(REMOTE_STREAM_OBTAINED)
|
||
|
|
STORE->>RENDER: 触发渲染更新
|
||
|
|
RENDER->>UI: 显示远端视频
|
||
|
|
```
|
||
|
|
|
||
|
|
## 5. 消息发送流程
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
sequenceDiagram
|
||
|
|
autonumber
|
||
|
|
participant USER as 👤 用户
|
||
|
|
participant DOM as 🖱️ DOM
|
||
|
|
participant CHAT as 💬 chatmessage.js
|
||
|
|
participant STORE as 📦 store.js
|
||
|
|
participant RTC as 🔗 renderstreaming.js
|
||
|
|
participant PEER as 👤 远端用户
|
||
|
|
|
||
|
|
USER->>DOM: 输入消息并回车
|
||
|
|
DOM->>CHAT: handleChatSubmit(event)
|
||
|
|
CHAT->>CHAT: sendMessage()
|
||
|
|
CHAT->>CHAT: addMessage(message)<br/>添加到本地列表
|
||
|
|
CHAT->>STORE: getRenderStreaming()
|
||
|
|
STORE-->>CHAT: 返回实例
|
||
|
|
CHAT->>RTC: sendMessage()<br/>发送chat-message
|
||
|
|
RTC->>PEER: 通过WebRTC数据通道发送
|
||
|
|
|
||
|
|
PEER->>RTC: 收到消息
|
||
|
|
RTC->>STORE: onMessage 回调
|
||
|
|
STORE->>CHAT: handleChatMessage(data)
|
||
|
|
CHAT->>CHAT: addMessage()<br/>添加到消息列表
|
||
|
|
CHAT->>RENDER: 更新聊天UI
|
||
|
|
```
|
||
|
|
|
||
|
|
## 6. 页面流转状态图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
stateDiagram-v2
|
||
|
|
[*] --> 连接页面: 首次访问/无connectionId
|
||
|
|
|
||
|
|
连接页面: connect.html
|
||
|
|
连接页面: - 输入连接ID
|
||
|
|
连接页面: - 创建新通话
|
||
|
|
连接页面: - 用户设置
|
||
|
|
|
||
|
|
通话页面: index.html
|
||
|
|
通话页面: - 视频通话
|
||
|
|
通话页面: - 聊天功能
|
||
|
|
通话页面: - 媒体控制
|
||
|
|
|
||
|
|
结束页面: endcall.html
|
||
|
|
结束页面: - 显示断开原因
|
||
|
|
结束页面: - 重新连接选项
|
||
|
|
|
||
|
|
连接页面 --> 通话页面: 加入/创建通话
|
||
|
|
通话页面 --> 结束页面: 通话结束/断开
|
||
|
|
通话页面 --> 连接页面: 无有效connectionId
|
||
|
|
结束页面 --> 通话页面: 重新连接
|
||
|
|
结束页面 --> 连接页面: 返回
|
||
|
|
```
|
||
|
|
|
||
|
|
## 7. 通话状态机
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
stateDiagram-v2
|
||
|
|
[*] --> idle: 初始化
|
||
|
|
|
||
|
|
idle: 空闲状态
|
||
|
|
idle --> connecting: joinCall()<br/>加入通话
|
||
|
|
idle --> connecting: createCall()<br/>创建通话
|
||
|
|
|
||
|
|
connecting: 连接中
|
||
|
|
connecting --> ongoing: onConnect<br/>连接成功
|
||
|
|
connecting --> failed: 连接失败
|
||
|
|
|
||
|
|
ongoing: 通话中
|
||
|
|
ongoing --> ended: hangUp()<br/>挂断
|
||
|
|
ongoing --> ended: endCall()<br/>结束通话
|
||
|
|
|
||
|
|
failed: 连接失败
|
||
|
|
failed --> connecting: 重试连接
|
||
|
|
failed --> ended: 放弃连接
|
||
|
|
|
||
|
|
ended: 已结束
|
||
|
|
ended --> [*]: 清理资源
|
||
|
|
```
|
||
|
|
|
||
|
|
## 8. 组件层次结构
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TD
|
||
|
|
subgraph index["index.html 组件结构"]
|
||
|
|
HEADER["🧭 Header 顶部栏"]
|
||
|
|
MAIN["📺 Main 主内容区"]
|
||
|
|
FOOTER["🎛️ Footer 底部控制栏"]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph header["Header 内容"]
|
||
|
|
TITLE["标题: 与xxx的通话"]
|
||
|
|
NETWORK["网络质量指示"]
|
||
|
|
DURATION["通话时长"]
|
||
|
|
ENCRYPT["端到端加密标识"]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph main["Main 内容"]
|
||
|
|
VIDEO_AREA["VideoArea 视频区"]
|
||
|
|
SIDEBAR["Sidebar 侧边栏"]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph video["VideoArea"]
|
||
|
|
REMOTE["RemoteVideo 远端视频"]
|
||
|
|
LOCAL["LocalVideo 本地视频画中画"]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph sidebar["Sidebar"]
|
||
|
|
USER_LIST["UserList 用户列表"]
|
||
|
|
CHAT_MSG["ChatMessages 聊天消息"]
|
||
|
|
CHAT_INPUT["ChatInput 消息输入"]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph footer["Footer 控制栏"]
|
||
|
|
CTRL_MIC["🎤 麦克风"]
|
||
|
|
CTRL_VIDEO["📹 视频"]
|
||
|
|
CTRL_RECORD["🔴 录制"]
|
||
|
|
CTRL_END["📞 结束通话"]
|
||
|
|
CTRL_CHAT["💬 聊天"]
|
||
|
|
end
|
||
|
|
|
||
|
|
HEADER --> TITLE
|
||
|
|
HEADER --> NETWORK
|
||
|
|
HEADER --> DURATION
|
||
|
|
HEADER --> ENCRYPT
|
||
|
|
|
||
|
|
MAIN --> VIDEO_AREA
|
||
|
|
MAIN --> SIDEBAR
|
||
|
|
|
||
|
|
VIDEO_AREA --> REMOTE
|
||
|
|
VIDEO_AREA --> LOCAL
|
||
|
|
|
||
|
|
SIDEBAR --> USER_LIST
|
||
|
|
SIDEBAR --> CHAT_MSG
|
||
|
|
SIDEBAR --> CHAT_INPUT
|
||
|
|
|
||
|
|
FOOTER --> CTRL_MIC
|
||
|
|
FOOTER --> CTRL_VIDEO
|
||
|
|
FOOTER --> CTRL_RECORD
|
||
|
|
FOOTER --> CTRL_END
|
||
|
|
FOOTER --> CTRL_CHAT
|
||
|
|
|
||
|
|
style CTRL_END fill:#f66,stroke:#333,stroke-width:2px
|
||
|
|
style ENCRYPT fill:#9f6,stroke:#333,stroke-width:2px
|
||
|
|
```
|
||
|
|
|
||
|
|
## 9. 文件引用汇总
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph LR
|
||
|
|
subgraph Import["导入关系"]
|
||
|
|
direction TB
|
||
|
|
M[main.js]
|
||
|
|
S[store.js]
|
||
|
|
R[renderer.js]
|
||
|
|
C[chatmessage.js]
|
||
|
|
CONN[connect.js]
|
||
|
|
|
||
|
|
M --> S
|
||
|
|
M --> R
|
||
|
|
M --> C
|
||
|
|
S --> C
|
||
|
|
R --> C
|
||
|
|
CONN --> S
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph Export["导出内容"]
|
||
|
|
direction TB
|
||
|
|
ST[store.js<br/>export default store]
|
||
|
|
RE[renderer.js<br/>export default UIRenderer]
|
||
|
|
UT[utils.js<br/>export { formatTime, showNotification, ... }]
|
||
|
|
MO[models.js<br/>export { mockCallSession, mockMessages }]
|
||
|
|
CH[chatmessage.js<br/>export { sendMessage, toggleSidebar, ... }]
|
||
|
|
end
|
||
|
|
```
|
||
|
|
|
||
|
|
## 10. API 接口调用图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph LR
|
||
|
|
subgraph Client["客户端"]
|
||
|
|
CONN_JS[connect.js]
|
||
|
|
end
|
||
|
|
|
||
|
|
subgraph Server["服务器"]
|
||
|
|
API_CALL[/api/call/:callId]
|
||
|
|
API_JOIN[/api/call/:callId/join]
|
||
|
|
API_LEAVE[/api/call/:callId/leave]
|
||
|
|
API_MEDIA[/api/call/:callId/media]
|
||
|
|
API_MSG[/api/call/:callId/messages]
|
||
|
|
API_SEND[/api/call/:callId/message]
|
||
|
|
API_CONN[/signaling/connection-ids]
|
||
|
|
API_UPLOAD[/api/upload/avatar]
|
||
|
|
end
|
||
|
|
|
||
|
|
CONN_JS -.-> API_CONN
|
||
|
|
CONN_JS -.-> API_UPLOAD
|
||
|
|
|
||
|
|
style API_CALL fill:#bbf,stroke:#333
|
||
|
|
style API_JOIN fill:#bbf,stroke:#333
|
||
|
|
style API_LEAVE fill:#bbf,stroke:#333
|
||
|
|
style API_MEDIA fill:#bbf,stroke:#333
|
||
|
|
style API_MSG fill:#bbf,stroke:#333
|
||
|
|
style API_SEND fill:#bbf,stroke:#333
|
||
|
|
style API_CONN fill:#fbf,stroke:#333
|
||
|
|
style API_UPLOAD fill:#fbf,stroke:#333
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
*文档生成时间: 2026-04-11*
|
||
|
|
*适用于 OneByOne 视频通话应用*
|