如何解決EventSource 刪除單詞的前置空格問題

如下代碼,EventSource會把單詞的前置空格吃掉，比如“ blank” 會變成"blank",這會導致輸出的英語單詞連在一起

const eventSource = new EventSource(api_question);
eventSource.onmessage = streamEvent => {
      const data = streamEvent.data;
      handleTest(data);
    };

臨時解決方案，將后端的數(shù)據(jù)包裝成json,前端再解析出來。

eventSource.onmessage = streamEvent => {
      const data = JSON.parse(streamEvent.data);
      resText += data.val;
      handleTest(resText);
    };

補充：

EventSource學習

一、EventSource的基本概念

EventSource是HTML5中的一種新的API，用來實現(xiàn)服務器端向客戶端推送事件。相比于常規(guī)的輪詢方式，EventSource可以實現(xiàn)更加高效、低延遲的數(shù)據(jù)傳輸。

它的基本使用方式是，首先在客戶端創(chuàng)建一個EventSource對象，然后向指定的服務器端URL發(fā)送一個HTTP請求。此時，服務器端需要支持EventStream格式，即Content-Type為text/event-stream。一旦客戶端收到了這個請求的響應，它就會開始監(jiān)聽服務器端的事件，并將事件流動態(tài)地展現(xiàn)在網頁中。

EventSource主要有以下幾個特性：

1、實時性。EventSource能夠實現(xiàn)實時地數(shù)據(jù)傳輸，可以在服務器端有新事件時立即向客戶端推送，并自動進行展示。

2、低延遲。由于EventSource采用長連接的方式進行傳輸，相比于普通的輪詢方式，它能夠更加高效地傳輸數(shù)據(jù)。

3、易用性。EventSource是一種非常易用的API，只需要在客戶端創(chuàng)建一個EventSource對象，指定服務器端的URL，即可進行監(jiān)聽并展示事件。

4、兼容性。EventSource能夠同時兼容WebSocket和長輪詢等方式，具備很好的兼容性，可以在各種不同的場景下使用。

二、EventSource的具體應用場景

EventSource主要用來實現(xiàn)服務器端向客戶端實時推送事件，它在Web應用中的應用場景非常廣泛。下面列舉幾個具體的應用場景：

1、即時聊天。在即時聊天應用中，EventSource可以實現(xiàn)實時向客戶端推送新消息，從而保證聊天效果的實時性和流暢性。

2、數(shù)據(jù)監(jiān)控。在數(shù)據(jù)監(jiān)控應用中，EventSource可以實時向客戶端推送最新的監(jiān)控數(shù)據(jù)，從而讓用戶及時掌握系統(tǒng)狀態(tài)。

3、消息提示。在消息提示應用中，EventSource可以實時向客戶端推送最新的通知信息，讓用戶不會錯過任何重要消息。

4、廣告推送。在廣告推送應用中，EventSource可以實時向客戶端推送最新的廣告信息，從而提高廣告的投放效果。

三、EventSource的優(yōu)缺點

EventSource作為一種新的Web API，具備自身的優(yōu)缺點：

1、優(yōu)點

（1）實時展示：EventSource能夠實現(xiàn)實時展示服務器端的事件，相比于常規(guī)的輪詢方式，它能夠更加高效、低延遲的展示數(shù)據(jù)。

（2）易用性：EventSource是一種非常易用的API，只需要在客戶端創(chuàng)建一個EventSource對象，指定服務器端的URL，即可進行監(jiān)聽并展示事件。

（3）兼容性良好：EventSource能夠同時兼容WebSocket和長輪詢等方式，具備很好的兼容性，可以在各種不同的場景下使用。

（4）網絡帶寬節(jié)?。篍ventSource采用長連接的方式進行數(shù)據(jù)傳輸，相比于普通的輪詢方式，能夠節(jié)省大量的網絡帶寬。

2、缺點

（1）一次性消息：EventSource只能一次性地向客戶端推送一條消息，而不能像WebSocket那樣實現(xiàn)雙向通訊。

（2）不支持二進制數(shù)據(jù)傳輸：EventSource只能傳輸文本數(shù)據(jù)，不能傳輸二進制數(shù)據(jù)，這在某些場景下可能存在一定的局限性。

（3）不支持重連：如果網絡連接不穩(wěn)定，或者服務器端關閉EventStream連接，客戶端需要重新連接才能繼續(xù)監(jiān)聽事件。

四、如何使用EventSource

使用EventSource也比較簡單，只需要創(chuàng)建一個EventSource對象并指定服務器端的URL即可。下面是一個簡單的使用示例：

var eventSource = new EventSource("/events");
eventSource.onmessage = function(event) {
  console.log("Received event: " + event.data);
};

在這個示例中，創(chuàng)建了一個EventSource對象，并指定服務器端的URL為"/events"。同時，還注冊了一個onmessage事件回調函數(shù)，在每次收到服務器端推送的事件時，會打印出事件數(shù)據(jù)。

在服務器端，需要確保能夠接收和處理EventStream格式的HTTP請求。下面是一個簡單的Node.js的Express應用示例：

const express = require('express');
const app = express();
app.get('/events', function(req, res) {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(function() {
    res.write('data: ' + new Date().toISOString() + '\n\n');
  }, 1000);
});
app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

在這個示例中，創(chuàng)建了一個Express應用，并通過路由"/events"來處理EventSource請求。其中，將響應的Content-Type設置為text/event-stream，表示返回的數(shù)據(jù)格式為EventStream。同時，通過設置Cache-Control和Connection實現(xiàn)長連接的功能。在每秒鐘向客戶端推送一個帶時間戳的事件。

五、總結

本文主要介紹了EventSource的基本概念、具體應用場景、優(yōu)缺點以及使用方法。盡管EventSource在某些場景下可能存在一定的局限性，但它仍然是一種非常強大的前端Web API，能夠實現(xiàn)實時、低延遲的數(shù)據(jù)傳輸，具備很好的兼容性和易用性。在實際應用中，需要針對具體的場景進行合理使用，從而發(fā)揮最大的效果。

到此這篇關于解決EventSource 刪除單詞的前置空格問題記錄的文章就介紹到這了,更多相關EventSource 刪除單詞的前置空格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論