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;
};
[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>
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.运行页面,点击“闪亮登场”时,图片依次显示。