EventSource：从源头开始的纯前端实时通讯

一、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实现实时通讯的过程：

  Send
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304132.html