ChatGPT 对话使用的 EventSource 技术到底是什么？

路多辛

于 2024-05-21 22:06:21 发布

阅读量785

点赞数 21

分类专栏：后端系列知识讲解文章标签：后端 golang 开发语言 EventSource

本文链接：https://blog.csdn.net/luduoyuan/article/details/139103503

版权

后端系列知识讲解专栏收录该内容

64 篇文章 0 订阅

订阅专栏

EventSource（又称为 Server-Sent Events，SSE）是一种在 Web 应用程序中实现服务器推送（服务器向客户端推送实时数据）的技术。是 HTML5 的一部分，实现了服务器向客户端推送数据，而不需要客户端不断地轮询服务器以获取最新数据。相较于 WebSocket 这样的全双工通信协议，EventSource 设计更为简单，特别适用于仅需服务器向客户端推送数据的场景，比如实时消息通知、股票报价更新、社交软件的新消息提示等。

文章持续更新中，微信搜索【路多辛】阅读更多优质文章

什么是 EventSource

EventSource 是 HTML5 中引入的一项技术，定义了一种从服务器到客户端的单向数据传输机制。EventSource 的核心思想是实现服务器端主动推送数据到客户端，而无需客户端频繁发起请求。基于 HTTP 长轮询技术，但与传统的轮询相比，具有更高的效率和实时性，因为一旦连接建立，服务器可以连续发送多个事件到客户端，直到连接关闭。

EventSource 工作原理

EventSource 基于 HTTP 协议，但与传统的 HTTP 请求不同，EventSource 创建了一个持久的连接，这个连接会一直保持打开状态，直到被客户端或服务器明确关闭。服务器可以通过这个连接随时发送新的数据。

建立连接：客户端通过 JavaScript 创建一个 EventSource 对象，指定要连接的服务器端点（URL）。通常是一个特殊的后端处理程序，负责生成并发送实时数据流。例如：

var source = new EventSource('http://example.com/events');

这个 source 对象会向指定的 URL 发送一个 HTTP GET 请求。服务器响应这个请求，并保持连接打开，以便发送后续的数据更新。

数据传输：服务器响应这个请求，并保持连接打开状态，而不是像普通 HTTP 请求那样发送完响应就关闭连接，响应需要设置为 text/event-stream 类型。之后，服务器可以随时发送数据到客户端，以两个换行符结尾，客户端的 EventSource 对象会接收到这个数据块作为一个事件。一个典型的服务器发送的事件可能是这样的：

data: This is a message\n\n

客户端的 EventSource 对象在收到这个数据块后，会触发一个 message 事件。

事件处理：客户端接收到事件后，EventSource 对象会触发相应的事件处理器（如 onmessage, onopen, onerror），开发者可以通过这些处理器处理接收到的数据。例如：

source.onmessage = function(event) {
	console.log("New message:", event.data);
};

服务器还可以发送命名的事件，客户端可以监听这些特定的事件：

event: userconnect
data: {"username": "Alice"}

在客户端，可以这样监听这个命名事件：

source.addEventListener('userconnect', function(event) {
	var data = JSON.parse(event.data);
	console.log(data.username + " connected");
});

断线重连：如果连接意外中断，EventSource 对象会自动尝试重新建立连接，除非明确被关闭或者达到最大重试次数。默认情况下，重连会在断开连接后立即发生。如果服务器想要通知客户端在一段时间后重连，可以包含一个 retry 字段：

retry: 10000\n
data: Please wait 10 seconds before reconnecting\n\n

告诉客户端在10秒后尝试重新连接。

EventSource 的优势

简单轻量：EventSource 的实现和 API 都非常简单，对服务器压力小，不需要复杂的握手过程，易于理解和使用。
自动重连：提供内置的断线重连机制，提高可靠性。
易于部署：基于标准的 HTTP 协议，无需更改服务器配置即可使用。
单向通讯：适合于只需要服务器推送数据的应用场景，简化了客户端逻辑。

EventSource 的局限性

不支持二进制数据：只能发送文本数据。
单向通信：只能从服务器到客户端发送数据，不能从客户端向服务器发送。

EventSource 的使用场景

实时通知：比如社交媒体的实时更新、新闻网站的实时报道等。
股票或货币行情更新：金融应用中的实时价格更新。
在线聊天应用：虽然是单向的，但可以结合其他技术实现双向通信。
游戏状态更新：在在线游戏中推送游戏状态的更新。

示例代码

客户端代码（html+js）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EventSource Example</title>
</head>
<body>
  <h1>Server-sent Events Example</h1>
  <div id="events"></div>

  <script>
    const eventSource = new EventSource('http://localhost:8080/events');
    const eventsDiv = document.getElementById('events');

    eventSource.onmessage = function(event) {
      eventsDiv.innerHTML += `<p>Received: ${event.data}</p>`;
    };

    eventSource.onerror = function(error) {
      console.error('EventSource failed:', error);
      eventSource.close();
    };
  </script>
</body>
</html>

服务端代码（Golang）：

package main

import (
	"fmt"
	"log"
	"net/http"
	"time"
)

func main() {
	http.HandleFunc("/events", eventsHandler)
	log.Println("Server started on :8080")
	if err := http.ListenAndServe(":8080", nil); err != nil {
		log.Fatal("ListenAndServe:", err)
	}
}

func eventsHandler(w http.ResponseWriter, r *http.Request) {
	// 设置响应头
	w.Header().Set("Content-Type", "text/event-stream")
	w.Header().Set("Cache-Control", "no-cache")
	w.Header().Set("Connection", "keep-alive")
	w.Header().Set("Access-Control-Allow-Origin", "*")

	// 发送事件数据
	for {
		timeMsg := fmt.Sprintf("data: The server time is %v\n\n", time.Now())
		w.Write([]byte(timeMsg))
		flusher, ok := w.(http.Flusher)
		if !ok {
			log.Println("Streaming unsupported!")
			return
		}
		flusher.Flush()
		time.Sleep(1 * time.Second)
	}
}

小结

EventSource 是一个强大又简单的 API，为开发者提供了一种在 Web 应用中实现服务器到客户端的实时通信的方法。尽管有很多局限性，但在适当的场景下是一个非常有用的工具。

文章持续更新中，微信搜索【路多辛】阅读更多优质文章

路多辛

关注

21
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
ChatGPT 对话使用的 EventSource 技术到底是什么？

EventSource 是 HTML5 中引入的一项技术，定义了一种从服务器到客户端的单向数据传输机制。EventSource 的核心思想是实现服务器端主动推送数据到客户端，而无需客户端频繁发起请求。基于 HTTP 长轮询技术，但与传统的轮询相比，具有更高的效率和实时性，因为一旦连接建立，服务器可以连续发送多个事件到客户端，直到连接关闭。
复制链接

扫一扫