菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML 教程

HTML 首页 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 格式化 HTML 引用 HTML 注释 HTML 颜色 HTML CSS HTML 链接 HTML 图像 HTML 收藏夹图标 HTML 页面标题 HTML 表格 HTML 列表 HTML 块元素和内联元素 HTML Div HTML Classes HTML Id HTML Iframes HTML JavaScript HTML 文件路径 HTML Head HTML 布局 HTML 响应式 HTML Computercode HTML 语义化元素 HTML 风格指南 HTML 实体 HTML 符号 HTML 表情符号 HTML 字符集 HTML URL 编码 HTML vs. XHTML

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML 输入属性 输入表单属性

HTML 图形

HTML Canvas HTML SVG

HTML 媒体

HTML 媒体 HTML 视频 HTML 音频 HTML 插件 HTML YouTube

HTML API

HTML 地理定位 HTML 拖放 HTML Web 存储 HTML Web Workers HTML SSE

HTML 示例

HTML 示例 HTML 编辑器 HTML 测验 HTML 练习 HTML 网站 HTML 面试准备 HTML 新兵训练营 HTML 证书 HTML 摘要 HTML 无障碍性

HTML 参考

HTML 标签列表 HTML 属性 HTML 全局属性 HTML 浏览器支持 HTML 事件 HTML 颜色 HTML Canvas HTML 音频/视频 HTML Doctype HTML 字符集 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法 PX 到 EM 转换器 键盘快捷键

HTML SSE API


服务器发送事件 (SSE) 允许网页从服务器接收更新。


服务器发送事件 - 单向消息传递

服务器发送事件是指网页自动接收来自服务器的更新。

以前也可以做到这一点,但网页必须询问是否有任何可用更新。有了服务器发送事件,更新会自动到来。

示例:Facebook/Twitter 更新、股票价格更新、新闻推送、体育比分等。


浏览器支持

表中的数字指定了完全支持服务器发送事件的第一个浏览器版本。

API
SSE 6.0 79.0 6.0 5.0 11.5

接收服务器发送事件通知

EventSource 对象用于接收服务器发送事件通知

示例

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};
自己动手试一试 »

示例说明

  • 创建一个新的 EventSource 对象,并指定发送更新的页面的 URL(在本例中为“demo_sse.php”)
  • 每次收到更新时,都会发生 onmessage 事件
  • 当 onmessage 事件发生时,将收到的数据放入 id="result" 的元素中

检查服务器发送事件支持

在上面的 tryit 示例中,有一些额外的代码来检查浏览器对服务器发送事件的支持

if(typeof(EventSource) !== "undefined") {
  // 是的!支持服务器发送事件!
  // 一些代码.....
} else {
  // 对不起!不支持服务器发送事件..
}


服务器端代码示例

为了让上面的示例正常工作,您需要一个能够发送数据更新的服务器(如 PHP 或 ASP)。

服务器端事件流语法很简单。将“Content-Type”标头设置为“text/event-stream”。现在您可以开始发送事件流。

PHP 代码(demo_sse.php)

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

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 代码(VB)(demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代码说明

  • 将“Content-Type”标头设置为“text/event-stream”
  • 指定页面不应缓存
  • 输出要发送的数据(始终以“data: ”开头)
  • 将输出数据刷新回网页

EventSource 对象

在上面的示例中,我们使用 onmessage 事件来获取消息。但其他事件也可用

活动 描述
onopen 当与服务器的连接打开时
onmessage 收到消息时
onerror 发生错误时

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持