1.6 KiB
1.6 KiB
05 - 文本传输(含大文本分片)
功能目标
- 支持在房间内发送/接收文本消息。
- 支持大文本自动分片(避免单包过大导致失败或卡顿)。
前端(Vue)
- 输入与发送
MessageInput.vue:输入框 + 发送按钮;支持 Ctrl+V 粘贴填充。- 发送前校验:非空、长度上限(建议)。
- 大文本分片(建议实现方式)
- 当文本长度超过阈值(如 8KB/32KB)时:
- 生成
messageId(可复用senderId + timestamp或 UUID) - 拆分为
totalChunks段 - 逐段发送
TEXT,携带isChunk=true/chunkIndex/totalChunks,并在 payload 中携带messageId
- 生成
- 接收端按
messageId缓存分片并重组,重组完成后再写入消息列表。
- 当文本长度超过阈值(如 8KB/32KB)时:
- 展示与防护
- 文本内容按纯文本展示(转义),禁止
v-html。
- 文本内容按纯文本展示(转义),禁止
后端(Spring Boot)
- 处理策略
- 默认透传广播即可:在
/app/room/{roomCode}/message收到后补齐timestamp并广播。 - (可选)限流/长度限制:防刷屏与恶意超大文本。
- 默认透传广播即可:在
协议与数据
type=TEXTpayload推荐字段:content:文本内容(单片)isChunk:是否为分片chunkIndex/totalChunks:分片序号与总片数messageId:(建议新增)用于重组与去重
边界与注意点
- 重组内存:前端缓存分片需设定超时清理,避免长期占用内存。
- 乱序/丢片:WebSocket 一般有序但重连/异常情况下仍可能丢失;可以在 UI 上提示“分片未完整接收”。