跑通 IM Demo 源码 - IM 即时通讯 UIKit

开发者中心

IM 即时通讯 UIKit

集成开发

跑通 IM Demo 源码

更新时间： 2024/10/11 14:15:12

网易云信在 GitHub 上提供开源的 IM Demo 源码。您可参考 Demo 源码，在您的本地项目中快速构建即时通讯应用。

本文介绍如何快速跑通基于 React 和 Vue 框架的 IM Demo 源码。

前提条件

在开始运行示例项目之前，请确保：

在网易云信控制台上，创建应用，获取应用密钥（App Key）。
已注册 IM 账号，获取账号 ID（account_id）和凭证（Token）。
已在网易云信控制台为应用开通 云端会话 开关。开启步骤请参考《控制台文档》配置应用。

环境要求

您的开发环境需要满足以下要求：

环境要求说明

React 16.8.0 <= 建议版本 < React 18.0.0

React DOM React DOM 16.8.0 <= 建议版本 < React DOM 18.0.0
您的运行环境需要满足以下要求：

环境要求说明

Node 版本 v16.0.0 及以上版本，推荐使用 Node.js 官方 LTS 版本 16.17.0

浏览器 Chrome v103.0.5060.134 及以上版本

环境要求	说明
React	16.8.0 <= 建议版本 < React 18.0.0
React DOM	React DOM 16.8.0 <= 建议版本 < React DOM 18.0.0

环境要求	说明
Node 版本	v16.0.0 及以上版本，推荐使用 Node.js 官方 LTS 版本 16.17.0
浏览器	Chrome v103.0.5060.134 及以上版本

跑通流程

跑通 React Demo 源码

前往 GitHub 下载 Demo 源码。

React Demo 源码的主要目录结构如下：

├── src
│   └── YXUIKit
│       └── im-kit-ui // IM UI 组件源码
│   └── components
│       └── IMApp // IM UIKit 使用示例
│   └── pages
│       └── index.tsx // 项目入口

执行如下命令安装依赖。
```
bash$ npm install
```

在 react/src/pages/index.tsx 中配置 appkey、account、和 token。

TypeScriptimport IMApp from "../components/IMApp";

export default function HomePage() {

  const initOptions = {

    appkey: "", // 请填写您的 appkey
    account: "", // 请填写您的 account
    token: "", // 请填写您的 token
  };

return <IMApp {...initOptions}></IMApp>;
}

执行如下命令启动项目。
```
bash$ npm run start
```
执行如下命令构建项目。
```
bash$ npm run build
```
IM Demo 使用 umi.js 搭建，目前没有内置登录，构建项目后您将直接进入 Demo 主界面。

如果您在源码引入时发生 ts 类型检查错误，您可在项目工程的 tsconfig.json 的 exclude 配置项中，跳过对 IMUIKit 源码的类型检查。

跑通 Vue Demo 源码

前往 GitHub 下载 Demo 源码。

Vue Demo 源码的主要目录结构如下：

├── src
│   └── components
│       └── IMApp // IM UIKit 使用示例
│   └── APP.vue // 项目入口
│   └── main.ts

完成开发环境启动前的准备工作。

如果您是 vue-vite 开发者，请参考 vite.config.ts 中的配置，实现对 less 和 alias 的支持。

TypeScriptimport * as path from 'path'
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
    alias: [ // 由于部分开发者找不到 node_modules 下的 @xkit-yx 目录，所以需要配置下 alias
    { find: /^~/, replacement: '' },
    { find: '@xkit-yx', replacement: path.resolve(__dirname, './node_modules/@xkit-yx') },
    ]
},
server: {
    host: '127.0.0.1',
    port: 8111,
},
base: './',
css: {
    preprocessorOptions: {
    less: {
        javascriptEnabled: true,
    }
    }
}
})

如果您是如果是 vue-cli 开发者，参考如下代码配置 vue.config.js，实现对 less 和 alias 的支持。

TypeScript// vue.config.js
const path = require("path");

module.exports = {
// ……

css: {
    loaderOptions: {
    less: {
        lessOptions: {
        javascriptEnabled: true,
        },
    },
    },
},

chainWebpack: (config) => {
    config.resolve.alias // 由于部分开发者找不到 node_modules 下的 @xkit-yx 目录，所以需要配置下 alias
    .set("~","")
    .set("@xkit-yx", path.resolve(__dirname, "./node_modules/@xkit-yx"));
},
};

执行如下命令安装依赖。
```
bash$ npm install
```
执行如下命令启动开发环境。
```
NPMnpm run dev
```
执行如下命令构建项目。
```
NPMnpm run build
```
构建项目后您将直接进入 Demo 主界面。

下一步

参照如下步骤发送您的第一条消息。

获取对方的 IM Demo 账号（参照如下视频，对方可在个人信息窗口中复制账号）。
添加对方为好友。
输入消息后，单击键盘的 Enter 键发送消息。

故障排查

在 Vue.js 框架中运行 Demo 时遇到 windowScroller 报错

现象描述

在 Vue.js 框架中通过 npm run dev 运行 Demo 时，报如下错误：

No mactching export in "node_modules/react-virtualized/dist/es/WindowScroller/WindowScroller.js" for improt "bpfrpt_proptype_WindowsScroller"

原因分析

这个错误的原因是由于 react-virtualized 库引起的。具体来说，react-virtualized 库在某些版本中可能存在不兼容的问题，导致在导入 WindowScroller 时出现错误。具体步骤包括：

导入必要的模块。
修改 react-virtualized 模块中的某些路径。
替换文件中的错误代码。

通过这种方式，可以绕过 react-virtualized 库中的问题，使得 Demo 能够正常运行。

解决方法

将 vite.config.ts 文件中的代码替换为如下内容：

JavaScriptimport { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import * as path from 'path'
import * as fs from 'fs'

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;

function reactVirtualized() {
  return {
    name: 'my:react-virtualized',
    configResolved() {
      const file = require.resolve('react-virtualized')
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js')
        );
      const code = fs.readFileSync(file, 'utf-8');
      const modified = code.replace(WRONG_CODE, '');
      fs.writeFileSync(file, modified);
    },
  };
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx(), reactVirtualized()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

此文档是否对你有帮助？

有帮助

去反馈

前提条件
环境要求
跑通流程
下一步
故障排查
在 Vue.js 框架中运行 Demo 时遇到 windowScroller 报错