asai-vue-chat — WebSocket 聊天室组件

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-chat | src/index.ts | AsaiVueChat → { ChatRoom, useChatRoom } | Feature |

概述

asai-vue-chat 是基于 WebSocket 的实时聊天室，支持文本/音频/视频消息、可定制插槽与房间级 WS 管理。

集成方式

// monorepo — 延迟：lib/featurePlugs.ts → registerDeferredPlugs
// 直接引用（开发/单测）：
import AsaiVueChat from './plugs/asai-vue-chat/src/index';
// npm
// import { ChatRoom, useChatRoom } from '@estun/asai-vue-chat';

const { ChatRoom, useChatRoom } = ujt.$fn.AsaiVueChat;

独立性约束

• 禁止 cross-import 其它 plugs/*。
• WS 能力通过 ujt.$ws / $fn.AsaiWs 运行时访问，不 import asai-js-as 源码。

主要 API / 导出

| 导出 | 说明 | |------|------| | ChatRoom | 聊天室 UI（defineAsyncComponent） | | useChatRoom | { initChatRoom, offChatRoom, sendChatRoom } |

消息字段： us, ty（0=文本, 3=音频, 4=视频）, msg

性能说明

• 延迟加载（featurePlugs）；ChatRoom.vue 及媒体子组件在首次打开聊天页才拉 chunk。
• 消息列表为全量 v-for，数百条以上建议虚拟滚动（业务扩展）。
• 卸载时自动 offChatRoom 清理监听。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0",
    "@estun/asai-js-as": "^1.0.0"
  }
}

使用说明

<ChatRoom :ujt="ujt" :room="{ wsname: 'web', roomname: 'asai', us: 'user' }" />

const { initChatRoom, sendChatRoom } = useChatRoom({ ujt });
initChatRoom(['room1'], 'web');
sendChatRoom('room1', 'web', { us: 'me', ty: 0, msg: 'hi' });

room 配置

| 参数 | 说明 | |------|------| | wsname | WS 连接名 | | roomname | 房间名 | | us | 用户名 | | lang.* | 标题、placeholder、按钮文案 |

插槽

chatheader / chatbody / chatfooter — 接收完整 room/ujt 上下文。

文件结构

asai-vue-chat/
├── src/index.ts
└── src/components/
    ├── ChatRoom.vue / ChatRoomOpt.vue
    ├── useChatRoom.ts
    └── AudioRecorder.vue / VedioRecorder.vue …

技术细节

• 自动滚到底部（10px 容差）
• insertFn 光标位置插入文本
• Enter 发送