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

前提条件

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

集成 SDK

npm 集成

通过 npm 安装 SDK。

npm install @volcengine/im-web-sdk

在实现功能的 js 文件中通过 import { im_proto, BytedIM } from '@byted/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.0/1684996131534/VolcEngineIM_Web_1.1.0.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 = 666666; // 替换为项目 AppId
const DEFAULT_USER_ID = '10001'; // 用户的 ID

const TOKEN_DOMAIN = 'https://imapi.sinf.net/imcloud';
const API_DOMAIN = 'https://imapi.sinf.net';
const FRONTIER_DOMAIN = 'wss://frontier-sinf.zijieapi.com/ws/v2';
// 服务端 token 获取回调
const fetchTokenFromServer = async ({appId, userId}) => {
  const url = `${TOKEN_DOMAIN}/get_token?appID=${appId}&userID=${userId}`;
  const raw = await fetch(url);
  const {Token} = await raw.json();

  return Token;
};
// 创建实例
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,
      }),
  },
);
// 发起初始化请求
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

相关文档