目录结构：

//

contents structure [-]

一,关于SSE的一些话

①什么是SSE

SSE(Server-Sent Events)是一个能让浏览器通过HTTP协议自动获取服务器端更新的技术。这种技术封装在SSE EventSource API里，打开链接可以阅读。SSE EventSource API 被W3C制定为HTML5的一部分。

②SSE的浏览支持情况

目前主流的浏览器都支持，除了IE。

Browser Supported Notes
Internet Explorer No IE not supported
Mozilla Firefox Yes version 6.0
Google Chrome Yes GC is supported
Opera Yes version 11
Safari Yes version 5.0

③SSE的工作机制

我几乎没在网上看到有人提过这一点，这里仅仅是我的理解。当一个使用了SSE的HTML页面发布并且在支持的浏览器端载入成功后。那么带有SSE的页面就会让浏览器建立一种访问机制——在规定的间隔时间不停地访问SSE指定服务器中的数据，如果服务器端数据有更新则获取并输出到当前的html5页面上，这个过程会存在延迟存在，延迟时间会和服务器类型、数据大小、浏览器支持情况等有关。

下面这张图片是我使用SSE连接jsp成功后，再关闭服务器出现的情况，读者也可以自己试，会发现这些错误出现是有间隔时间的，这就是延迟，自己的大概3秒。

二，使用SSE连接JSP文件

①HTML页面

这个文件的MIME类型要设置为text/heml，它是被浏览器响应的。测试当前浏览器是否支持SSE：

if(typeof(EventSource)!=="undefined")
{
    alert("Support");
}
else
{
    alert("Not Support");
}

EventSource对象用于接受服务器端发送事件通知，每当source接受到来着sseserver页面的更新消息，就会触发onmessage事件，然后会将数据推入id为”result”的元素中。除了onmessage事件，EventSource对象还有onerror和onopen。

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误 
 var source=new EventSource("sseserver.jsp");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };

客户端完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>SSE</title>

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

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
<body>
<h1>get data</h1>
<div id="result"></div>
<div id = "err"></div>

<script>
if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("sseserver.jsp");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };
}
else
{
    document.getElementById("result").innerHTML="not support SSE";
}
</script>

</body>
</html>

②服务器端

网上的教程大部分都是使用php和Asp，这里自己使用JSP，原理都是一样，在使用之前都必须将MIME类型设置为“text/event-stream”。

 
 response.setContentType("text/event-stream")

这行代码需要放在所有<meta>的前面，不然会报出错误：“EventSource’s response has a MIME type (“text/html”) that is not “text/event-stream”. Aborting the connection.”。有兴趣的读者可以试一试在<meta>添加这行代码：

<meta name="content-type" content="text/event-stream">

笔者在Chrome上测试过，它对SSE不会产生任何作用。服务器端完整代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'sseserver.jsp' starting page</title>
     <%
    response.setContentType("text/event-stream");
     %>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>

  <body>
  <%
  Date date = new Date();//create time Object
  out.println("data:"+date.toString());
  out.flush();
  %>
  </body>
</html>

三，错误

错误一

错误描述：EventSource的响应有一个MIME类型（“text/html”），不是“text/source”。中止连接。

错误代码：“EventSource’s response has a MIME type (“text/html”) that is not “text/event-stream”. Aborting the connection.”               
 错误处理：很明显需要设置一个MIME类型。当你设置了“text/stream”后，还是报出这个错误，那么可能是你设置的位置不正确。当出现错误后大部分应该是调出JSP的源码，会发现有一行代码是“ response.setContentType(“text/html;charset=utf-8”);”
 
需要修改的就是这里的“text/html”，笔者认为这里的Content-type是一个默认值，如果需要用户是可以在后面重新设置的

 response.setContentType("text/event-stream");

错误二

错误描述：“EventSource的响应编码是gb2312不是utf-8,终止连接。”

错误代码：EventSource’s response has a charset (“gb2312”) that is not UTF-8. Aborting the connection
错误处理：确保html编码

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

和JSP编码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

一致即可。

错误三

 
错误描述：无法找到目的文件                
错误代码：GET ……… net::ERR_CONNECTION_REFUSED  
错误处理：检查文件布置、书写是否有误。

错误四

错误描述：无法设置未定义的选择器              
错误代码：Cannot set property ‘selector’ of undefined[LivePreview] Error executing a handler for Runtime.evaluate               
错误处理：如果你打开一个原始的Html页面（无SSE的），会发现都有这样的错误。如果你的SSE无法工作，而Chrome中只有这个错误，那么可能是下面的错误五引起的。

错误五

错误描述：在Chrome中按F12，在控制台中未发现任何错误，但是SSE不能工作。

错误代码：无                
错误解决：这个问题让人挺蛋疼的，自己遇上的时候琢磨了好久，后来认为是onmessage没有工作，然后又在网上找了找，关于这样的文章不多。我找到一篇Blog给出了“偏方”，点击查看偏方。不过他的方法不适合我。我的偏方是这样的：

  <%
  Date date = new Date();//create time Object
  out.println("2");
  out.println("data:"+date.toString());
  out.flush();
  %>

这样就可以正常显示数据了。有时候event不能显示字符串，我认为是EventSource的工作机制造成的。

四，参考文章

http://blog.csdn.net/u011627980/article/details/51362799?locationNum=7&fps=1    

【HTML5】浅析html使用SSE（Server-Sent Events）连接JSP的更多相关文章

  1. Play Framework, Server Sent Events and Internet Explorer

    http://www.tuicool.com/articles/7jmE7r Next week I will be presenting at Scala Days . In my talk I w ...

  2. server sent events

    server sent events server push https://html5doctor.com/server-sent-events/ https://developer.mozilla ...

  3. win7中 SQL server 2005无法连接到服务器，错误码：18456

    win7中 SQL server 2005无法连接到服务器,错误码:18456.. 数据库刚装完.我用Windows登陆  结果登陆不上去.. 选中SQL Server Management Stud ...

  4. 处于同一个域中的两台Sql server 实例无法连接

    处于同一个域中的两台Sql server 实例无法连接,报的错误信息如下: A network-related or instance-specific error occurred while es ...

  5. 本地数据库（SQL Server）远程连接服务器端服务器

    本地数据库(SQL Server 2012) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1. 首先是要打开 数据的配置管理工具 2. 配置相关的客户端协议,开启TCP/IP 3. 数据库 ...

  6. SQL Server中内连接和外连接的区别

    SQL Server中内连接和外连接的区别 假设一个数据库中有两张表,一张是学生表StudentInfo,一张是班级表ClassInfo,两张表之间用ClassId字段进行关联. 如果用内连接,正常的 ...

  7. 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接

    由于项目中必须得用JDK6来作为Java环境,于是连接SQLServer时出现了com.microsoft.sqlserver.jdbc.SQLServerException: 驱动程序无法通过使用安 ...

  8. SQL Server管理员专用连接的使用

    原文:SQL Server管理员专用连接的使用 作为一名DBA,经常会处理一些比较棘手的服务无响应问题,鉴于事态的严重性,多数DBA可能直接用“重启”大法,以便尽快的恢复生产环境的正常运转,但是多数情 ...

  9. SQL Server "允许远程连接到此服务器" 配置

    在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...

随机推荐

  1. Android入门(十五)通知

    原文链接:http://www.orlion.ga/663/ 1.通知的基本用法 创建通知的步骤,首先需要一个NotificationManager来对通知进行管理,可以调用Context的getSy ...

  2. python--基础学习（六）sqlite数据库基本操作

    python系列均基于python3.4环境 1.新建数据表 新建表,命名为student(id, name, score, sex, age),id为关键字,代码如下: import sqlite3 ...

  3. Oracle Dataguard之switchover

    Oracle Dataguard的角色转换包含两类:Switchover和Failover.Switchover指主备之间角色转换,主库降为备库,备库升级为主库.而failover则是指主库出现问题时 ...

  4. Docker - 配置DaoCloud的Docker加速器（国内registry-mirror）

    由于众所周知的原因,从Docker Hub难以高效地下载镜像. 除了使用VPN或代理之外,最为有效的方式就是使用Docker国内镜像. DaoCloud是首个提供国内免费Docker Hub镜像的团体 ...

  5. Android OpenGL 编写简单滤镜

    Android 上使用Opengl进行滤镜渲染效率较高,比起单纯的使用CPU给用户带来的体验会好很多.滤镜的对象是图片,图片是以Bitmap的形式表示,Opengl不能直接处理Bitmap,在Andr ...

  6. 实例演示Android异步加载图片

    本文给大家演示异步加载图片的分析过程.让大家了解异步加载图片的好处,以及如何更新UI.首先给出main.xml布局文件:简单来说就是 LinearLayout 布局,其下放了2个TextView和5个 ...

  7. svn冲突问题详解

    开发人员都知道代码管理工具是开发中一个必不可少的工具,这里也不废话详细介绍了.不管你个人喜欢git还是svn还是其他,但还有一大部分公司在使用svn做代码管理工具.这里详细介绍下SVN提交文件时冲突问 ...

  8. Hyperledger fabric Client Node.js Hello World示例程序

    简介 Hyperledger fabric Client (HFC)提供了基于Node.js的应用接口来访问Hyperledger区块. 本文介绍了一个使用HFC访问IBM Bluemixr区块服务的 ...

  9. Java进阶之reflection(反射机制)——反射概念与基础

    反射机制是Java动态性之一,而说到动态性首先得了解动态语言.那么何为动态语言? 一.动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以引进,已有的函数可以被删除等结构上的变化.比如常见 ...

  10. 聊一下C#开发者如何过渡到JAVA 开发者

    由于工作需要,最近也开始倒腾Java了.NET的话,从2012年测试版开始玩的,那个时候VB6比较熟悉,还天真的以为VB.NET以后会很火, 事实证明,也只是一厢情愿,有C#了,要VB.NET干什么? ...