您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14117|回复: 0
打印 上一主题 下一主题

[html5] HTML5 服务器发送事件(Server-Sent Events)

[复制链接]
跳转到指定楼层
楼主
发表于 2018-9-4 18:54:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
. c. {) q9 [/ T2 G
! Y* m- P" m0 A1 u4 d
. b& [; W+ c8 z, L( N3 v' x
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。


; d( V( u" ]' y; p% J. G7 k, n接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
  1. var source=new EventSource("demo_sse.php");
    9 Z3 x: ]' J2 h9 b  V) t7 ~: t
  2. source.onmessage=function(event)' s& }; o6 A7 @6 ^
  3. {
    ( S5 B  O% d- ~5 R
  4.     document.getElementById("result").innerHTML+=event.data + "<br>";% Q" F8 x5 I6 R
  5. };
复制代码
实例解析:
  • 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
  • 每接收到一次更新,就会发生 onmessage 事件
  • 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中( z$ Q, k; h% I$ ^, K! J. y

检测 Server-Sent 事件支持
以下实例,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:

  1. if(typeof(EventSource)!=="undefined")
    3 _7 O0 d  n  E. G4 i$ d$ V
  2. {
    & |$ [' H, O- b' J
  3.     // 浏览器支持 Server-Sent' X- g, \: o/ J  j  y# t2 U) z* \
  4.     // 一些代码.....
    , m5 u- K! e  M8 X: x; {
  5. }) V2 a% |7 b4 n% W  u
  6. else
    4 |! w: X% ~. F- x9 w: B( w2 M
  7. {, g1 S& D; I& |( w6 z6 B
  8.     // 浏览器不支持 Server-Sent..$ l: N& X4 n2 k1 F
  9. }
复制代码

服务器端代码实例
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
  1. <?php 4 ?  k* c4 G; f( H/ Z6 s  o
  2. header('Content-Type: text/event-stream'); : J$ C) Y6 k* X6 T0 _9 m
  3. header('Cache-Control: no-cache'); 3 o- J0 {1 `+ Y5 ?* B8 R
  4. * @3 G1 K: u' t
  5. $time = date('r');
    5 p* s3 _# _- d) x& ]$ c* P
  6. echo "data: The server time is: {$time}\n\n";
    8 C! S, H2 p6 Z. N6 a9 v' i
  7. flush(); / r6 {+ Z- I6 E# Z9 m. L' p
  8. ?>
复制代码
ASP 代码 (VB) (demo_sse.asp):
  1. <%
    / a+ L% S- v, @$ s; w, d0 T4 J& j
  2. Response.ContentType="text/event-stream"
    ; |9 {! M2 r8 w- k& G8 g5 u
  3. Response.Expires=-1) j( F$ w# \( Q, O6 P
  4. Response.Write("data: " & now())
    6 l2 V: j& a7 |/ R9 M" x  c
  5. Response.Flush()
    0 _) L. J% r; Z6 B& _* J
  6. %>
复制代码
代码解释:
  • 把报头 "Content-Type" 设置为 "text/event-stream"
  • 规定不对页面进行缓存
  • 输出发送日期(始终以 "data: " 开头)
  • 向网页刷新输出数据( X. ]9 V7 _8 v* j) d

EventSource 对象
在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件
描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当发生错误

4 l& N" V# A) r- H. J$ d- H! ~; [+ V  t' D* \8 r

  b# \6 U+ m+ v& ^) X) O* v  t
# ]* q7 d" r7 V6 k" t! V8 h
9 w' \* o) Q3 _0 V+ K
* c7 p, [" `9 ]
: }1 P* ~8 g, E8 t/ P
$ J" n0 z5 V/ M9 V  f* W) w( S3 s+ R6 z2 L1 y- r) J
" N) H. G! F. u
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 20:20 , Processed in 0.052578 second(s), 19 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!