当涉及到向前端应用程序提供实时数据时,Web 开发人员需要一种可以无缝工作的解决方案。一般情况下,前端应用程序会定期向服务器发送请求以获取更新,但是这会浪费宝贵的带宽资源和服务器资源。在这种情况下,javascript EventSource 就成为了一种更为高效的解决方案。
在使用 chatgpt 时。实时的获取到 chatgpt 的回复。但是我发现在输入 prompt 后,只有一个请求。但是他的消息是实时动态显示的,起初以为使用了 WebSocket,但经过查看源码发现并没有使用 WebSocket。而是使用了 EventSource。
javascript EventSource 是一个内置在现代浏览器中的 API,它允许服务器向客户端发送实时事件。该 API 建立一个持久化的连接,通过该连接,服务器可以随时向客户端推送数据。该 API 建立的连接基于 HTTP 协议,而不是 WebSocket,因此不需要使用其他库或框架,即可在应用程序中使用它。
EventSource 基于 HTTP 协议实现,通过与服务器建立一个持续连接,实现了服务器向客户端推送事件数据的功能。在客户端,EventSource 对象通过一个 URL 发起与服务器的连接。连接成功后,服务器可以向客户端发送事件数据。在客户端,通过 EventSource 对象注册事件处理函数,以接收来自服务器的事件数据。
以下是 EventSource 的工作原理:
客户端向服务器发起 HTTP GET 请求,请求一个特定的 URL。
服务器接收请求,并在 HTTP 头中添加 "Content-Type: text/event-stream"。
服务器建立一个持续的 HTTP 连接,向客户端发送数据,直到连接被关闭。
当服务器有新的事件数据要发送时,它将这些数据以特定的格式发送给客户端。事件数据格式如下:
其中,event 字段表示事件名,data 字段表示事件数据。
客户端通过 EventSource 对象注册事件处理函数,以接收来自服务器的事件数据。当客户端接收到来自服务器的事件数据时,它将创建一个 Event 对象,并触发相应的事件处理函数,传递 Event 对象作为参数。Event 对象包含以下属性:
当连接出现错误或被关闭时,客户端将触发 "error" 事件或 "close" 事件,以便进行错误处理或重新连接。总的来说,EventSource 建立了一种持久化的 HTTP 连接,实现了服务器向客户端实时推送事件数据的功能。它非常适合于需要实时更新的应用程序,例如聊天室、股票市场等等。
使用 EventSource 非常简单。在前端,我们只需要使用它提供的构造函数,指定从服务器接收事件的 URL 即可:
在这个例子中,我们将通过一个名为"my-endpoint”的 URL 从服务器获取事件。服务器应该根据需要设置此 URL 并在客户端上公开它。
一旦建立连接,服务器就可以使用以下语法向客户端发送事件:
这将向所有当前连接到 EventSource 实例的客户端发送一个名为"eventName”的事件,并附带一个包含"eventData”的数据对象。
客户端可以使用以下语法来监听事件:
这将为名为"eventName”的事件注册一个侦听器。每当服务器发送此事件时,客户端都会接收到一个带有事件数据的 Event 对象。在此例中,我们将其打印到控制台中。
此外,EventSource 还提供了其他一些有用的功能,例如错误处理和自定义事件重试。例如,我们可以使用以下语法来处理与 EventSource 相关的错误:
这将为所有 EventSource 错误注册一个处理程序。每当出现错误时,客户端都会接收到一个带有错误信息的 Event 对象。在这个例子中,我们将其打印到控制台中。
总体来说,javascript EventSource 是一种非常有用的技术,可以使前端应用程序获得实时数据而无需频繁地从服务器获取更新。由于其内置于现代浏览器中,因此使用 EventSource 非常容易,而且不需要使用额外的库或框架。
EventSource 和 WebSocket 都是用于实现客户端与服务器之间实时双向通信的技术,但它们在很多方面有着不同的特点和适用场景。
协议 EventSource 基于 HTTP 协议,使用的是 HTTP 的长连接机制,而 WebSocket 则是一种独立的协议,与 HTTP 没有关系。
双向通信 WebSocket 支持双向通信,客户端和服务器都可以主动发送数据。而 EventSource 只支持服务器向客户端的单向通信,客户端只能接收数据,不能主动发送数据。
数据格式 WebSocket 可以发送任意格式的数据,包括文本、二进制等。而 EventSource 仅支持纯文本格式,采用了一种特殊的格式来传输事件数据。
浏览器兼容性 WebSocket 是 HTML5 新增的标准,兼容性相对较差,在一些旧版本的浏览器中不支持。而 EventSource 的兼容性相对较好,在大多数现代浏览器中都能够正常工作。
实时性 WebSocket 的实时性更高,它的通信速度和性能都比 EventSource 更优秀。因为 WebSocket 是双向通信,数据传输的效率更高,而 EventSource 由于是单向通信,数据传输的速度会稍慢一些。
跨域 WebSocket 和 EventSource 都可以跨域使用,但跨域的设置方式有所不同。
WebSocket 需要在服务器端进行配置,允许客户端连接。服务器需要在 HTTP 头中添加 "Access-Control-Allow-Origin" 字段,允许来自指定域名的客户端连接。
EventSource 跨域时默认使用 CORS 机制。服务器只需在 HTTP 头中添加 "Access-Control-Allow-Origin" 字段,允许来自指定域名的客户端连接即可。
浏览器兼容性
WebSocket 和 EventSource 在浏览器兼容性方面有所不同。
WebSocket 在一些较老版本的浏览器中不被支持,例如 IE9 及以下版本。但在现代浏览器中,WebSocket 已经得到了广泛的支持。
EventSource 则在较早的浏览器版本中也能够正常工作,包括 IE10 及以上版本、Firefox 6.0 及以上版本、Chrome 13.0 及以上版本等等。但在一些较老的浏览器中,如 Safari 5.1.7 及以下版本,EventSource 可能会遇到一些问题。
总的来说,WebSocket 和 EventSource 在跨域和浏览器兼容性方面都有一些不同。在选择使用哪种技术时,需要根据具体的需求和目标浏览器版本来进行选择
总的来说,WebSocket 和 EventSource 都有着自己的优点和适用场景。WebSocket 更适合需要双向通信的应用场景,例如实时游戏、在线协作等等。而 EventSource 则更适合需要单向数据推送的应用场景,例如实时监控、股票行情等等。因此,在选择使用哪种技术时,需要根据具体的需求进行选择。