Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/la3rence/websocket-cluster-front
WebSocket 集群效果展示,React 前端
https://github.com/la3rence/websocket-cluster-front
react websocket
Last synced: 3 months ago
JSON representation
WebSocket 集群效果展示,React 前端
- Host: GitHub
- URL: https://github.com/la3rence/websocket-cluster-front
- Owner: la3rence
- Created: 2021-03-25T03:53:16.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-26T22:11:26.000Z (10 months ago)
- Last Synced: 2024-05-30T02:17:16.193Z (8 months ago)
- Topics: react, websocket
- Language: JavaScript
- Homepage: https://go.lawrenceli.me/ws
- Size: 1.32 MB
- Stars: 12
- Watchers: 2
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demo front-end project for WebSocket cluster
此项目为[实战 Spring Cloud 的 WebSocket 集群](https://github.com/Lonor/websocket-cluster)的前端页面。
## 本地运行
新建 `.env.development.local` 文件,添加相关环境变量:
```
REACT_APP_REST_URL=http://127.0.0.1
REACT_APP_WS_URL=ws://127.0.0.1
```启动项目
```
yarn
yarn start
```访问 `http://localhost:3000` 即可查看效果。
## React Hooks
组件中以 `_hook` 结尾的 js 是使用了 React Hooks 重构。原始的 Class 式组件均保留而未使用。
## 效果图
WebSocket servers or clients status:
- `#ffff00` Unhealthy (being started / shut down)
- `#0cb00c` Healthy (available for accepting request)
- `#ff0102` Down (disconncted)![WebSocket Cluster Demo GIF](./image/demo.gif)