一、SSE介绍

1.EventSource 对象

SSE 的客户端 API 部署在EventSource对象上。下面的代码可以检测浏览器是否支持 SSE。

if (‘EventSource’ in window) {

}

使用 SSE 时，浏览器首先生成一个EventSource实例，向服务器发起连接。

var source = new EventSource(url);

上面的url可以与当前网址同域，也可以跨域。跨域时，可以指定第二个参数，打开withCredentials属性，表示是否一起发送 Cookie。

var source = new EventSource(url, { withCredentials: true });

readyState 属性

EventSource实例的readyState属性，表明连接的当前状态。该属性只读，可以取以下值。

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

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

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

2.url 属性

EventSource实例的url属性返回连接的网址，该属性只读。

3.withCredentials 属性

EventSource实例的withCredentials属性返回一个布尔值，表示当前实例是否开启 CORS 的withCredentials。该属性只读，默认是false。

4.onopen 属性

连接一旦建立，就会触发open事件，可以在onopen属性定义回调函数。

source.onopen = function (event) {

};

或

source.addEventListener(‘open’, function (event) {

}, false);

5.onmessage 属性

客户端收到服务器发来的数据，就会触发message事件，可以在onmessage属性定义回调函数。

source.onmessage = function (event) {

var data = event.data;

var origin = event.origin;

var lastEventId = event.lastEventId;

};

或

source.addEventListener(‘message’, function (event) {

var data = event.data;

var origin = event.origin;

var lastEventId = event.lastEventId;

}, false);

上面代码中，参数对象event有如下属性：

data：服务器端传回的数据。

origin： 服务器 URL 的域名部分，即协议、域名和端口，表示消息的来源。

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

6.onerror 属性

如果发生通信错误（比如连接中断），就会触发error事件，可以在onerror属性定义回调函数。

source.onerror = function (event) {

};

或

source.addEventListener(‘error’, function (event) {

// handle error event

}, false);

7.自定义事件

默认情况下，服务器发来的数据，总是触发浏览器EventSource实例的message事件。开发者还可以自定义 SSE 事件，这种情况下，发送回来的数据不会触发message事件。

source.addEventListener(‘foo’, function (event) {

var data = event.data;

var origin = event.origin;

var lastEventId = event.lastEventId;

}, false);

8.close() 方法

close方法用于关闭 SSE 连接。

source.close();

二、前端代码

<!DOCTYPE html>

<html>

<head>

<title>测试页面</title>

<meta name="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
　　 // 检查浏览器是否支持SSE

    if ('EventSource' in window) {

        var source = new EventSource('../com/yh/myServlet/GetSession');


        source.onmessage = function(e) {

            console.log("message1:" + e.data);

        };

        source.onopen = function(e) {

            console.log("连接打开.");

        };

        source.onerror = function(e) {

            if (e.readyState == EventSource.CLOSED) {

                console.log("连接关闭");

            } else {

                console.log("onerror:" + e.readyState);

            }

        };

    } else {

        console.log("没有sse");

    }

</script>

</head>

<body>

</body>

</html>

三、后端代码

此处在servlet的doGet()方法中进行响应处理

protected void doGet(HttpServletRequest request, HttpServletResponse response)

        throws ServletException, IOException {

    // TODO Auto-generated method stub

    response.setContentType("text/event-stream;charset=utf-8");

    PrintWriter writer = response.getWriter();

    Random r = new Random();

//        try {

//            Thread.sleep(5000);

//        } catch (InterruptedException e) {

//            e.printStackTrace();

//        }

    // SSE返回数据格式是固定的以data:开头，以\n\n结束

    writer.print("data:第一段\n\n");

}

部分转载自：http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

通过SSE（Server-Send Event）实现服务器主动向浏览器端推送消息的更多相关文章

  1. Android 心跳包心跳连接 如何实现android和服务器长连接呢？推送消息的原理

    前言:现在的大多数移动端应用都有实时得到消息的能力,简单来说,有发送消息的主动权和接受消息的被动权.例如:微信,QQ,天气预报等等,相信好处和用户体验相信大家都知道吧. 提出问题:这种功能必须涉及cl ...

  2. server端推送消息机制

    推送技术相关请参加WIKI: https://zh.wikipedia.org/wiki/%E6%8E%A8%E9%80%81%E6%8A%80%E6%9C%AF 场景: 监控系统:后台硬件温度.电压 ...

  3. $Django 支付宝支付,微信服务号推送消息 (测试需要把应用程序部署到服务器上)

    一 支付宝支付 大概 支付宝支付 正式环境:需要用营业执照去申请商户号,appid 测试环境:沙箱环境:https://openhome.alipay.com/platform/appDaily.ht ...

  4. springmvc 中开发Server Send Event

    springmvc 中开发Server Send Event 学习了:http://blog.csdn.net/leiliz/article/details/55195203 https://www. ...

  5. HTML5服务器推送消息的各种解决办法

    摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制.这就意味着如 ...

  6. HTML5服务器推送消息的各种解决办法，html5服务器

    HTML5服务器推送消息的各种解决办法,html5服务器 摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在 ...

  7. Websocket实现Java后台主动推送消息到前台

    写在前面 需求: 项目测试, 缺少用户登录失败给admin推送消息, 想到这个方式, 当用户登录失败时, admin用户会在页面看到咣咣乱弹的alert. 正文 pom.xml <!-- web ...

  8. 微信java开发之实现微信主动推送消息

    1.拉取access_token2.拉取用户信息3.主动推送消息4.接口貌似要申请权限5.依赖httpclient4.2.3 和jackson 2.2.1 public class WeixinAPI ...

  9. http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送

    使用 nginx 搭建一个 http2 的站点,准备所需: 1,域名 .com .net 均可(国内域名需要 icp 备案) 2,云主机一个,可以自由的安装配置软件的服务器 3,https 证书 ht ...

随机推荐

  1. windows下端口占用

    1,netstat -ano | findstr 1235 2,taskkill /pid 9772 /f

  2. redis异常：(error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk.

    (error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on d ...

  3. C#与dotNET项目想要另存为一个新项目sln文件丢了怎么办

    如下图所示,我想要另存一个工程,把 V4.4整个的项目另存为V4.5,我可以把解决方案文件(.sln)改名字,但是我没法把文件夹改名字,改了打开sln就说找不到. 很简单的一个思路是反正sln是多余的 ...

  4. JSRE中的多任务与多线程

    前言 ​ 这几天在爱智官网看了下JSRE其他的Api,看了一个比较有意思的模块 - 多任务模块task,大致看了下他们的接口说明和案例,感觉和多线程差不多,然后就准备去看下实现方式,找了很久没有找到源 ...

  5. AtCoder Regular Contest 127

    Portal B Description 给出\(n(\leq5\times10^4),L(\leq15)\),构造\(3n\)个不同\(L\)位的三进制数,使得在这\(3n\)个数的每一位上,0/1 ...

  6. C++和Java中的i+++i++

    1 public class Cd { 2 public static void main(String[]args){ 3 int i = 50 ; 4 System.out.println(i++ ...

  7. myeclipse与tomcat，运行jsp程序

    一.myeclipse中配置JRE 步骤: 1.选择window->preferences->Java->Installed JREs 2.点击窗口右边的"add" ...

  8. MYSQL数据库重新初始化

    前言 我们在日常开发过程中,可能会遇到各种mysql服务无法启动的情况,各种百度谷歌之后,依然不能解决的时候,可以考虑重新初始化mysql.简单说就是重置,"恢复出厂设置".重置之 ...

  9. mybatis一对多查询resultMap只返回了一条记录

    问题描述:因为领导的一个需求,需要用到使用resultMap,很久没使用了,结果就除了点意外.就记录下这个问题 准备两个类:author(作者)和book(书),数据库创建对应的author-> ...

  10. Web Api 宿主的搭建

    首先我们要清楚一个概念,宿主.宿主是什么意思?先从了解一下Hosting开始吧! 有关Hosting的基础知识 Hosting是一个非常重要,但又很难翻译成中文的概念.翻译成:寄宿,大概能勉强地传达它 ...