IM 即时通讯(增强版)
Web
新手接入指南
产品介绍
简介
产品优势
主要功能
功能介绍
账号集成与登录
基础消息功能
群组功能
聊天室功能
圈组功能
多端登录与互踢策略
海外数据中心
IM 平滑迁移方案
接口及业务限制
更新日志
IM UIKit 更新日志
NIM SDK 更新日志
体验 Demo
下载 SDK 与 Demo 源码
快速开始
跑通 IM Demo 源码
实现单聊消息收发(不含 UI)
实现圈组消息收发(不含 UI)
含 UI 集成
什么是 IM UIKit
IM UIKit 功能列表
快速集成 IM UIKit
非React框架集成 IM UIKit
组件导入
初始化
全局上下文
登录相关
实现消息收发及界面自定义
集成会话列表界面
集成会话消息界面
集成用户资料组件
集成通讯录界面
集成搜索组件
非 React 框架自定义示渲染
主题样式设置
语言设置
初始化(兼容 NIM SDK)
不含 UI 集成
SDK 集成概述
小程序环境集成声明
初始化与登录
消息收发
历史消息
消息扩展
最近会话
用户资料托管
好友关系托管
在线状态订阅
系统通知
群组功能
群组概述
群组管理
群成员管理
群消息管理
超大群功能
超大群概述
超大群管理
超大群成员管理
超大群消息管理
反垃圾
聊天室功能
聊天室概述
聊天室标签功能
快速实现聊天室登录
聊天室消息管理
聊天室成员管理
聊天室信息管理
聊天室队列服务
圈组功能
圈组概述
初始化与登录
通用接口校验说明
服务器相关
服务器概述
服务器管理
服务器成员管理
游客功能
服务器未读数管理
频道相关
频道概述
频道管理
频道黑白名单
频道分组
频道分组黑白名单
频道未读数管理
实时互动频道
搜索服务器与频道
身份组相关
身份组概述
身份组应用场景
服务器身份组
频道身份组
频道用户定制权限
频道分组身份组
自定义权限项
成员权限查询与判定
身份组相关查询
圈组订阅机制
圈组消息相关
圈组消息收发
圈组消息撤回
圈组消息更新
圈组消息删除
消息正在输入
获取频道最后一条消息
会话消息回复(Thread)
圈组快捷评论
圈组消息搜索
查询历史消息
查询@我的消息
圈组系统通知相关
圈组系统通知概述
圈组系统通知收发
圈组系统通知更新
圈组内容审核
圈组第三方回调
圈组相关抄送
圈组各端接口命名差异
融合存储方案
uniapp 推送相关
最佳实践
聊天室重要消息投递
API 参考
NIM SDK API 参考
状态码
IM 控制台指南
创建应用
注册 IM 账号
升级服务
服务协议

跑通 IM Demo 源码

更新时间: 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。
    查看应用的AppKey
    注册云信 IM 账号,获取 accid 和 token

    注册云信 IM 账号,获取 accid 和 token。accid 和 token 将用于登录云信服务端。

    1. 在左侧导航栏中单击指定应用名称,进入该应用的详情页面。
    2. 在“功能管理”中单击“账号管理”。
    账号管理
    3. 在测试页面,单击“新建账号”,并填写账号(即accid)、昵称(即 name)、密码(即 Token)后,单击“确定”。
    确定
  • 您的开发环境满足以下要求:

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

跑通流程

跑通 React Demo 源码
  1. 前往 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
    
  2. 执行如下命令安装依赖。

    $ npm install 
    
  3. src/config/index.ts 中配置 appKeyimAccid、和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',
    };
    
  4. 执行如下命令启动项目。

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

    $ npm run build
    

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

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

  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. 执行如下命令安装依赖。

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

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

    npm run build
    

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

后续步骤

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

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