跑通 IM Demo 源码
更新时间: 2024/09/27 10:50:00
网易云信在 GitHub 上提供开源的 IM Demo 源码。您可参考 Demo 源码,在您的本地项目中快速构建即时通讯应用。
本文介绍如何快速跑通基于 React 和 Vue 框架的 IM Demo 源码。
前提条件
在开始运行示例项目之前,请确保:
-
已在云信控制台 创建应用,获取 App Key。
-
已 注册云信 IM 账号,获取 accid 和 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 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
。ts
import 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
的支持。
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 键发送消息。
此文档是否对你有帮助?