【HTML5】浅析html使用SSE（Server-Sent Events）连接JSP
目录结构：
//
一,关于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文件
①HTML页面
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”。中止连接。
response.setContentType("text/event-stream");
错误二
错误描述：“EventSource的响应编码是gb2312不是utf-8,终止连接。”
<meta name="content-type" content="text/html; charset=UTF-8">
和JSP编码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
一致即可。
错误三
错误四
错误五
错误描述：在Chrome中按F12，在控制台中未发现任何错误，但是SSE不能工作。
<%
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的更多相关文章
- 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 ...
- server sent events
server sent events server push https://html5doctor.com/server-sent-events/ https://developer.mozilla ...
- win7中 SQL server 2005无法连接到服务器，错误码：18456
win7中 SQL server 2005无法连接到服务器,错误码:18456.. 数据库刚装完.我用Windows登陆 结果登陆不上去.. 选中SQL Server Management Stud ...
- 处于同一个域中的两台Sql server 实例无法连接
处于同一个域中的两台Sql server 实例无法连接,报的错误信息如下: A network-related or instance-specific error occurred while es ...
- 本地数据库（SQL Server）远程连接服务器端服务器
本地数据库(SQL Server 2012) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1. 首先是要打开 数据的配置管理工具 2. 配置相关的客户端协议,开启TCP/IP 3. 数据库 ...
- SQL Server中内连接和外连接的区别
SQL Server中内连接和外连接的区别 假设一个数据库中有两张表,一张是学生表StudentInfo,一张是班级表ClassInfo,两张表之间用ClassId字段进行关联. 如果用内连接,正常的 ...
- 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
由于项目中必须得用JDK6来作为Java环境,于是连接SQLServer时出现了com.microsoft.sqlserver.jdbc.SQLServerException: 驱动程序无法通过使用安 ...
- SQL Server管理员专用连接的使用
原文:SQL Server管理员专用连接的使用 作为一名DBA,经常会处理一些比较棘手的服务无响应问题,鉴于事态的严重性,多数DBA可能直接用“重启”大法,以便尽快的恢复生产环境的正常运转,但是多数情 ...
- SQL Server "允许远程连接到此服务器" 配置
在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...
随机推荐
- js每天进步一点点
本人菜鸟一枚,进入公司不久,任务不多,期待从零开始学习js,请各位大牛指导!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Android APP压力测试(一)之Monkey工具介绍
Android APP压力测试(一) 之Monkey工具介绍 前言 本文主要介绍Monkey工具.Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动. ...
- SQL Server中的事务日志管理(9/9)：监控事务日志
当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...
- SpringAOP使用扩展
在<初识Spring>中我们了解到Spring支持AOP且可配置方法的前置曾强和后置曾强,但其实Spring支持多种曾强类型.下面同过一些例子来介绍Spring的几种常用的曾强(前置增强和 ...
- 30天C#基础巩固------了解委托，string练习
---->了解委托. 生活中的例子:我要打官司,我需要找一个律师,法庭上面律师为当事人辩护,它真正执行的是当事人的陈词,这时律师 就相当于一个委托对象.当事人则委托律师为自己辩解. ...
- C#开发Windows服务的基础代码
做项目需要对Windows服务进行操作,从网上找了一些资料,总结如下: (以下程序在程序中测试通过) using System; using System.Collections.Generic; u ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- SQLServer中游标是如何处理数据的？
游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次以行或者多行前进或向后浏览数据的能力.我们可以把游标当作一个指针,它可以指定结果中的任何位置,然后允许 ...
- 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸
[源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/F ...
- 不可或缺 Windows Native (17) - C++: 类与对象
[源码下载] 不可或缺 Windows Native (17) - C++: 类与对象 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 类与对象 示例1.类的设计CppE ...