HTML5中的服务器发送事件Server-sent events

最新推荐文章于 2024-04-26 10:50:00 发布
最新推荐文章于 2024-04-26 10:50:00 发布
阅读量943 收藏
点赞数
分类专栏： Div / Css / XML / HTML5 文章标签： php 网络 javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5904/article/details/82648587
版权

HTML5加了许多新功能，其中服务器发送事件Server-sent events是一个亮点，以下直接贴上代码示例

 

客户端a.html页面

<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="utf-8" />
        <title>服务器推送SSE</title>
        <script type="text/javascript"> 
            $(document).ready(function(){ 
                //检查浏览器支持情况
                if(typeof(EventSource)!=="undefined") { 
                    //定义个对象，用于初始化事件源，这里用c.php这个页面实现 
                    var eSource = new EventSource("c.php"); 
                    //detect message receipt 
                    eSource.onmessage = function(event) { 
                        //将收到的数据展示到页面的ID=content元素中 
                        document.getElementById("content").innerHTML += event.data+'<br />';
最低0.47元/天 解锁文章
iteye_5904
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SSE（Server-Sent Events）技术及其简单演示
qq_61887118的博客
08-14 2万+
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
服务端推送技术 Server-sent Events 快速上手
码农小胖哥
08-22 3514
1. 前言 今天项目经理交给我一个开发任务。如果有人下了订单就给后台一个通知，也就是服务器推送功能。这个需求不是很复杂就一个通知功能，如果我用websocket来做还要搞个websocket服务器，而且还有不少配置。websocket是全双工通信，单向通信简直是杀鸡用牛刀。用轮询吧，浪费服务器资源不说，还不一定实时，订单处理慢了岂不是怠慢了客户。有没有别的选择呢？当然有！ 2. SSE推送技术...
Server-Sent Events 教程
最新发布
あいうえお
04-26 198
默认情况下，服务器发来的数据，总是触发浏览器实例的message事件。开发者还可以自定义 SSE 事件，这种情况下，发送回来的数据不会触发message事件。}, false);上面代码中，浏览器对 SSE 的foo事件进行监听。如何实现服务器发送foo事件，请看下文。
Server-Sent Events 一种轻量级的Push方式
徐小陌的博客
07-31 2501
Server-Sent Events 一种轻量级的Push方式。
Server-Sent Events（HTML5 服务器发送事件）
weixin_30408675的博客
11-10 271
Server-Sent Events简介 Server-Sent Events(SSE)用于网页自动获取服务器上更新的数据，它是一个实时性的机制。 实时性获取数据的解决方案 对于某些需要实时更新的数据（例如Facebook/Twitter 更新、估价更新、新的博文、赛事结果等）来说，有这么几种解决方案： Polling(轮询) 在客户端重复的向服务端发送新请求。如果服务器没有新...
使用Server-Sent Events实现后端主动向前端进行通信
weixin_46102505的博客
01-31 1559
在典型的前后端分离架构中，前端通过发起 HTTP 请求（例如使用 Axios 或 Fetch API）向后端发送请求，后端处理这些请求并返回响应。这种模式是常见的，并符合常规的网络通信方式。然而，有时候确实存在一些特殊情况或需求，需要后端通过主动推送的方式与前端进行通信。这通常使用 WebSocket 或 Server-Sent Events (SSE) 技术来实现。WebSocket 通常更适合实时双向通信，而 SSE 更适合单向通知。本文主要使用 Server-Sent Events 实现。
HTML5 服务器发送事件(Server-Sent Events)
12-13
HTML5 服务器发送事件（Server-Sent Events，简称 SSE）是一种单向通信协议，它使得网页可以持续地从服务器接收实时更新，而无需不断地发送请求。这种技术在实时性要求高的场景下非常有用，例如社交媒体通知、股票...
浅谈HTML5 服务器推送事件（Server-sent Events）
09-27
HTML5 服务器推送事件（Server-Sent Events，简称SSE）是一种允许服务器向客户端实时推送数据的技术。在传统的HTTP协议中，通信模式主要是客户端发起请求，服务器响应。然而，SSE打破了这种模式，实现了服务器到...
server-sent-events:服务器发送事件的示例
05-01
服务器发送事件（Server-Sent Events，简称SSE）是一种允许服务器向客户端实时推送数据的技术，主要应用于单向数据流场景，比如实时股票更新、在线聊天、动态新闻等。与WebSocket不同，SSE使用HTTP长连接，由服务器...
server-sent-events:使用Spring WebFlux框架和React式Kafka的WebFlux服务器，该服务器公开了REST API，以使客户端发出安全的HTTP请求。 在客户端和Web Flow服务器之间建立安全连接后，除非有必要，否则它将使用来自Kafka主题的消息并异步推送数据，而无需关闭与客户端的连接
05-20
服务器发送事件使用Spring WebFlux框架和React式Kafka的WebFlux服务器，该服务器公开了REST API，以使客户端发出安全的HTTP请求。 一旦在客户端和Web Flow服务器之间建立了安全连接，除非有必要，否则它将使用来自...
服务端推送、 server sent event、sse、springboot+sse
wangjun5159的专栏
10-28 553
SSE是一种规范而不是一种新协议，它使用http通信，返回的，客户端通过监听事件不断获取数据，链接断掉后会自动重连，接收完数据后由客户端发起关闭连接。
Server-Sent Events（以下简称 SSE）及event-source-polyfill使用单向长连接(后台主动向前端推送)
热门推荐
周家大小姐
08-17 1万+
SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。如果加自定义参数可以使用三方插件event-source-polyfill。Server-Sent Events 教程 - 阮一峰的网络日志。缺点:不可以比如请求头中加token等。可 以看到token是有加上去的。...
Server-Sent Events和WebSocket服务器向浏览器推送信息
qq_25072517的博客
11-08 1225
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。本文介绍它的用法。 一、SSE 的本质 严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。 也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发
Server-Sent Events实现服务端单向推送消息事件
keketrtr的专栏
05-15 2537
Server-Sent Events（简称SSE）也是H5的新特性，除了IE之外，其他的主流浏览器都支持。这个技术不需要服务端的特别支持，只需要服务端输出的时候设置内容类型为text/event-stream即可。 下面是具体的代码实现（我用java实现的）。 一、jsp页面 pageEncoding="UTF-8"%>     Server-Sent Events D
前端 html5 服务器发送事件(Server-Sent Events)，消息事件
John_jian_yo的博客
07-17 885
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。 浏览器支持 所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。 接收 Server-Sent 事件通知 EventSource 对象用于接收服务器发送事件通知： 实例
server-sent events使用
jiuxiao199132的博客
04-13 1022
定义： 服务器发送事件说明：服务器可以向客户端流式发送文本消息适合场景： 消息推送为什么要用它 : 传统模式的消息推送 是 客户端使用xmlHttpRequest 进行 轮询. 普通xhr 轮询 会造成 消息延迟，高消耗. 长轮询 会减少延迟 ，但是消耗还是很高. 采用server-sent events 这些问题都能得到解
SSE服务器发送事件(Server-Sent Events)
wang_gongzi的博客
09-26 956
兼容性：IE不兼容   Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到，前提是网页需要询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。 服务器端代码实例 把 "Content-Type" 报头设置为 "text/...
HTML 5 服务器发送事件
zhuchunyan_aijia的博客
01-06 1509
对于一般的 Web 应用开发，大多数开发人员并不陌生。在 Web 应用中，浏览器和服务器之间使用的是请求 / 响应的交互模式。浏览器发出请求，服务器根据收到的请求来生成相应的响应。浏览器再对收到的响应进行处理，展现给用户。响应的格式可能是 HTML、XML 或 JSON 等。随着 REST 架构风格和 AJAX 的流行，服务器更多地使用 JSON 作为响应的数据格式。Web 应用使用 XMLH
Server-Sent Events demo
06-09
以下是一个基本的Server-Sent Events示例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Server-Sent Events Demo</title> <meta charset="UTF-8"> </head> <body> <div id="sse"> <h1>Server-Sent Events Demo</h1> </div> <script> if(typeof(EventSource)!=="undefined") { var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("sse").innerHTML += event.data + "<br>"; }; } else { document.getElementById("sse").innerHTML = "Sorry, your browser does not support server-sent events..."; } </script> </body> </html> ``` 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(); ?> ``` 在上面的示例中，HTML页面通过JavaScript创建一个新的EventSource对象，该对象连接到一个名为“demo_sse.php”的PHP文件。PHP文件发送一个包含服务器时间的数据消息，并在每次发送消息后进行缓冲刷新，以确保消息立即传输给客户端。在HTML页面中，每当从服务器接收到新的消息时，将其添加到页面中的“sse”元素中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值