一、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实现实时通讯的过程：
<input id="messageInput" type="text" placeholder="Type a message">
<script>
const messages = document.getElementById('messages');
const sendButton = document.getElementById('sendButton');
const messageInput = document.getElementById('messageInput');
const eventSource = new EventSource('/source.php');
eventSource.onmessage = (event) => {
const message = event.data;
addMessageToList(message);
};
sendButton.addEventListener('click', (event) => {
const message = messageInput.value;
fetch('/source.php', {
method: 'POST',
body: message
});
messageInput.value = '';
});
const addMessageToList = (message) => {
const messageElement = document.createElement('li');
messageElement.textContent = message;
messages.append(messageElement);
};
</script>
上面的代码演示了EventSource实现实时通讯的过程。页面中包含一个输入框、发送按钮和一个用于展示消息的列表。在JavaScript中，我们创建了一个EventSource实例，并通过onmessage事件监听消息。当有新消息到来时，我们将其添加到消息列表中，并展示出来。用户输入并点击发送按钮时，我们使用fetch API向服务器发送数据，实现了实时通讯。
六、EventSource
我们可以通过EventSource API来创建一个实例。创建实例时，需要传入一个字符串类型的url参数，用来确定数据的来源。
const eventSource = new EventSource('/source.php');上面的代码演示了如何创建一个EventSource实例，向服务器请求数据。
七、source
在EventSource中，源可以是不同的HTTP请求和服务器响应体。除此之外，源也可以是不同类的数据源，例如websocket等。
八、resource
在使用EventSource时，我们需要考虑数据的资源消耗情况。例如，如果我们在高并发环境中使用EventSource，则可能会出现数据连接问题、流量过载等问题。因此，我们需要合理安排数据请求的频率，优化服务端性能。
以上就是关于EventSource的详细介绍，通过本文，我们可以深入了解EventSource的使用场景、API等，为实现实时通讯业务打下坚实基础。
