zoukankan      html  css  js  c++  java
  • 《HTML5数据推送应用开发》源码java版之一-----helloworld

    1.新建servelet,然后进行编码,最后编码完后的源码如下:

    package com.heetian.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Date;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class SSEEchoServlet
     */
    @WebServlet("/SSEEchoServlet")
    public class SSEEchoServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    	 *      response)
    	 */
    	protected void doGet(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		response.setContentType("text/event-stream");//设置事件流
    		response.setCharacterEncoding("UTF-8");//设置编码
                    //获取最新时间并返回
    		PrintWriter writer = response.getWriter();
    		String string = new Date().toString();
    		System.out.println(string);
    		// send SSE
    		writer.write("data: " + string + "
    
    ");
    		try {   //设置间隔时间
    			Thread.sleep(1000);
    		} catch (InterruptedException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    
    	}
    }
    

    2.新建index.html文件,然后进行编码。编码后的文件如下:


            <!doctype html>
            <html>
              <head>
                <meta charset="UTF-8">
                <title>Basic SSE Example</title>
              </head>
              <body>
                <pre id="x">初始化...</pre><!--之所以用pre,没用div或p,是为了确保(包括换行的数据能够以它被接收时的格式呈现,而不会被修改或格式化。)-->
                <script>
                var es = new EventSource("SSEEchoServlet");//创建EventSource对象,将要连接的URL作为它唯一的参数。这里是连接到basic_sse.php
                es.addEventListener("message", function(e){
                  document.getElementById("x").innerHTML += "
    " + e.data;//运态修改页面内容。
                  },false);
                </script>。
              </body>
            </html>

    3. 运行后,可以看到浏览器中不停输出时间。效果如下:

    初始化...
    Sun Nov 23 13:56:22 CST 2014
    Sun Nov 23 13:56:27 CST 2014
    Sun Nov 23 13:56:31 CST 2014
    Sun Nov 23 13:56:35 CST 2014
    Sun Nov 23 13:56:39 CST 2014
    Sun Nov 23 13:56:43 CST 2014
    Sun Nov 23 13:56:47 CST 2014
    Sun Nov 23 13:56:51 CST 2014
    Sun Nov 23 13:56:55 CST 2014
    Sun Nov 23 13:56:59 CST 2014
    Sun Nov 23 13:57:03 CST 2014
    。


    说明

    1. 本系列是根据《Data Push Apps with HTML5 SSE》一书的源码修改而成,该书源码为PHP版,本人在学习过程中,根据个人需求及理解,修改成了JAVA版。所以有关例子的细节,请参阅该书。

    2.本系列工程使用maven管理。如果对maven不了解,请自行google或baidu。或者自行将maven工程转化为普通java工程,项目所依赖jar包,请参见pom.xml。

    3.本系列博客为原创,谢绝转载。

  • 相关阅读:
    代码小知识之UUID
    Tomcat源码学习(3)How Tomcat works(转)
    Tomcat源码学习(3)How Tomcat works(转)
    Tomcat源码学习(6)How Tomcat works(转)
    Tomcat源码学习(5)How Tomcat works(转)
    Tomcat源码学习(2)How Tomcat works(转)
    Tomcat源码学习(5)How Tomcat works(转)
    Tomcat源码学习(2)How Tomcat works(转)
    Tomcat源码学习(6)How Tomcat works(转)
    Tomcat源码学习(4)How Tomcat works(转)
  • 原文地址:https://www.cnblogs.com/okuc/p/4129598.html
Copyright © 2011-2022 走看看