菜单

【HTML5】浅析html使用SSE(Server-Sent 伊芙nts)连接JSP

2019年5月5日 - jQuery

目录结构:

contents structure [-]

至于SSE的部分话

  1. 什么是SSE
  2. SSE的浏览器帮忙情形
  3. SSE的工作体制

使用SSE连接JSP文件

  1. HTMl页面
  2. 劳务器端

错误

  1. 错误一
  2. 错误二
  3. 错误三
  4. 错误四
  5. 错误五

参考小说

 

一,关于SSE的有个别话

    ①什么是SSE

                SSE(Server-Sent
Events)是1个能让浏览器通过HTTP协议自动获得服务器端更新的技术。那种本领封装在SSE
EventSource

API里,张开链接能够阅读。SSE 伊夫ntSource 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秒。

图片 1

二,使用SSE连接JSP文件

    ①HTML页面

             

这一个文件的MIME类型要设置为text/heml,它是被浏览器响应的。测试当前浏览器是还是不是帮忙SSE:

 

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

伊夫ntSource对象用于接受服务器端发送事件通报,每当source接受到来着sseserver页面包车型客车换代音讯,就能够触发onmessage事件,然后会将数据推入id为”result”的要素中。除了onmessage事件,伊夫ntSource对象还有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>的前头,否则会报出荒唐:“伊芙ntSource’s
response has a MIME type (“text/html”) that is not “text/event-stream”.
Aborting the
connection.”。风乐趣的读者可以试1试在<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>

 

三,错误

错误一

错误描述:伊芙ntSource的响应有3个MIME类型(“text/html”),不是“text/source”。中止连接。                

错误代码:“伊芙ntSource’s response has a MIME type (“text/html”) that is
not “text/event-stream”. Aborting the connection.”               

 错误管理:很精晓需求设置一个MIME类型。当你设置了“text/stream”后,依然报出那几个荒唐,那么或然是您设置的职分不科学。当出现错误后许多应当是调出JSP的源码,会发觉有1行代码是“
response.setContentType(“text/html;charset=utf-八”);”图片 2

 

内需修改的便是这里的“text/html”,小编感到这里的Content-type是3个默许值,要是供给用户是可以在后面复位的

 

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

 

错误二

荒唐描述:“伊夫ntSource的响应编码是gb2312不是utf-八,终止连接。”                

错误代码:伊芙ntSource’s response has a charset (“gb231二”) that is not
UTF-八. 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::EENCORE科雷傲_CONNECTION_REFUSED  

错误处理:检查文件计划、书写是还是不是有误。

    错误四

                

不当描述:不恐怕设置未定义的选料器              

错误代码:Cannot set property ‘selector’ of undefined[LivePreview]
Error executing a handler for Runtime.evaluate               

错误管理:假若你张开二个原有的Html页面(无SSE的),会发觉都有这么的错误。假若你的SSE无法专门的职业,而Chrome中唯有这几个指鹿为马,那么可能是上边包车型大巴不当5挑起的。

图片 3

    错误五

                 
错误描述:在Chrome中按F1二,在调节台北未察觉此外错误,可是SSE无法源办公室事。                

错误代码:无                

不当消除:那一个标题令人挺蛋疼的,本人遇上的时候研究了好久,后来感觉是onmessage未有职业,然后又在网络找了找,关于那样的篇章不多。小编找到一篇Blog交由了“偏方”,点击查阅偏方。可是她的法子不合乎自个儿。笔者的土方是那般的:

 

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

如此就能够不荒谬展现数据了。有时候event无法显得字符串,小编觉着是伊夫ntSource的办事体制导致的。

 

四,参考小说

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

https://www.the5fire.com/message-push-by-server-sent-event.html    

http://www.runoob.com/html/html5serversentevents.html    

http://www.xue163.com/588880/39055/390559228.html    

https://www.w3.org/TR/eventsource/ 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图