解决EventSource 删除单词的前置空格问题记录

如何解决EventSource 删除单词的前置空格问题

如下代码,EventSource会把单词的前置空格吃掉，比如“ blank” 会变成"blank",这会导致输出的英语单词连在一起

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

临时解决方案，将后端的数据包装成json,前端再解析出来。

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

补充：

EventSource学习

一、EventSource的基本概念

EventSource是HTML5中的一种新的API，用来实现服务器端向客户端推送事件。相比于常规的轮询方式，EventSource可以实现更加高效、低延迟的数据传输。

它的基本使用方式是，首先在客户端创建一个EventSource对象，然后向指定的服务器端URL发送一个HTTP请求。此时，服务器端需要支持EventStream格式，即Content-Type为text/event-stream。一旦客户端收到了这个请求的响应，它就会开始监听服务器端的事件，并将事件流动态地展现在网页中。

EventSource主要有以下几个特性：

1、实时性。EventSource能够实现实时地数据传输，可以在服务器端有新事件时立即向客户端推送，并自动进行展示。

2、低延迟。由于EventSource采用长连接的方式进行传输，相比于普通的轮询方式，它能够更加高效地传输数据。

3、易用性。EventSource是一种非常易用的API，只需要在客户端创建一个EventSource对象，指定服务器端的URL，即可进行监听并展示事件。

4、兼容性。EventSource能够同时兼容WebSocket和长轮询等方式，具备很好的兼容性，可以在各种不同的场景下使用。

二、EventSource的具体应用场景

EventSource主要用来实现服务器端向客户端实时推送事件，它在Web应用中的应用场景非常广泛。下面列举几个具体的应用场景：

1、即时聊天。在即时聊天应用中，EventSource可以实现实时向客户端推送新消息，从而保证聊天效果的实时性和流畅性。

2、数据监控。在数据监控应用中，EventSource可以实时向客户端推送最新的监控数据，从而让用户及时掌握系统状态。

3、消息提示。在消息提示应用中，EventSource可以实时向客户端推送最新的通知信息，让用户不会错过任何重要消息。

4、广告推送。在广告推送应用中，EventSource可以实时向客户端推送最新的广告信息，从而提高广告的投放效果。

三、EventSource的优缺点

EventSource作为一种新的Web API，具备自身的优缺点：

1、优点

（1）实时展示：EventSource能够实现实时展示服务器端的事件，相比于常规的轮询方式，它能够更加高效、低延迟的展示数据。

（2）易用性：EventSource是一种非常易用的API，只需要在客户端创建一个EventSource对象，指定服务器端的URL，即可进行监听并展示事件。

（3）兼容性良好：EventSource能够同时兼容WebSocket和长轮询等方式，具备很好的兼容性，可以在各种不同的场景下使用。

（4）网络带宽节省：EventSource采用长连接的方式进行数据传输，相比于普通的轮询方式，能够节省大量的网络带宽。

2、缺点

（1）一次性消息：EventSource只能一次性地向客户端推送一条消息，而不能像WebSocket那样实现双向通讯。

（2）不支持二进制数据传输：EventSource只能传输文本数据，不能传输二进制数据，这在某些场景下可能存在一定的局限性。

（3）不支持重连：如果网络连接不稳定，或者服务器端关闭EventStream连接，客户端需要重新连接才能继续监听事件。

四、如何使用EventSource

使用EventSource也比较简单，只需要创建一个EventSource对象并指定服务器端的URL即可。下面是一个简单的使用示例：

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

在这个示例中，创建了一个EventSource对象，并指定服务器端的URL为"/events"。同时，还注册了一个onmessage事件回调函数，在每次收到服务器端推送的事件时，会打印出事件数据。

在服务器端，需要确保能够接收和处理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!');
});

在这个示例中，创建了一个Express应用，并通过路由"/events"来处理EventSource请求。其中，将响应的Content-Type设置为text/event-stream，表示返回的数据格式为EventStream。同时，通过设置Cache-Control和Connection实现长连接的功能。在每秒钟向客户端推送一个带时间戳的事件。

五、总结

本文主要介绍了EventSource的基本概念、具体应用场景、优缺点以及使用方法。尽管EventSource在某些场景下可能存在一定的局限性，但它仍然是一种非常强大的前端Web API，能够实现实时、低延迟的数据传输，具备很好的兼容性和易用性。在实际应用中，需要针对具体的场景进行合理使用，从而发挥最大的效果。

到此这篇关于解决EventSource 删除单词的前置空格问题记录的文章就介绍到这了,更多相关EventSource 删除单词的前置空格内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

最新评论