3个基于 Server-sent Events 实现的 Web 实时通信例子-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，实时通信变得越来越重要。这是因为大多数应用程序都需要向用户提供实时反馈，而实时通信正是解决这个问题的一种有效方法。在本文中，我们将介绍三个基于 Server-sent Events（SSE）实现的 Web 实时通信例子。这些例子涵盖了不同的情况，包括实时聊天应用程序、实时统计数据和实时股票报价。我们将为每个例子提供详细的指导意义和代码示例。

什么是 Server-sent Events？

Server-sent Events 是一种 Web 技术，旨在将服务器上的实时数据推送到客户端。这种技术最初在 HTML5 规范中引入，并在现代 Web 应用程序中广泛使用。SSE 允许服务器向客户端发送事件，而不需要客户端发起请求。这意味着服务器可以实时发送数据，而客户端则可以使用 JavaScript 将这些数据动态地插入到 Web 页面中。

SSE 的好处在于，它可以帮助减少服务器负载，因为客户端只需要侦听事件，而不需要发出周期性的请求。此外，SSE 还更加可靠，因为它使用 HTTP 协议，而不像 WebSocket 使用较新的协议。

实时聊天应用程序

实时聊天应用程序是实现 Server-sent Events 的一个常见例子。在这种情况下，一个网站会希望客户端实时地接收服务器上发生的事件，例如新消息。下面是如何以 JavaScript 实现一个实时聊天应用程序：

在 HTML 中添加一个 div 元素，用于显示聊天消息。

<div id="chat"></div>

在 JavaScript 中创建一个 EventSource 对象，用于接收服务器发送的事件。

let eventSource = new EventSource('chat.php');

在 JavaScript 中添加一个事件监听器，用于处理接收到的事件。

eventSource.addEventListener('message', function(event) {
  let data = JSON.parse(event.data);
  let message = data.name + ': ' + data.message;
  let chat = document.getElementById('chat');
  chat.innerHTML += '<p>' + message + '</p>';
}, false);

在服务器端，创建一个 PHP 文件，用于将聊天消息发送回客户端。

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$name = $_GET['name'];
$message = $_GET['message'];

echo "data: {\"name\": \"$name\", \"message\": \"$message\"}\n\n";
flush();

这个例子演示了如何使用 SSE 在 Web 应用程序中实现实时聊天功能。客户端使用 EventSource 对象接收服务器发送的聊天消息，而服务器使用 PHP 文件将聊天消息发送回客户端。

实时统计数据

另一个使用 SSE 的常见例子是实时统计数据。在这种情况下，网站会希望客户端实时地接收服务器上发生的事件，例如用户访问或页面浏览量。下面是如何以 JavaScript 实现一个实时统计数据应用程序：

在 HTML 中添加一个 div 元素，用于显示统计数据。

<div id="stats"></div>

在 JavaScript 中创建一个 EventSource 对象，用于接收服务器发送的事件。

let eventSource = new EventSource('stats.php');

在 JavaScript 中添加一个事件监听器，用于处理接收到的事件。

eventSource.addEventListener('message', function(event) {
  let data = JSON.parse(event.data);
  let stats = document.getElementById('stats');
  stats.innerHTML = 'Visitors: ' + data.visitors + ' Views: ' + data.views;
}, false);

在服务器端，创建一个 PHP 文件，用于将统计数据发送回客户端。

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$visitors = getVisitors();
$views = getViews();

echo "data: {\"visitors\": \"$visitors\", \"views\": \"$views\"}\n\n";
flush();

这个例子演示了如何使用 SSE 在 Web 应用程序中实现实时统计数据功能。客户端使用 EventSource 对象接收服务器发送的统计数据，而服务器使用 PHP 文件将统计数据发送回客户端。

实时股票报价

最后一个使用 SSE 的例子是实时股票报价。在这种情况下，网站会希望客户端实时地接收服务器上发生的事件，例如股票价格变化。下面是如何以 JavaScript 实现一个实时股票报价应用程序：

在 HTML 中添加一个 div 元素，用于显示股票报价。

<div id="stock"></div>

在 JavaScript 中创建一个 EventSource 对象，用于接收服务器发送的事件。

let eventSource = new EventSource('stock.php');

在 JavaScript 中添加一个事件监听器，用于处理接收到的事件。

eventSource.addEventListener('message', function(event) {
  let data = JSON.parse(event.data);
  let stock = document.getElementById('stock');
  stock.innerHTML = 'Price: ' + data.price + ' Change: ' + data.change;
}, false);

在服务器端，创建一个 PHP 文件，用于将股票报价发送回客户端。

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$price = getPrice();
$change = getChange();

echo "data: {\"price\": \"$price\", \"change\": \"$change\"}\n\n";
flush();

这个例子演示了如何使用 SSE 在 Web 应用程序中实现实时股票报价功能。客户端使用 EventSource 对象接收服务器发送的股票报价，而服务器使用 PHP 文件将股票报价发送回客户端。

总结

在 Web 应用程序中实现实时通信是很重要的一步。Server-sent Events 是一种有效和可靠的技术，可以帮助实现实时通信。在本文中，我们介绍了三个基于 SSE 的实时通信例子，包括实时聊天应用程序、实时统计数据和实时股票报价。通过实现这些例子，希望读者可以更好地了解 Server-sent Events 的原理和如何在 Web 应用程序中实现实时通信。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64621103968c7c53b0364ef9