设为首页收藏本站| vip购买 |

cncml手绘网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 618|回复: 0

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

[复制链接]
发表于 2018-9-4 18:54:13 | 显示全部楼层 |阅读模式
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。7 Y0 f5 u4 v% N+ O& s6 T5 v


7 c% f, h4 A* U! r8 E
9 o& c* k+ p! V( {. x  j4 p2 [; ^Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

1 |$ Y) ~+ }7 w$ @
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
  1. var source=new EventSource("demo_sse.php");
    * w( @9 L0 R: D% `" W& l
  2. source.onmessage=function(event)
    - p2 _( _% s4 a2 O, Q! S$ Q
  3. {
    ( W+ }0 M8 r0 P6 ~, t
  4.     document.getElementById("result").innerHTML+=event.data + "<br>";
      |% w1 q9 w, U( R
  5. };
复制代码
实例解析:
  • 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
  • 每接收到一次更新,就会发生 onmessage 事件
  • 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中6 t  _! k6 V0 _

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

  1. if(typeof(EventSource)!=="undefined")$ z! S5 U% l! c6 A4 t/ k# g' K
  2. {
    $ O, a" h2 X' Z; m+ F% R- `# m4 V% p
  3.     // 浏览器支持 Server-Sent
    3 k/ L( |7 a0 Z1 ?; c
  4.     // 一些代码....., B: f5 j2 Y; }. A
  5. }
    7 f" b# M$ p- l; H; H  N; a% V* j: i' f
  6. else
    4 s& g6 R+ Q% a3 c2 v' ?
  7. {5 D9 S' R7 A0 x6 t+ ]% G* E
  8.     // 浏览器不支持 Server-Sent..! }: f# H, G1 L# \: O% N# n" O
  9. }
复制代码

服务器端代码实例
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
  1. <?php ' v' B9 f+ Y+ g7 a, M( I; i) Y
  2. header('Content-Type: text/event-stream'); % I3 i% m, u0 l) d
  3. header('Cache-Control: no-cache');
    5 l8 f$ D; p4 F" R
  4. ! n' R4 K5 c1 O0 H4 m9 ^5 Z; H
  5. $time = date('r');
    ) W% b$ ~- h8 @  z2 R( u
  6. echo "data: The server time is: {$time}\n\n"; 2 z' i1 }* b  w5 K' m5 k! K
  7. flush();
    * _; y5 [0 ~1 [$ G
  8. ?>
复制代码
ASP 代码 (VB) (demo_sse.asp):
  1. <%
    : k  Z2 j8 y8 T5 |7 ?( O, d
  2. Response.ContentType="text/event-stream"
    4 T/ {  f/ _4 c
  3. Response.Expires=-1" ?/ ~$ y7 N) G. [5 v6 L
  4. Response.Write("data: " & now())
    7 B3 l* S% s$ l5 R
  5. Response.Flush()
    3 Z) O3 O( K7 [, b
  6. %>
复制代码
代码解释:
  • 把报头 "Content-Type" 设置为 "text/event-stream"
  • 规定不对页面进行缓存
  • 输出发送日期(始终以 "data: " 开头)
  • 向网页刷新输出数据) U& o4 F( S5 k! [! S

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

/ k' Q; S8 s; E: T2 k$ }1 X, ?$ H! ]0 o, e+ q3 J; {3 L
* _- z1 F8 q$ i, H4 \  G

8 q* P: |5 z) ]) }, R! ?; N; \9 F* A! y* M; L) L3 L* q: Y9 l, c
! h& [' M6 e, g) V7 [/ u: [, i! x

- L- V$ i% B3 j/ A5 u$ V) @& ~+ |1 }

# A5 P' l) K; U& [. f' f. w
! D1 T/ l2 L& U8 a4 a
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则