/websdk

Primary LanguageTypeScript

本地启动

目录结构

├── components
│   ├── chat-input // 输入框相关
│   │   ├── chat-input.less
│   │   ├── quick-reply.tsx // 预置回复组件
│   │   ├── sug-list.tsx // 用户输入联想组件
│   │   └── index.tsx // 输入框
│   ├── common
│   │   ├── error-header.tsx // 断网提示
│   │   ├── image-modal.tsx // 图片放大弹层
│   │   ├── tips-modal.tsx // 融云多端登录提示 & 接口错误提示
│   │   ├── toast.tsx // 上传文件失败后提示 3s之后消失
│   │   ├── video-modal.tsx // 视频弹层
│   │   └── style.less
│   ├── msg-content 消息相关
│   │   ├── file-content.tsx // 文件消息
│   │   ├── genius-msg.tsx // 机器人发送的消息
│   │   ├── img-content.tsx // 图片消息
│   │   ├── msg.tsx // 消息方向，用来判断加载用户/机器人消息
│   │   ├── msg-content.less
│   │   ├── msg-content.tsx // 用来区分消息类型，加载对应组件
│   │   ├── rich-text-content.tsx // 图文消息
│   │   ├── share-link-content.tsx // 卡片消息
│   │   ├── text-content.tsx // 文本消息
│   │   ├── user-msg.tsx // 用户消息
│   │   ├── video-content.tsx // 视频消息
│   │   └── voice-content.tsx // 语音消息
│   └── msg-panel
│       ├── history-msg-panel.tsx // 历史消息组件
│       └── rt-msg-panel.tsx // 实时消息组件
├── data
│   ├── message.data.ts // 消息相关接口
│   └── user.data.ts // 用户相关接口
├── stores // 状态管理
│   ├── actions.ts
│   └── reducer.ts
├── utils
│   ├── config.ts // 项目的一些基础配置（环境变量、头像形状、文件背景颜色、项目接触配置等）
│   ├── index.ts // 封装的一些公共方法
│   ├── load-script.ts // 加载script标签的方法
│   ├── message.ts // 消息相关的方法，一般用来发送消息，如果要增加一种消息类型，这里也需要改动
│   ├── request.ts
│   └── xss.ts
└── views
    ├── index.less
    └── index.tsx

1.引入 建议放到 body 标签的第一行

此处5.0.0是当前版本号

<script src="https://cdn.wul.ai/IMLib-5.0.0.min.js"></script>

2.初始化

在 body 标签内添加如下代码 pubkey 为必传参数，可从吾来平台->渠道设置->WebSdk 界面获取

<div id="wulai-websdk"></div>
<script>
    new websdk({
        data: {
            pubkey: 'xxxxxxxxxxxxxxxxxxxx',
            secret: 'xxxxxxxxxxxxxxxxxxxx'
        }
    })
</script>

3.参数说明

参数名 说明 类型 默认值 版本
pubkey 必填，必须是从吾来平台->渠道设置->WebSdk 获取的Pubkey string ''
secret 必填，必须是从吾来平台->渠道设置->WebSdk 获取的secret string ''
autoOpen SDK 默认是否打开聊天窗口 boolean false
fullScreen 是否全屏 boolean false
userInfo 设置用户信息 Object 3.30.0
tagValues 设置用户属性 Array 3.30.0
pos 设置 sdk 入口图标的位置 Object {right: '16px', bottom: '16px'} 3.30.0

userInfo 的配置项

参数名 说明 类型 默认值 版本
userId 用户 ID，请提供非空且唯一的字符串，相同的 userId 在同一时间只能给一个网页使用，否则会被融云视为多端登录，导致消息发送失败。字符最大长度 128 字符 string ''
userAvatar 展示在吾来管理后台的用户头像 string ''
nickName 展示在吾来管理后台的用户名 string ''

tagValues 的配置项

参数名 说明 类型 默认值 版本
user_attribute 用户属性 Object {id: ''}
user_attribute_value 用户属性值 Object {name: ''}

userInfo 的用法

<script>
    new websdk({
        data: {
            pubkey: 'xxxxxxxxxxxxxxxxxxxx',
            userInfo: {
                userId: '',
                userAvatar: '',
                nickName: ''
            }
        }
    })
</script>

tagValues 的用法

<script>
    new websdk({
        data: {
            pubkey: 'xxxxxxxxxxxxxxxxxxxx',
            tagValues: [
                {
                    user_attribute: { id: '100000' },
                    user_attribute_value: { name: '女' }
                },
                {
                    user_attribute: { id: '100000' },
                    user_attribute_value: { name: '女' }
                }
            ]
        }
    })
</script>

4.API

  • toggleSDkVisible 控制 web sdk 窗口是打开还是关闭：
<button onClick="websdk.toggleSDkVisible()" />