# webSocket

**Repository Path**: kaminaya/webSocket

## Basic Information

- **Project Name**: webSocket
- **Description**: webSocket和sse推送消息的实现
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-27
- **Last Updated**: 2026-09-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前后端通信演示项目（HTTP / SSE / WebSocket）

前端 React 18 + Vite（:5173），后端 Spring Boot 3.3 + JDK 17（:8080）。
开发模式下 Vite 通过代理转发 `/api`（HTTP + SSE）和 `/ws`（WebSocket），天然规避跨域。

## 结构

```
backend/           Spring Boot
  └─ src/main/java/com/example/realtimedemo/
       http/        HttpController        -> /api/http/**    普通请求-响应
       sse/         SseController/Service -> /api/sse/**     服务端单向推送
       websocket/   WebSocketConfig/Handler -> /ws/chat      双向通信
frontend/          Vite + React
  └─ src/components/
       HttpDemo.jsx        fetch 调 REST（含笔记增删列表）
       SseDemo.jsx         EventSource 订阅 heartbeat/broadcast
       WebSocketDemo.jsx   原生 WebSocket 收发消息（echo + chat 广播）
```

## 启动

后端：

```bash
cd backend
mvn spring-boot:run
```

前端（另开终端）：

```bash
cd frontend
npm install
npm run dev
```

打开 http://localhost:5173 切换三个标签页。

## 三种通信的区别

| | HTTP | SSE | WebSocket |
|---|---|---|---|
| 方向 | 客户端 -> 服务端 | 服务端 -> 客户端（单向） | 双向 |
| 协议 | 短连接/请求-响应 | text/event-stream，长连接 | ws://，全双工 |
| 典型场景 | 表单提交、查询 | 通知推送、进度流 | 聊天、协同、实时行情 |
| 实现 | fetch + @RestController | EventSource + SseEmitter | WebSocket + TextWebSocketHandler |

## 验证要点

- SSE：连接后每 2 秒收到 heartbeat 事件；点"发送广播"，另开一个标签页也能收到。
- WebSocket：开两个标签页都点连接，一页发消息，另一页能看到 chat 广播。
- 生产部署把前端 `npm run build` 产物交给 Nginx，需为 `/api`（关闭缓冲以支持 SSE）和 `/ws`（Upgrade 头转发）配置反向代理。