跑通 IM Demo 源码 - IM 即时通讯（增强版）

IM 即时通讯（增强版）

不含 UI 集成

圈组功能

更新时间： 2023/03/27 10:42:14

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

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

前提条件

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

您已登录云信控制台完成以下操作。

创建应用并获取 App Key 和 App Secret
1. 在左侧导航栏中找到“应用”，并单击“创建”。

2. 填写应用的基本信息后，单击“创建”。

3. 创建应用后，可以在左侧导航栏中查看该应用，并单击 “App Key 管理”，并获取 App Key 和 App Secret。

注册云信 IM 账号，获取 accid 和 token

注册云信 IM 账号，获取 accid 和 token。accid 和 token 将用于登录云信服务端。
1. 在左侧导航栏中单击指定应用名称，进入该应用的详情页面。
2. 在“功能管理”中单击“账号管理”。

3. 在测试页面，单击“新建账号”，并填写账号（即accid）、昵称（即 name）、密码（即 Token）后，单击“确定”。
您的开发环境满足以下要求:

环境要求说明

Node 版本 v16.0.0 及以上版本

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

环境要求	说明
Node 版本	v16.0.0 及以上版本
浏览器	Chrome v103.0.5060.134 及以上版本

跑通流程

跑通 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 主界面。

跑通 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 键发送消息。

此文档是否对你有帮助？

有帮助

我要吐槽

文档反馈

在线咨询

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