【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,表示此选项开启. 但是这个参数并非是字面上所显示的 ...
随机推荐
- IE浏览器下常见的CSS兼容问题
目录 [1]宽高bug [2]边框bug [3]盒模型bug[4]列表项bug [5]浮动bug [6]定位bug [7]表单bug 宽高bug [1]IE6-浏览器下子元素能撑开父级设置好的宽高 & ...
- Hadoop官方文档翻译——HDFS Architecture 2.7.3
HDFS Architecture HDFS Architecture(HDFS 架构) Introduction(简介) Assumptions and Goals(假设和目标) Hardware ...
- 利用Microsoft.Office.Interop.Excel 将web页面转成PDF
网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...
- 机器学习&数据挖掘笔记_21(PGM练习五:图模型的近似推理)
前言: 这次练习完成的是图模型的近似推理,参考的内容是coursera课程:Probabilistic Graphical Models . 上次实验PGM练习四:图模型的精确推理 中介绍的是图模型的 ...
- Azure Automation (3) 定期将某个Azure订阅下的所有虚拟机开关机
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 在笔者之前的文章中,我们介绍了使用Azure Automation ...
- Redhat7.2 如何修改主机名(hostname)?
Redhat7.2 在安装的时候,会默认生成主机名:localhost. 那么如何修改成自己想要的自己名? //格式为:用户名@主机名 比如: [root@localhost ~]# 修改成[roo ...
- MySQL5.7(5.6)GTID环境下恢复从库思(qi)路(yin)方(ji)法(qiao)
要讨论如何恢复从库,我们得先来了解如下一些概念: GTID_EXECUTED:它是一组包含已经记录在二进制日志文件中的事务集合 GTID_PURGED:它是一组包含已经从二进制日志删除掉的事务集合 ...
- LeetCode - 49. Group Anagrams
49. Group Anagrams Problem's Link ------------------------------------------------------------------ ...
- Git for Windows v2.11.0 Release Notes
homepage faq contribute bugs questions Git for Windows v2.11.0 Release Notes Latest update: December ...
- a:link a:visited a:hover a:active四种伪类选择器的区别
a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...