一、EventSource 踩坑
EventSource是HTML5中用于服务器发送事件的API。现在，它被广泛用于实时通信场景。然而，使用EventSource时，我们也可能会遇到一些坑，下面介绍一些需要注意的方面。
1. 过程被断开和连接被拒绝
在使用EventSource向服务器请求时，msie10及以下（已停止更新的IE浏览器及edge浏览器）会出现断开过程的问题，Firefox也会在控制台中给出一个“委托受到网络错误的promise”的错误。我们可以通过使用polyfill等解决方案来解决这些问题。
2. 重复响应
当我们在使用EventSource向服务器请求时，可能会收到重复响应，这通常是由于缓存等原因导致的。我们可以通过添加一个时间戳或缓存控制来解决这些问题。
二、sources
EventSource可以从多种源中获取数据。下面介绍一些常见的sources。
1. 数组
const eventSource = new EventSource('/source.php', {data: ['idList[]=1&idList[]=2']});我们可以通过在请求中添加data字段，将一些数据以数组的方式传递给服务器。
2. 携带cookie
const eventSource = new EventSource('/source.php', {withCredentials: true});当我们需要携带cookie向服务器请求时，可以在创建EventSource实例时添加withCredentials: true来实现。
3. 自定义请求头
const eventSource = new EventSource('/source.php', {headers: {'Authorization': 'Bearer TOKEN'}});有时，我们需要在请求头中添加自定义的信息来向服务器请求，通过在创建EventSource实例时添加headers字段即可实现。
三、EventSource 聊天
EventSource可以实现聊天室等在线通讯场景。下面介绍使用EventSource实现实时聊天的例子。
const chat = document.getElementById('chat');
const sendButton = document.getElementById('sendButton');
const nameInput = document.getElementById('nameInput');
const messageInput = document.getElementById('messageInput');
const eventSource = new EventSource('/chat.php');
eventSource.onmessage = (event) => {
const message = JSON.parse(event.data);
addMessageToList(message);
};
sendButton.addEventListener('click', (event) => {
const message = {
name: nameInput.value,
message: messageInput.value
};
fetch('/chat.php', {
method: 'POST',
body: JSON.stringify(message)
});
messageInput.value = '';
});
const addMessageToList = (message) => {
const messageElement = document.createElement('p');
const nameSpan = document.createElement('span');
const messageSpan = document.createElement('span');
nameSpan.textContent = `${message.name}: `;
messageSpan.textContent = message.message;
messageElement.append(nameSpan, messageSpan);
chat.append(messageElement);
};
上面的代码演示了使用EventSource实现实时聊天的例子。在页面上，我们创建了发送消息的按钮、输入昵称、输入消息的文本框和一个用于展示聊天记录的列表。在JavaScript中，我们创建了一个EventSource实例，并通过onmessage事件监听消息。当有新消息到来时，我们将其添加到聊天记录中，并展示出来。
四、EventSource 小程序
EventSource也可以在小程序中使用，下面给出小程序中如何使用EventSource的例子。
// app.js
App({
eventSource: null,
onLaunch() {
this.eventSource = new EventSource('/source.php');
}
});
// page.js
const app = getApp();
Page({
data: {
message: ''
},
onLoad() {
app.eventSource.onmessage = (event) => {
this.setData({
message: event.data
});
};
}
});
上面的例子是一个小程序中如何使用EventSource的示例代码。app.js中创建了一个EventSource实例，并在小程序启动时触发onLaunch函数。在page.js中，我们获取到app实例，在页面加载时监听onmessage事件，并通过this.setData()方法更新数据。
五、eventsource demo
下面提供一个简单的EventSource demo，演示EventSource实现实时通讯的过程：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304132.html
微信扫一扫 
支付宝扫一扫 