<think>我们讨论的是在
Vue2中
使用`fetch
-event
-source`库。
Vue2的组件生命周期和响应式系统与
Vue3有所不同，因此我们需要考虑如何在
Vue2中正确
使用SSE，包括在组件挂载时建立连接，在组件销毁时断开连接，以及如何将接收到的数据绑定到
Vue的响应式数据上。
### 在
Vue2中
使用`fetch
-event
-source`的步骤
1. **安装依赖**：
```bash
npm install @microsoft/fetch
-event
-source
```
2. **在
Vue组件中
使用**：
- 在`
mounted`生命周期钩子中建立SSE连接
- 在`beforeDestroy`生命周期钩子中断开连接（
使用AbortController）
- 使用Vue的响应式数据来存储从SSE接收到的数据，以便自动更新视图
### 示例代码
下面是一个
Vue2组件的示例，展示如何
使用`fetch
-event
-source`：
```
vue
<template>
<div>
<h1>Server
-Sent Events in
Vue2</h1>
<button @click="connectSSE">连接</button>
<button @click="disconnectSSE">断开</button>
<div v
-if="error" class="error">{{ error }}</div>
<ul>
<li v
-for="(message, index) in messages" :key="index">
{{ message }}
</li>
</ul>
</div>
</template>
<script>
import { fetchEventSource } from '@microsoft/fetch
-event
-source';
export default {
data() {
return {
messages: [], // 存储接收到的消息
error: null, // 存储错误信息
controller: null, // 用于存储AbortController实例
isConnected: false, // 是否已连接
};
},
methods: {
// 连接SSE
connectSSE() {
if (this.isConnected) {
console.log('已经连接');
return;
}
// 创建新的AbortController
this.controller = new AbortController();
this.isConnected = true;
//
使用fetchEventSource
fetchEventSource('http://your
-sse
-server.com/events', {
method: 'GET',
headers: {
'Accept': 'text/event
-stream',
},
signal: this.controller.signal,
onopen: async (response) => {
if (response.ok) {
console.log('连接成功');
this.error = null;
} else {
throw new Error(`连接失败，状态码：${response.status}`);
}
},
onmessage: (event) => {
// 当接收到消息时，将数据添加到messages
数组
// 注意：
Vue2对
数组的更新需要
使用Vue.set或者
使用可响应的方法（如
push）
// 这里我们直接
使用push，因为
Vue已经对
数组的
push方法进行了包裹
this.messages.
push(event.data);
},
onclose: () => {
console.log('连接关闭');
this.isConnected = false;
},
onerror: (err) => {
// 发生错误时
this.error = `发生错误: ${err.message}`;
this.isConnected = false;
// 抛出错误会停止重试，我们可以选择不抛出，然后尝试重连
// throw err;
},
}).catch(err => {
console.error('SSE连接异常:', err);
this.error = `连接异常: ${err.message}`;
this.isConnected = false;
});
},
// 断开SSE
disconnectSSE() {
if (this.controller) {
this.controller.abort();
this.isConnected = false;
console.log('已断开连接');
}
},
},
beforeDestroy() {
// 组件销毁前断开连接
this.disconnectSSE();
},
};
</script>
<style>
.error {
color: red;
}
</style>
```
### 代码解释
1. **数据属性**：
- `messages`：
数组，用于存储从服务器接收到的消息。
- `error`：字符串，存储错误信息。
- `controller`：存储`AbortController`实例，用于控制SSE连接的断开。
- `isConnected`：布尔值，表示当前是否已连接。
2. **方法**：
- `connectSSE`：建立SSE连接。在连接前检查是否已经连接，避免重复连接。创建`AbortController`实例，然后调用`fetchEventSource`。设置相关的事件回调：
- `onopen`：连接成功时触发，检查响应状态。
- `onmessage`：当接收到消息时触发，将消息内容添加到`messages`
数组中（
使用数组的`
push`方法，
Vue2已经对
数组的变更方法进行了响应式处理）。
- `onclose`：连接关闭时触发。
- `onerror`：发生错误时触发，记录错误信息，并标记断开连接。
- `disconnectSSE`：断开SSE连接，调用`AbortController`的`abort`方法。
3. **生命周期钩子**：
- `beforeDestroy`：在组件销毁前调用`disconnectSSE`方法，确保清理资源。
4. **模板**：
- 显示连接和断开按钮。
- 如果有错误，显示错误信息。
- 使用`v
-for`循环显示`messages`
数组中的消息。
### 注意事项
1. **响应式
数组更新**：在
Vue2中，直接通过索引设置
数组项或修改
数组长度不是响应式的。但是，
使用`
push`、`pop`、`shift`、`unshift`、`splice`、`sort`、`reverse`这些方法可以触发视图更新。在示例中，我们
使用`
push`方法，所以是响应式的。
2. **跨域
问题**：如果SSE服务器和前端应用不在同一个域，需要服务器设置CORS（跨域资源共享）响应头。
3. **重连机制**：`fetch
-event
-source`内部已经实现了重连机制，但可以通过`onerror`回调中的逻辑进行自定义。如果遇到错误，可以选择重新连接（注意避免无限重连）。
4. **性能考虑**：如果消息量很大，频繁更新
数组可能
导致性能
问题。可以考虑
使用防抖（debounce）或节流（throttle）来限制更新频率，或者
使用分页显示。
### 重连策略改进
在`onerror`回调中，我们可以实现自定义的重连逻辑，例如指数退避：
```javascript
onerror: (err) => {
this.error = `发生错误: ${err.message}`;
this.isConnected = false;
// 等待一段时间后重连
setTimeout(() => {
console.log('尝试重新连接...');
this.connectSSE();
}, 5000);
// 注意：这里我们不再抛出错误，因为抛出错误会阻止库自身的重试
},
```
### 服务端要求
服务端需要支持SSE，即发送`text/event
-stream`类型的响应，并保持连接打开，持续发送事件。事件格式遵循SSE标准，例如：
```
data: 这是一条消息\n\n
```
或
```
event: update
data: {"time": "2021
-01
-01T12:00:00Z", "value": 42}\n\n
```
### 总结
在
Vue2中集成`fetch
-event
-source`库实现SSE通信，需要注意组件的生命周期管理（连接建立和断开）以及
Vue的响应式数据更新。通过上述示例，我们可以实现一个基本的SSE客户端，并能够处理错误和重连。
§§相关
问题§§:
1. 在
Vue2中，如何优化大量SSE消息的渲染性能？
2. 如何为SSE连接添加身份验证（如JWT）？
3.
Vue2和
Vue3在
使用SSE时有哪些主要区别？
4. 如何处理SSE连接中的网络波动和断线重连？</think>### 在
Vue2 中
使用 fetch
-event
-source 的完整指南
在
Vue2 中
使用 `fetch
-event
-source` 库实现 Server
-Sent Events (SSE) 功能，可以实现实时数据流功能。以下是完整的实现方案：
#### 安装依赖
```bash
npm install @microsoft/fetch
-event
-source
# 或
yarn add @microsoft/fetch
-event
-source
```
####
Vue2 组件实现
```
vue
<template>
<div class="sse
-container">
<h2>实时数据流</h2>
<div class="controls">
<button @click="connectSSE" :disabled="isConnected">连接</button>
<button @click="disconnectSSE" :disabled="!isConnected">断开</button>
</div>
<div v
-if="error" class="error
-message">
{{ error }}
</div>
<div class="status">
连接状态:
<span :class="statusClass">{{ connectionStatus }}</span>
</div>
<div class="messages
-container">
<div v
-for="(message, index) in messages" :key="index" class="message">
<div class="timestamp">{{ formatDate(message.timestamp) }}</div>
<div class="content">{{ message.content }}</div>
</div>
</div>
</div>
</template>
<script>
import { fetchEventSource } from '@microsoft/fetch
-event
-source';
export default {
data() {
return {
isConnected: false,
connectionStatus: '未连接',
error: null,
messages: [],
controller: null,
retryCount: 0,
maxRetries: 5
};
},
computed: {
statusClass() {
return {
'status
-connected': this.connectionStatus === '已连接',
'status
-disconnected': this.connectionStatus === '未连接',
'status
-reconnecting': this.connectionStatus.includes('重连')
};
}
},
methods: {
async connectSSE() {
if (this.isConnected) return;
// 创建新的 AbortController
this.controller = new AbortController();
this.isConnected = true;
this.connectionStatus = '连接中...';
this.error = null;
this.retryCount = 0;
try {
await fetchEventSource('https://api.example.com/sse', {
method: 'POST',
headers: {
'Content
-Type': 'application/json',
'Authorization': `Bearer ${this.getAuthToken()}`
},
body: JSON.stringify({
userId: this.$store.state.user.id,
topics: ['notifications', 'updates']
}),
signal: this.controller.signal,
onopen: async (response) => {
if (response.ok) {
this.connectionStatus = '已连接';
this.retryCount = 0;
console.log('SSE连接成功');
} else if (response.status >= 400 && response.status < 500) {
this.connectionStatus = '服务器拒绝连接';
throw new Error(`Server error: ${response.status}`);
} else {
throw new Error(`Connection failed: ${response.status}`);
}
},
onmessage: (event) => {
try {
const data = JSON.parse(event.data);
this.messages.unshift({
timestamp: new Date(),
content: data.message
});
// 保持消息列表长度
if (this.messages.length > 50) {
this.messages.pop();
}
// 可选：触发全局事件
this.$emit('new
-message', data);
} catch (e) {
console.error('消息解析失败:', e);
}
},
onclose: () => {
this.connectionStatus = '连接已关闭';
this.isConnected = false;
console.log('SSE连接关闭');
},
onerror: (err) => {
this.error = `SSE错误: ${err.message}`;
console.error('SSE错误:', err);
// 指数退避重连策略
if (this.retryCount < this.maxRetries) {
this.retryCount++;
const delay = Math.min(1000 * 2 ** this.retryCount, 30000);
this.connectionStatus = `重连中... (${this.retryCount}/${this.maxRetries})`;
setTimeout(() => {
if (this.isConnected) {
this.connectSSE();
}
}, delay);
} else {
this.connectionStatus = '连接失败';
this.isConnected = false;
}
// 抛出错误会停止重试，这里我们不抛出以继续重试
// throw err;
}
});
} catch (err) {
console.error('连接失败:', err);
this.error = `连接失败: ${err.message}`;
this.connectionStatus = '连接失败';
this.isConnected = false;
}
},
disconnectSSE() {
if (this.controller) {
this.controller.abort();
this.isConnected = false;
this.connectionStatus = '未连接';
console.log('主动断开SSE连接');
}
},
getAuthToken() {
// 从
Vuex或本地存储获取认证token
return this.$store.state.auth.token || localStorage.getItem('authToken');
},
formatDate(date) {
return new Date(date).toLocaleTimeString();
}
},
beforeDestroy() {
// 组件销毁前断开连接
this.disconnectSSE();
}
};
</script>
<style scoped>
.sse
-container {
max
-width: 800px;
margin: 0 auto;
padding: 20px;
font
-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-serif;
}
.controls {
margin: 20px 0;
}
button {
padding: 8px 16px;
margin
-right: 10px;
background
-color: #42b983;
color: white;
border: none;
border
-radius: 4px;
cursor: pointer;
transition: background
-color 0.3s;
}
button:disabled {
background
-color: #cccccc;
cursor: not
-allowed;
}
button:hover:not(:disabled) {
background
-color: #359c6e;
}
.error
-message {
padding: 10px;
background
-color: #ffdddd;
color: #ff0000;
border
-radius: 4px;
margin: 15px 0;
}
.status {
margin: 15px 0;
font
-weight: bold;
}
.status
-connected {
color: #42b983;
}
.status
-disconnected {
color: #ff5252;
}
.status
-reconnecting {
color: #ffb142;
}
.messages
-container {
max
-height: 500px;
overflow
-y: auto;
border: 1px solid #eee;
border
-radius: 4px;
padding: 10px;
}
.message {
padding: 10px;
border
-bottom: 1px solid #eee;
}
.message:last
-child {
border
-bottom: none;
}
.timestamp {
font
-size: 0.8em;
color: #888;
}
.content {
margin
-top: 5px;
}
</style>
```
### 关键实现细节解释
1. **连接管理**：
- 使用 `AbortController` 控制连接生命周期
- 在 `beforeDestroy` 钩子中断开连接，防止内存泄漏
- 提供连接/断开按钮供用户控制
2. **认证处理**：
```javascript
headers: {
'Authorization': `Bearer ${this.getAuthToken()}`
}
```
- 从
Vuex store 或 localStorage 获取认证 token
- 支持带认证的 SSE 连接
3. **错误处理与重连**：
- 指数退避重连策略：`delay = Math.min(1000 * 2 ** retryCount, 30000)`
- 最大重试次数限制（5次）
- 详细的连接状态反馈
4. **消息处理**：
```javascript
onmessage: (event) => {
const data = JSON.parse(event.data);
this.messages.unshift(/* ... */);
// 保持消息列表长度
if (this.messages.length > 50) {
this.messages.pop();
}
}
```
- 使用 `unshift` 添加新消息到顶部
- 限制消息列表长度，防止内存溢出
- 触发全局事件 `this.$emit('new
-message', data)`
5. **UI/UX 优化**：
- 连接状态可视化（不同颜色标识）
- 消息时间戳格式化
- 错误消息醒目显示
- 响应式消息列表设计
### 与
Vuex 集成
如果需要全局管理 SSE 连接，可以创建
Vuex 模块：
```javascript
// store/modules/sse.js
import { fetchEventSource } from '@microsoft/fetch
-event
-source';
export default {
namespaced: true,
state: {
connection: null,
isConnected: false,
messages: []
},
mutations: {
SET_CONNECTION(state, controller) {
state.connection = controller;
},
SET_CONNECTED(state, value) {
state.isConnected = value;
},
ADD_MESSAGE(state, message) {
state.messages.unshift(message);
if (state.messages.length > 100) {
state.messages.pop();
}
},
CLEAR_MESSAGES(state) {
state.messages = [];
}
},
actions: {
async connect({ commit, state, rootState }) {
if (state.isConnected) return;
const controller = new AbortController();
commit('SET_CONNECTION', controller);
commit('SET_CONNECTED', true);
try {
await fetchEventSource('https://api.example.com/sse', {
// ...配置与组件中类似...
onmessage: (event) => {
const data = JSON.parse(event.data);
commit('ADD_MESSAGE', data);
}
});
} catch (err) {
commit('SET_CONNECTED', false);
console.error('SSE连接失败', err);
}
},
disconnect({ commit, state }) {
if (state.connection) {
state.connection.abort();
commit('SET_CONNECTED', false);
commit('SET_CONNECTION', null);
}
}
}
};
```
### 最佳实践
1. **连接共享**：
- 对于应用级事件（如通知），
使用 Vuex 管理单一连接
- 对于组件级事件，在组件内管理独立连接
2. **性能优化**：
```javascript
// 在不可见时暂停消息处理
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
this.pauseProcessing = true;
} else {
this.pauseProcessing = false;
// 处理积压的消息
}
});
```
3. **安全考虑**：
- 验证消息来源，防止 XSS 攻击
- 使用 HTTPS 加密连接
- 限制消息大小和速率
4. **测试策略**：
- 使用 Jest 模拟 SSE 服务器
- 测试连接/断开逻辑
- 测试错误处理和重连机制
在Vue项目中，于mounted周期钩子下对数组进行push操作导致项目崩溃，而将操作移至created周期钩子则能正常运行。本文探讨了这一现象的原因及解决方法。
扫一扫
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
