IM 即时通讯(增强版)
跑通 IM Demo 源码
更新时间: 2023/09/05 14:44:38
网易云信在 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 源码的目录结构如下:
. ├── .editorconfig ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .umirc.ts // umi 配置文件,包含路由等 ├── .vscode │ ├── launch.json │ └── settings.json ├── LICENSE ├── README.md ├── mock │ └── .gitkeep ├── package.json ├── src // 项目目录 │ ├── app.tsx │ ├── assets // 资料目录 │ │ └── Index │ │ ├── add.png │ │ ├── addressBook_activated.png │ │ ├── addressBook_inactivated.png │ │ ├── avatar.png │ │ ├── chat_activated.png │ │ ├── chat_inactivated.png │ │ ├── quit.png │ │ └── quit_hover.png │ ├── components │ │ ├── AddressBookInfo // 好友列表、黑名单列表、群组列表 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ └── MyUserInfo // 个人信息 │ │ └── index.tsx │ ├── config │ │ └── index.ts // 项目启动配置文件 │ ├── global.less │ ├── locales // 国际化配置文件 │ │ ├── en-US.ts │ │ └── zh-CN.ts │ ├── pages │ │ ├── AddressBook // 通讯录 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── Chat // 会话及聊天 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── Login // 登录 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── routers │ │ └── index.ts │ └── store // 全局 store │ └── index.ts ├── tsconfig.json └── typings.d.ts
-
执行如下命令安装依赖。
$ npm install
-
在
src/config/index.ts
中配置appKey
、imAccid
、和imToken
。export default { appKey: '', // 传入您的 App Key imAccid: '', // 传入您的云信 IM 账号 imToken: '', // 传入您的 Token imVersion: 2, // 传入 2 即可,开发者无需关心 lbsUrls: ['https://lbs.netease.im/lbs/webconf.jsp'], linkUrl: 'weblink.netease.im', };
-
执行如下命令启动项目。
$ npm run start
-
执行如下命令构建项目。
$ npm run build
IM Demo 使用 umi.js 搭建,目前没有内置登录,构建项目后您将直接进入 Demo 主界面。
如果您在源码引入时发生 ts 类型检查错误,您可在项目工程的 tsconfig.json 的 exclude 配置项中,跳过对 IMUIKit 源码的类型检查。
跑通 Vue Demo 源码
-
前往 Github 下载 Demo 源码。
-
完成开发环境启动前的准备工作。
- 如果您是
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")); }, };
- 如果您是
-
执行如下命令安装依赖。
$ npm install
-
执行如下命令启动开发环境。
npm run dev
-
执行如下命令构建项目。
npm run build
构建项目后您将直接进入 Demo 主界面。
后续步骤
参照如下步骤发送您的第一条消息。
- 获取对方的 IM Demo 账号(参照如下视频,对方可在个人信息窗口中复制账号)。
- 添加对方为好友。
- 输入消息后,点击键盘的 Enter 键发送消息。
此文档是否对你有帮助?
有帮助
我要吐槽