HTML5中的服务器‘推送’技术 -Server-Sent Events

Misswangdapao

2016-04-12

html5服务器推送技术DEMO:http://viralpatel.net/blogs/html5-server-sent-events-java-servlets-example/

java 代码：

package com.forms;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MovementEventSource extends HttpServlet
{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		response.setContentType("text/event-stream");

		// encoding must be set to UTF-8
		response.setCharacterEncoding("UTF-8");

		PrintWriter writer = response.getWriter();

		for (int i = 0; i < 10; i++)
		{

			writer.write("data: " + System.currentTimeMillis() + "\n\n");

			try
			{
				Thread.sleep(1000);
			}
			catch (InterruptedException e)
			{
				e.printStackTrace();
			}
		}
		writer.close();

	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
	{
		// TODO Auto-generated method stub
		this.doPost(req, resp);
	}
}

web.xml端配置：

<servlet>
	    <servlet-name>sendServlet</servlet-name>
	    <servlet-class>com.forms.MovementEventSource</servlet-class>
	</servlet>
	<servlet-mapping>
	    <servlet-name>sendServlet</servlet-name>
	    <url-pattern>/testSendServlet.do</url-pattern>
	</servlet-mapping>

jsp页面代码：

<body>
     Time: <span id="foo"></span>
     
    <br><br>
    <button onclick="start()">Start</button>
 
    <script type="text/javascript">
    function start() {
 
        var eventSource = new EventSource("testSendServlet.do");
         
        eventSource.onmessage = function(event) {
         
            document.getElementById('foo').innerHTML = event.data;
         
        };
         
    }

    start();
    </script>
</body>

复杂的html5服务器推送技术：

java代码：

package net.viralpatel.servlets;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class HelloServlet extends HttpServlet {
 
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");
 
        PrintWriter writer = response.getWriter();
        int upVote = 0;
        int downVote = 0;
        for (int i = 0; i < 20; i++) {
 
            upVote = upVote + (int) (Math.random() * 10);
            downVote = downVote + (int) (Math.random() * 10);
 
            writer.write("event:up_vote\n");
            writer.write("data: " + upVote + "\n\n");
 
            writer.write("event:down_vote\n");
            writer.write("data: " + downVote + "\n\n");
 
            writer.flush();
             
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
        writer.close();
    }
 
}

jsp页面代码：

var eventSource = new EventSource("HelloServlet");
 
 
eventSource.addEventListener('up_vote', function(event) {
     
        document.getElementById('up').innerHTML = event.data;
         
    }, false);
 
 
eventSource.addEventListener('down_vote', function(event) {
     
        document.getElementById('down').innerHTML = event.data;
         
    }, false);

html5