【HTML5】浅析html使用SSE（Server-Sent Events）连接JSP
| 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连接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 + "
";
};客户端完整代码：
<html>
<head>
<title>SSEtitle>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
head>
<body>
<h1>get datah1>
<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 + "
";
};
}
else
{
document.getElementById("result").innerHTML="not support SSE";
}
script>
body>
html>
②服务器端
response.setContentType("text/event-stream");<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+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'sseserver.jsp' starting pagetitle>
<%
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">
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");错误二
<meta name="content-type" content="text/html; charset=UTF-8">和JSP编码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
一致即可。
错误三
错误四
[LivePreview] Error executing a handler for Runtime.evaluate 错误处理：如果你打开一个原始的Html页面（无SSE的），会发现都有这样的错误。如果你的SSE无法工作，而Chrome中只有这个错误，那么可能是下面的错误五引起的。
错误五
<%
Date date = new Date();//create time Object
out.println("2");
out.println("data:"+date.toString());
out.flush();
%>这样就可以正常显示数据了。有时候event不能显示字符串，我认为是EventSource的工作机制造成的。