View Code? Open in Web Editor NEW

This project forked from leer0911/im

IM demo create by react+typescript+socket, lerna+monrepo，include client and server，component with storybook. （基于 React+TS+Socket 开发的 IM，分客户端、服务端、组件库包，采用 Lerna 管理。已实现聊天功能，Demo 可运行）

JavaScript 1.80% HTML 4.57% TypeScript 93.63%

im's Introduction

IM

聊天室 Demo，教程

特性

基于 TS，Lerna + monorepo 开发
基于 React FC，useReducer + useContext 数据流管理
基于 material-ui 二次封装，并采用 storybook 维护文档的组件库
基于 socket.io 的聊天功能
标配 Git 提交 Eslint 检测、Commit 规范

预览

APP

组件库文档

开始

依赖安装

yarn lerna bootstrap
yarn lerna link

组件库开发

yarn ui

启动 Client 端

yarn app

启动 Server 端

yarn server

目录说明

客户端 APP

├── App.tsx
├── assets
├── container
│   ├── chat
│   │   ├── Chat.tsx # 聊天室主逻辑
│   │   ├── Emoji.tsx # 表情功能
│   │   ├── Extra.tsx # 扩展功能，如相册等
│   │   ├── Header.tsx # 顶部通栏
│   │   ├── Message.tsx # 消息流
│   │   ├── MessageItem.tsx # 消息流
│   │   ├── Tool.tsx # 工具栏，如发送语音、发送文本、表情等
│   │   ├── emojis.ts # 表情集合
│   │   ├── index.tsx
│   │   └── store.tsx # 聊天室状态流
│   └── index.ts
├── index.tsx
└── store # 后续存放 APP 全局 Store，比如用户信息
    ├── ContextStore.tsx
    ├── index.tsx
    ├── reducers
    │   ├── constants.ts
    │   ├── index.ts
    │   └── user.ts
    ├── useGlobalStore.tsx
    └── useStore.tsx

Recommend Projects