Skip to content

netease-im/NIM_Web_Education_Demo

Repository files navigation

在线教育白板 demo

功能点

  • Web 白板
  • Web 音视频
  • 聊天室
  • IM

互动流程

  • nim 登录
  • 连接聊天室
  • 开启音视频
  • 开启白板

特殊约定

白板、音视频房间都以聊天室ID为房间号码

技术栈

  • webpack
  • 包管理:Yarn || Npm
  • UI 库:React
  • UI 组件:自写 -> 参考 antdesign 和 weui
  • 字体图标:iconfont
  • 路由:React-Router
  • JS:ES6 / ES7
  • babel
  • postcss
  • 样式:Less / CSS
  • 状态管理:Mobx / Mobx-React
  • 音视频 SDK:网易云信实时音视频 SDK
  • 白板 SDK: 网易云信白板 SDK

开发环境

# 安装依赖
npm install
# 启动开发环境
npm start

备注:命令行会自动打开浏览器,如果没有自动打开请手动复制 https://localhost:8080 至浏览器地址栏打开

打包部署

  1. 测试环境: yarn build:test
  2. 预发布环境: yarn build:pre
  3. 线上环境: yarn build:prod

目录介绍

├── demo                       临时的字体图标参考
├── sdk                        SDK引用
├── src
   ├── assets                 静态资源
      ├── css                自定义样式
      └── images             图片
   ├── component              单一组件区域,包括 `input`, `button` 等基础组件
   ├── ext                    扩展程序,是三大功能各自的方法操作集合输出,方便模块调用
   ├── config                 配置文件,后期填补
   ├── module                 模块,和业务相关
   ├── pages                  页面
   ├── router                 路由配置
   ├── store                  全局状态管理输出
   ├── util                   工具组件
   └── index.js               入口脚本
└── index.html                 主页入口

请注意

  • ext 文件夹和 store 文件夹的关系:

两个文件夹内容本质都是为了三大功能的集合管理,两个文件夹各司其职,共同配合

ext: 逻辑输出,主要完成各大功能的逻辑流程和各种操作

store: 状态输出,主要管理和存储各个功能逻辑和页面模块需要共享的一些数据

参考资料

  1. React
  2. Mobx
  3. Mobx-React
  4. Preact-weui
  5. Parcel

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published