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/zh-tw/n/304132.html