前台
一、流式对话
适用场景
- 实时通知和消息推送
- 实时更新和展示数据
- 实时聊天和协作应用
1、Server-Sent Events (SSE) - 流式服务器推送事件
Server-Sent Events（SSE）是一种基于HTTP协议的服务器推送技术，允许服务器向客户端实时推送数据。它是一种单向通信机制，服务器可以在任意时间主动向客户端发送数据，而无需客户端发送请求。
特点
- 简单: SSE 不需要复杂的协议或库，使用原生的 HTTP 协议即可实现服务器推送数据到客户端。
- 基于HTTP: SSE 使用标准的 HTTP 协议，支持大多数现代浏览器，并与现有的服务器技术无缝集成。
- 实时性: 与轮询或长轮询等传统方法相比，SSE 提供了更低的延迟和更高的实时性，使得服务器更新能够几乎实时地传输到客户端。
- 持久连接: SSE 使用长连接而不是一次性请求-响应，这意味着客户端和服务器之间的连接可以保持打开状态，使得服务器可以随时推送数据。
SSE 的使用步骤
- 建立连接: 客户端通过创建
EventSource对象与服务器建立 SSE 连接。 - 服务器发送数据: 一旦建立连接，服务器可以通过这个连接向客户端发送数据。数据以事件的形式发送，每个事件包含一个标识符和数据字段。
- 客户端处理数据: 客户端通过监听
message事件来处理服务器发送的数据。当服务器发送数据时，EventSource对象会触发message事件，客户端可以从事件对象中获取数据并进行处理。
客户端代码示例
javascriptCopy code
// 创建 SSE 连接
const eventSource = new EventSource('/events?uid=1');
// 处理连接建立
eventSource.addEventListener("open", (event) => {
console.log("连接已建立", JSON.stringify(event));
});
// 处理服务器发送的事件
eventSource.addEventListener("message", (event) => {
// 处理服务器发送的事件数据
const eventData = event.data;
console.log('Received event:', eventData);
}
// 处理连接错误
eventSource.addEventListener("error", (event) => {
console.error("发生错误：", JSON.stringify(event));
});
// 处理连接关闭
eventSource.addEventListener("close", (event) => {
console.log("连接已关闭", JSON.stringify(event.data));
eventSource.close();
console.log(new Date().getTime(), "answer end");
});
服务器端实现
在服务器端，你需要配置一个 SSE 端点来处理客户端的连接请求，并实时推送数据到客户端。具体的实现方式取决于你使用的服务器技术和语言。一般来说，你需要设置 HTTP 头 Content-Type: text/event-stream 来告诉浏览器这是一个 SSE 连接，然后按照 SSE 的规范将数据发送给客户端。
2、流式 WebSocket - 实时双向通信
WebSocket 是一种双向通信协议，它允许服务器和客户端之间建立持久的连接，实现实时的双向通信。相较于传统的 HTTP 协议，WebSocket 提供了更低的延迟和更高的实时性，适用于需要实时双向通信的场景。
特点
- 双向通信: WebSocket 可以实现客户端与服务器之间的双向通信，服务器可以主动向客户端发送消息，同时客户端也可以向服务器发送消息。
- 持久连接: WebSocket 的连接是持久的，一旦建立连接，它将保持打开状态，避免了频繁建立和关闭连接的开销。
- 低延迟: 相较于传统的 HTTP 请求，WebSocket 提供了更低的延迟，使得实时通信更加快速和高效。
- 轻量级协议: WebSocket 的握手过程较简单，传输的数据头部也较小，减少了数据传输的额外负担。
WebSocket 的使用步骤
-
建立连接: 客户端通过创建 WebSocket 对象与服务器建立连接。
-
实时通信: 一旦建立连接，服务器和客户端可以随时通过该连接发送消息，实现实时的双向通信。
-
关闭连接: 当通信结束或不再需要连接时，可以手动关闭 WebSocket 连接。
客户端代码示例
// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');
// 监听连接成功事件
socket.onopen = function(event) {
console.log('WebSocket connected.');
};
// 监听服务器发送的消息
socket.onmessage = function(event) {
const message = event.data;
console.log('Received message:', message);
};
// 向服务器发送消息
socket.send('Hello, server!');
// 关闭连接
socket.close();
服务器端实现
在服务器端，你需要配置 WebSocket 服务器来处理客户端的连接请求，并实现相应的消息处理逻辑。WebSocket 服务器通常需要提供一个 WebSocket 端点，并监听客户端的连接请求，一旦连接建立，服务器可以处理客户端发送的消息，并向客户端发送消息。
欢迎访问我的博客查看更多技术: 地址
