跑通 IM Demo 源码

更新时间: 2024/09/27 10:50:00

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

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

前提条件

在开始运行示例项目之前,请确保:

  • 已在云信控制台 创建应用,获取 App Key。

  • 注册云信 IM 账号,获取 accid 和 token。

  • 已在 网易云信控制台 为应用开通 云端会话 开关。开启步骤请参考《控制台文档》配置应用

    开通云端会话.png

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

    环境要求 说明
    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 源码
  1. 前往 GitHub 下载 Demo 源码

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

    ├── src 
    │   └── YXUIKit
    │       └── im-kit-ui // IM UI 组件源码
    │   └── components
    │       └── IMApp // IM UIKit 使用示例
    │   └── pages 
    │       └── index.tsx // 项目入口
    
  2. 执行如下命令安装依赖。

    bash$ npm install 
    
  3. react/src/pages/index.tsx 中配置 appkeyaccount、和 token

    tsimport IMApp from "../components/IMApp";
    
    export default function HomePage() {
    
      const initOptions = {
    
        appkey: "", // 请填写您的appkey
        account: "", // 请填写您的account
        token: "", // 请填写您的token
      };
    
    return <IMApp {...initOptions}></IMApp>;
    }
    
  4. 执行如下命令启动项目。

    bash$ npm run start
    
  5. 执行如下命令构建项目。

    bash$ npm run build
    

    IM Demo 使用 umi.js 搭建,目前没有内置登录,构建项目后您将直接进入 Demo 主界面。

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

跑通 Vue Demo 源码
  1. 前往 GitHub 下载 Demo 源码

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

    ├── src 
    │   └── components
    │       └── IMApp // IM UIKit 使用示例
    │   └── APP.vue // 项目入口
    │   └── main.ts
    
  2. 完成开发环境启动前的准备工作。

    • 如果您是 vue-vite 开发者,请参考 vite.config.ts 中的配置,实现对 lessalias 的支持。
    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,实现对lessalias的支持。
    // 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")); 
      },
    };
    
  3. 执行如下命令安装依赖。

    bash$ npm install 
    
  4. 执行如下命令启动开发环境。

    npm run dev
    
  5. 执行如下命令构建项目。

    npm run build
    

    构建项目后您将直接进入 Demo 主界面。

后续步骤

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

  1. 获取对方的 IM Demo 账号(参照如下视频,对方可在个人信息窗口中复制账号)。
  2. 添加对方为好友。
  3. 输入消息后,点击键盘的 Enter 键发送消息。
此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 跑通流程
  • 后续步骤