# sse-demo

**Repository Path**: wang-zewei-dream/sse-demo

## Basic Information

- **Project Name**: sse-demo
- **Description**: 一个简单的 `SSE` 的 `demo` 项目, 用于学习 `SSE` 的使用，项目使用的是浏览器原生支持的 `EventSource` API.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-04-29
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简介

一个简单的 `SSE` 的 `demo` 项目, 用于学习 `SSE` 的使用，项目使用的是浏览器原生支持的 `EventSource` API.

# 项目结构

```bash
├── README.md // 项目说明
├── client.html // 客户端页面
├── server.js // 后端node服务
```
# 运行

## 启动后端node服务

```bash
node server.js
```
## 启动客户端页面

- 使用编辑器的 `Live Server` 或者 `HTTP Server` 插件启动
- 也可以使用 `node` 的 `http-server` 插件启动

### 使用 `node` 的 `http-server` 插件启动

```bash
npm install -g http-server
http-server . -p 5500 -c-1 // -p 5500 表示端口号, -c-1 表示不缓存
```
> ps: 注意, 这里的端口号和 `server.js` 中的端口号要一致, 否则会出现跨域问题.
> 使用 `node` 的 `http-server` 插件启动时, 还需要注意, 使用的地址需要跟 `server.js` 配置的 `CORS` 地址一致, 否则也会出现跨域问题.

## 效果页面

![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/9a7e7f097a2242ebbc68f1156072d43c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5qCR5rex6YGH6bm_:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzI4MTM5NDE0NzAwNjM4MSJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1745981753&x-orig-sign=T8j5WXwMipXqvx17bV94LPWBKtA%3D)