本文介绍如何创建一个 IMCloud Web 项目，实现即时通讯功能。

前提条件

获取 AppID 和 Token，你可以通过阅读密钥说明了解更多 Token 相关信息。
满足以下条件的计算机：
- 安装最新版本的 Chrome 浏览器，并设置为默认浏览器
- 具备互联网连接
node（12.13.0 ≤ node 版本 ≤ 17.0.0，推荐使用 Node.js 官方 LTS 版本 16.17.0）
npm（版本与 node 版本匹配）

集成 SDK

目前 SDK 支持 3 种集成方式，请根据项目需要选择合适的集成方式。

npm 集成（推荐）

通过 npm 安装 SDK。

npm install @volcengine/im-web-sdk

在实现功能的 js 文件中通过 import { im_proto, BytedIM } from '@volcengine/im-web-sdk'; 引入。

CDN 集成

在 HTML 文件中通过 CDN 地址引入。编辑 HTML 文件，引入 SDK。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript" src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/IM_Web/1.1.2/1687945997051/VolcEngineIM_Web_1.1.2.min.js"></script>
        <script>
            const { im_proto, BytedIM } = window.im;
            /* SDK 调用代码... */
        </script>
    </body>
</html>
html

离线包集成

获取 IM Cloud Web SDK 包。
将 SDK 解压到项目文件目录下，并在 HTML 文件中通过 <script src="${文件路径}/imcloud.min.js"></script> 引入。例如，<script src="./lib/index.min.js" type="text/javascript"></script>。

.
├── index.html
├── package.json
├── index.js
├── lib
    └── index.min.js

实现实时通讯功能

SDK 初始化

在上述 script 标签或 js 文件中插入下列代码，实现 SDK 初始化。

const APP_ID = 666675; // 替换为项目 AppId
const DEFAULT_USER_ID = '10001'; // 用户的 ID

const API_DOMAIN = 'https://imapi.volcvideo.com';
const FRONTIER_DOMAIN = 'wss://frontier-sinftob.ivolces.com/ws/v2';
const YOUR_API_DOMAIN = ''; // 业务服务端域名，具体用途见下代码

// 从业务服务端获取 token，如果项目目前还没有后端，可以通过控制台手动获取
// @ts-ignore
const fetchTokenFromServer = async ({appId, userId}) => {
    if (!YOUR_API_DOMAIN) throw new Error('需要更新 YOUR_API_DOMAIN');

    const url = `${YOUR_API_DOMAIN}/get_token?appID=${appId}&userID=${userId}`;
    const raw = await fetch(url);
    const {Token} = await raw.json();

    return Token;
};

// 控制台手动获取应用和用户的临时 token，注意应用和用户 ID 需要匹配
// 获取地址： https://console.volcengine.com/rtc/im/appManage
const fetchTempToken = async () => {
    const tokenFromConsole = "";
    if (!tokenFromConsole) throw new Error('需要手动获取 token');
    return tokenFromConsole
}

// 创建实例
const instance = new BytedIM(
    {
        appId: APP_ID,
        userId: DEFAULT_USER_ID,
        deviceId: DEFAULT_USER_ID,
        apiUrl: API_DOMAIN,
        frontierUrl: FRONTIER_DOMAIN,
        authType: im_proto.AuthType.TOKEN_AUTH,
        debug: true, // 启用后在控制台打印详细调试信息，正式上线时建议关闭
        token: () =>
            fetchTokenFromServer({
                appId: APP_ID,
                userId: DEFAULT_USER_ID,
            }) // 或者使用:
            // fetchTempToken()
    },
);
// 发起初始化请求
instance.init().then(() => {
    console.log('init success');
    let conversationList = instance.getConversationList();
    console.log(conversationList);
    document.body.insertAdjacentHTML('beforeend', `<div>int success, conversation list (length: ${conversationList.length}): </div>`);
    for (let conv of conversationList) {
        document.body.insertAdjacentHTML('beforeend', `<div>${conv.id} ${conv.coreInfo.name}</div>`);
    }
}).catch((err) => {
    console.log('init fail', err)
});
javascript

运行效果：

绑定收消息事件

绑定后当消息数据有更新（增删查改）时，都会调用传入的回调函数。

instance.event.subscribe(IMEvent.MessageUpsert, (message) => {
  console.log('消息更新 MessageUpsert', message.conversationId, message.content);
});
javascript

文本消息收发

假设当前用户 ID 为 10009，往 ID 为 10001 的用户发送 hello。

 async function send() {
  /* 如果之前没有对话过，需要先创建会话 */
  const conversation = (await instance.createConversation({participants: ['10001']})).payload;
  const message = await instance.createTextMessage({conversation, content: 'hello'});
  const resp = await instance.sendMessage({message});
  console.log('发送成功', resp)
}
javascript

执行后发送方（10009）视角：

接收方（10001）视角：

这样就完成了基本的消息收发。

获取会话列表

  let conversationList = instance.getConversationList();
  console.log(conversationList);
javascript