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

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

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);
    };

補(bǔ)充：

EventSource學(xué)習(xí)

一、EventSource的基本概念

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

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

EventSource主要有以下幾個特性：

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

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

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

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

二、EventSource的具體應(yīng)用場景

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

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

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

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

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

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

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

1、優(yōu)點(diǎn)

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

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

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

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

2、缺點(diǎn)

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

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

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

四、如何使用EventSource

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

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

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

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

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

五、總結(jié)

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

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