devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SSE：服务器发送事件,使用长链接进行通讯-及各语言服务端实现样例_jquery创建sse链接

作者：我家小花儿 | 2024-03-29 11:21:18

赞

踩

jquery创建sse链接

概述

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。

服务器发送事件（Server-Sent Events，简称SSE）就是为了解决这个问题，而提出的一种新API，部署在EventSource对象上。目前，除了IE，其他主流浏览器都支持。

简单说，所谓SSE，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单，就是“信息”加上前缀“data: ”，然后以“\n\n”结尾。

  1. $ curl http://example.com/dates
  2. data: 1394572346452
  3.  
  4. data: 1394572347457
  5.  
  6. data: 1394572348463
  7.  
  8. ^C

SSE与WebSocket有相似功能，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：

  • WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。

  • WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在HTTP协议之上的，现有的服务器软件都支持。

  • SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。

  • SSE默认支持断线重连，WebSocket则需要额外部署。

  • SSE支持自定义发送的数据类型。

从上面的比较可以看出，两者各有特点，适合不同的场合。

客户端代码

概述

首先，使用下面的代码，检测浏览器是否支持SSE。

  1. if (!!window.EventSource) {
  2.   // ...
  3. }

然后，部署SSE大概如下。

  1. var source = new EventSource('/dates');
  2.  
  3. source.onmessage = function(e){
  4.   console.log(e.data);
  5. };
  6.  
  7. // 或者
  8.  
  9. source.addEventListener('message', function(e){})

建立连接

首先，浏览器向服务器发起连接，生成一个EventSource的实例对象。

var source = new EventSource(url);

参数url就是服务器网址，必须与当前网页的网址在同一个网域（domain），而且协议和端口都必须相同。

下面是一个建立连接的实例。

  1. if (!!window.EventSource) {
  2.   var source = new EventSource('http://127.0.0.1/sses/');
  3. }

新生成的EventSource实例对象，有一个readyState属性，表明连接所处的状态。

source.readyState

它可以取以下值：

  • 0，相当于常量EventSource.CONNECTING，表示连接还未建立，或者连接断线。

  • 1，相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。

  • 2，相当于常量EventSource.CLOSED，表示连接已断，且不会重连。

open事件

连接一旦建立，就会触发open事件，可以定义相应的回调函数。

  1. source.onopen = function(event) {
  2.   // handle open event
  3. };
  4.  
  5. // 或者
  6.  
  7. source.addEventListener("open", function(event) {
  8.   // handle open event
  9. }, false);

message事件

收到数据就会触发message事件。

  1. source.onmessage = function(event) {
  2.   var data = event.data;
  3.   var origin = event.origin;
  4.   var lastEventId = event.lastEventId;
  5.   // handle message
  6. };
  7.  
  8. // 或者
  9.  
  10. source.addEventListener("message", function(event) {
  11.   var data = event.data;
  12.   var origin = event.origin;
  13.   var lastEventId = event.lastEventId;
  14.   // handle message
  15. }, false);

参数对象event有如下属性：

  • data：服务器端传回的数据（文本格式）。

  • origin： 服务器端URL的域名部分，即协议、域名和端口。

  • lastEventId：数据的编号，由服务器端发送。如果没有编号，这个属性为空。

error事件

如果发生通信错误（比如连接中断），就会触发error事件。

  1. source.onerror = function(event) {
  2.   // handle error event
  3. };
  4.  
  5. // 或者
  6.  
  7. source.addEventListener("error", function(event) {
  8.   // handle error event
  9. }, false);

自定义事件

服务器可以与浏览器约定自定义事件。这种情况下，发送回来的数据不会触发message事件。

  1. source.addEventListener("foo", function(event) {
  2.   var data = event.data;
  3.   var origin = event.origin;
  4.   var lastEventId = event.lastEventId;
  5.   // handle message
  6. }, false);

上面代码表示，浏览器对foo事件进行监听。

close方法

close方法用于关闭连接。

source.close();

数据格式

概述

服务器端发送的数据的HTTP头信息如下：

  1. Content-Type: text/event-stream
  2. Cache-Control: no-cache
  3. Connection: keep-alive

后面的行都是如下格式：

field: value\n

field可以取四个值：“data”, “event”, “id”, or “retry”，也就是说有四类头信息。每次HTTP通信可以包含这四类头信息中的一类或多类。\n代表换行符。

以冒号开头的行，表示注释。通常，服务器每隔一段时间就会向浏览器发送一个注释，保持连接不中断。

: This is a comment

下面是一些例子。

  1. : this is a test stream\n\n
  2.  
  3. data: some text\n\n
  4.  
  5. data: another message\n
  6. data: with two lines \n\n

data：数据栏

数据内容用data表示，可以占用一行或多行。如果数据只有一行，则像下面这样，以“\n\n”结尾。

data:  message\n\n

如果数据有多行，则最后一行用“\n\n”结尾，前面行都用“\n”结尾。

  1. data: begin message\n
  2. data: continue message\n\n

总之，最后一行的data，结尾要用两个换行符号，表示数据结束。

以发送JSON格式的数据为例。

  1. data: {\n
  2. data: "foo": "bar",\n
  3. data: "baz", 555\n
  4. data: }\n\n

id：数据标识符

数据标识符用id表示，相当于每一条数据的编号。

  1. id: msg1\n
  2. data: message\n\n

浏览器用lastEventId属性读取这个值。一旦连接断线，浏览器会发送一个HTTP头，里面包含一个特殊的“Last-Event-ID”头信息，将这个值发送回来，用来帮助服务器端重建连接。因此，这个头信息可以被视为一种同步机制。

event栏：自定义信息类型

event头信息表示自定义的数据类型，或者说数据的名字。

  1. event: foo\n
  2. data: a foo event\n\n
  3.  
  4. data: an unnamed event\n\n
  5.  
  6. event: bar\n
  7. data: a bar event\n\n

上面的代码创造了三条信息。第一条是foo，触发浏览器端的foo事件；第二条未取名，表示默认类型，触发浏览器端的message事件；第三条是bar，触发浏览器端的bar事件。

retry：最大间隔时间

浏览器默认的是，如果服务器端三秒内没有发送任何信息，则开始重连。服务器端可以用retry头信息，指定通信的最大间隔时间。

retry: 10000\n

客户端代码:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>SSE Demo</title>
  5. </head>
  6. <body>
  7. 	<div id="msg_from_server">12222</div>
  8. 	<script type="text/javascript" src="../js/jquery.js"></script>
  9. 	<script type="text/javascript">
  10. 		if (!!window.EventSource) {
  11. 			var source = new EventSource('/test/test/push'); //为http://localhost:8080/testSpringMVC/push
  12. 			s = '';
  13. 			source.addEventListener('message', function(e) {
  14. 				s += e.data + "<br/>"
  15. 				$("#msg_from_server").html(s);
  16. 			});
  17. 			source.addEventListener('open', function(e) {
  18. 				console.log("连接打开.");
  19. 			}, false);
  20. 			source.addEventListener('error', function(e) {
  21. 				if (e.readyState == EventSource.CLOSED) {
  22. 					console.log("连接关闭");
  23. 				} else {
  24. 					console.log(e.readyState);
  25. 				}
  26. 			}, false);
  27. 		} else {
  28. 			alert(4);
  29. 			console.log("没有sse");
  30. 		}
  31. 	</script>
  32. </body>
  33. </html>

服务器代码

服务器端发送事件，要求服务器与浏览器保持连接。对于不同的服务器软件来说，所消耗的资源是不一样的。Apache服务器，每个连接就是一个线程，如果要维持大量连接，势必要消耗大量资源。Node.js则是所有连接都使用同一个线程，因此消耗的资源会小得多，但是这要求每个连接不能包含很耗时的操作，比如磁盘的IO读写。

下面是Node.js的服务器发送事件的代码实例。

  1. var http = require("http");
  2.  
  3. http.createServer(function (req, res) {
  4.  
  5.     var fileName = "." + req.url;
  6.  
  7.     if (fileName === "./stream") {
  8.         res.writeHead(200, {"Content-Type":"text/event-stream", 
  9.                             "Cache-Control":"no-cache", 
  10.                             "Connection":"keep-alive"});
  11.         res.write("retry: 10000\n");
  12.         res.write("event: connecttime\n");
  13.         res.write("data: " + (new Date()) + "\n\n");
  14.         res.write("data: " + (new Date()) + "\n\n");
  15.  
  16.         interval = setInterval(function() {
  17.             res.write("data: " + (new Date()) + "\n\n");
  18.         }, 1000);
  19.  
  20.         req.connection.addListener("close", function () {
  21.             clearInterval(interval);
  22.         }, false);
  23.   }
  24. }).listen(80, "127.0.0.1");

PHP代码实例。

  1. <?php
  2. header('Content-Type: text/event-stream');
  3. header('Cache-Control: no-cache'); // 建议不要缓存SSE数据
  4.  
  5. /**
  6.  * Constructs the SSE data format and flushes that data to the client.
  7.  *
  8.  * @param string $id Timestamp/id of this connection.
  9.  * @param string $msg Line of text that should be transmitted.
  10.  */
  11. function sendMsg($id, $msg) {
  12.   echo "id: $id" . PHP_EOL;
  13.   echo "data: $msg" . PHP_EOL;
  14.   echo PHP_EOL;
  15.   ob_flush();
  16.   flush();
  17. }
  18.  
  19. $serverTime = time();
  20.  
  21. sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));

JAVA 实现:

  1. package test;
  2. import java.util.Random;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.ResponseBody;
  6. @Controller
  7. @RequestMapping(value = "/test")
  8. public class SEEController {
  9. //设置响应格式
  10. 	@RequestMapping(value = "/push", produces = "text/event-stream;charset=UTF-8")
  11. 	public @ResponseBody String push() {
  12. 		Random r = new Random();
  13. 		try {
  14. 			Thread.sleep(5000);
  15. 		} catch (InterruptedException e) {
  16. 			e.printStackTrace();
  17. 		}
  18. //SSE返回数据格式是固定的以data:开头，以\n\n结束
  19. 		return "data:Testing 1,2,3" + r.nextInt() + "\n\n";
  20. 	}
  21. }

参考链接

https://www.cnblogs.com/goody9807/p/4257192.html

https://blog.csdn.net/ocean_fan/article/details/79225203

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号