基于HTML 5中的Server-Sent Events的Demo示例

1.The MessageEvent interfaces

[Constructor(DOMString type, optional MessageEventInit eventInitDict), Exposed=(Window,Worker)]
interface MessageEvent : Event {
  readonly attribute any data;
  readonly attribute USVString origin;
  readonly attribute DOMString lastEventId;
  readonly attribute (WindowProxy or MessagePort)? source;
  readonly attribute FrozenArray<MessagePort>? ports;

  void initMessageEvent(DOMString type, boolean bubbles, boolean cancelable, any data, USVString origin, DOMString lastEventId, (WindowProxy or MessagePort)? source, sequence<MessagePort>? ports);
};

dictionary MessageEventInit : EventInit {
  any data = null;
  USVString origin = "";
  DOMString lastEventId = "";
  (WindowProxy or MessagePort)? source = null;
  sequence<MessagePort>? ports = null;
};

2.The EventSource interface

[Constructor(USVString url, optional EventSourceInit eventSourceInitDict), Exposed=(Window,Worker)]
interface EventSource : EventTarget {
  readonly attribute USVString url;
  readonly attribute boolean withCredentials;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSED = 2;
  readonly attribute unsigned short readyState;

  // networking
  attribute EventHandler onopen;
  attribute EventHandler onmessage;
  attribute EventHandler onerror;
  void close();
};

dictionary EventSourceInit {
  boolean withCredentials = false;
};

参考网址：https://html.spec.whatwg.org/multipage/comms.html#server-sent-events

3.页面代码如下：

<div class="containerDiv">
	登场顺序:
	<hr />
	<div id="girlList" class="imageList"></div>
	<hr />
	<button οnclick="showGirl()">美女闪亮登场</button>
</div>
<div class="containerDiv">
	登场顺序:
	<hr />
	<div id="boyList" class="imageList"></div>
	<hr />
	<button οnclick="showBoy()">帅锅闪亮登场</button>
</div>
<script type="text/javascript">
	function showGirl() {
		var girlEventSource = new EventSource(
				"http://localhost:8080/ServerSentEvent/GirlServlet");
		girlEventSource.onmessage = function(event) {
			document.getElementById("girlList").innerHTML += "<img src='images/girl0"+ event.data+".jpg' />";
		};
		girlEventSource.οnerrοr=function(event){
			girlEventSource.close();
		}
	}
	function showBoy() {
		var boyEventSource = new EventSource(
				"http://localhost:8080/ServerSentEvent/BoyServlet");
		boyEventSource.onmessage = function(event) {
			document.getElementById("boyList").innerHTML += "<img src='images/boy0"+ event.data+".jpg' />";
		};
		boyEventSource.οnerrοr=function(event){
			boyEventSource.close();
		}
	}
</script>

4.Servlet代码如下：

public class GirlServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public GirlServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/event-stream");
		response.setCharacterEncoding("UTF-8");
		PrintWriter writer = response.getWriter();
		for (int i = 1; i < 10; i++) {
			writer.write("data: " +i  + "\n\n");
			System.out.println("gril0"+i);
			writer.flush();
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
		writer.close();
	}
}

5.运行页面，点击“闪亮登场”时，图片依次显示。