跑通 IM Demo 源码

更新时间： 2024/08/20 15:45:46

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

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

前提条件

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

已在云信控制台创建应用，获取 App Key。
已注册云信 IM 账号，获取 accid 和 token。

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

环境要求	说明
Node 版本	v16.0.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

跑通流程

跑通 React Demo 源码

前往 Github 下载 Demo 源码。

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

├── src 
│   └── YXUIKit // IM UIKit 源码
│   └── components
│       └── IMApp // IM UIKit 使用示例
│   └── pages 
│       └── index.tsx // 项目入口

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

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

tsimport 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 源码。

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

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

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

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

import * 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的支持。

// 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 
```
执行如下命令启动开发环境。
```
npm run dev
```
执行如下命令构建项目。
```
npm run build
```
构建项目后您将直接进入 Demo 主界面。

后续步骤

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

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

此文档是否对你有帮助？

有帮助

去反馈

前提条件
跑通流程
后续步骤