由于在HTTP协议中，服务器是出于被动的位置，浏览器（客户端）发起HTTP请求从服务端获取数据。但web2.0时代的一些web应用，则需要及时更新服务端的信息，（例如：票务，航班信息，股票信息等），还有一些情况下需要客户端和服务端实现一种异步通信的机制（比如：客户端提交一个耗时的请求，服务端处理完成后，通知客户端）。
HTML5提供了WebSocket，客户端和服务端可以建立一个双工的通信通道，相互发送数据。
Server Send Event（SSE）是一种简单的浏览器实现的轮询，并可以指定事件类型，事件id等。
而由于HTML5出于draft阶段，并且浏览器支持的程度相差较大，因此现在很多是通过客户端轮询获取结果的。
有时候你的web应用的用户是较小范围可控的，用用HTML5的技术还是比较惬意的。
下面是一个SSE的例子。
服务端代码，一个简单的servlet，在获取请求后做一个很耗时的操作，然后把结果告知客户端。
注意SSE的头：text/event-stream，和发送数据的格式：data:message\n\n
package org.jamee.demo.webapp;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SSEDemo extends HttpServlet {
private static final long serialVersionUID = 6205864980814040417L;
public void doPost(HttpServletRequest request, HttpServletResponse response) {
try
{
System.out.println("get requestion from client");
response.setContentType("text/event-stream"); //SSE header
PrintWriter pw = response.getWriter();
// do something
Thread.sleep(10 * 1000); // time consume operation
pw.write("data:{code:0, \"message\":\"success\"}\n\n"); // SSE protocol, data:
System.out.println("response sent");
pw.close();
} catch(Exception e) {
e.printStackTrace();
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response) {
doPost(request, response);
}
}
HTML代码：
注意接到数据后关闭客户端，不然浏览器会一直发请求。
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<script type="text/javascript">
if (!!window.EventSource) {
console.log("Event source available");
var source = new EventSource('/ssedemo');
source.addEventListener('message', function(e) {
console.log(e.data);
if (document.getElementById('result').innerText) {
document.getElementById('result').innerText = e.data
} else {
document.getElementById('result').textContent = e.data
}
source.close(); // close connection, otherwisse browser will request the server constantly
});
source.addEventListener('open', function(e) {
console.log("Connection was opened.");
}, false);
source.addEventListener('error', function(e) {
if (e.readyState == EventSource.CLOSED) {
console.log("Connection was closed.");
} else {
console.log(e.readyState);
}
}, false);
} else {
console.log("No SSE available");
}
</script>
</head>
<body>
<div>Execute a time consume operation....</div>
<div id="result"></div>
</body>
参考：
http://www.html5rocks.com/en/tutorials/eventsource/basics/#toc-reconnection-timeout
相关推荐
在IT行业中，服务端消息推送（Server-Sent Events，简称SSE）是一种高效且实时的通信技术，允许服务器主动向客户端发送数据，而无需客户端频繁发起请求。这种单向推送机制在实时应用如股票更新、在线聊天、实时通知...
本项目源码展示了如何使用Java进行WebSocket的整合，从而实现服务器消息推送功能。以下将详细介绍WebSocket的核心概念、Java整合WebSocket的步骤以及在实际项目中的应用。 1. WebSocket简介： WebSocket协议是HTML5...
然后，您可以使用其send()方法将事件发送到客户端： // Send plain text to the client:event . send ( { name : 'greeting' , data : 'Hello, World!\nHow the hell are yer?!' } ) ;// Send JSO
一个简单高效的库通过PHP实现了HTML5的服务器发送的事件，用于将事件从服务器实时推送到客户端，并且比Websocket更容易，而不是AJAX请求。 要求 PHP 5.4或更高版本 通过Composer（ ）安装 composer require " hhxsv5...
总的来说，C#的WebSocket服务和JavaScript的WebSocket客户端提供了强大的实时通信能力，适合构建聊天应用、实时数据推送、游戏等需要低延迟双向通信的场景。结合MVC的开发模式，可以方便地集成到现有的Web应用中，...
接下来，我们来看看如何用Node.js来实现WebSocket服务端。Node.js提供了许多库来支持WebSocket，比如ws库。安装ws库可以使用npm（Node.js包管理器）： ```bash npm install ws ``` 然后，我们可以创建一个...
为了实现服务端主动向前端推送数据，我们需要一个消息广播机制。Spring Framework提供了一个名为`SimpMessagingTemplate`的工具类，可以用来发送WebSocket消息。例如，在某个业务逻辑中，我们可以通过`@Autowired`...
WebSocket 是一种网络协议，允许服务器主动向客户端推送信息，属于服务器推送技术的一种。它建立在 TCP 协议之上，实现了真正的双向平等对话。下面是 WebSocket 的思维导图： 客户端 API 构造函数 var ws = new ...
本篇文章将详细介绍如何使用Django Channels来搭建WebSocket服务器，并实现广播和点对点的消息发送。 #### 二、Django Channels简介 Django Channels 是一个官方支持的项目，它允许Django处理异步网络连接（如...
### 使用Server-Sent Events (SSE) 实现RESTful Web Service #### 一、引言 在传统的Web服务中，客户端向服务器发送请求以获取所需资源。这种模式虽然简单直观，但在某些应用场景下存在局限性，尤其是在需要实时...
例如，在线聊天、实时股票价格更新、多人在线游戏等场景都需要服务端能够及时地将最新数据推送到客户端。传统HTTP协议基于请求-响应模型，无法满足实时推送的需求。而WebSocket协议的出现则很好地解决了这一问题。 ...
这意味着服务器可以主动向客户端推送数据，而不仅仅局限于客户端发起请求。这种机制对于实时性要求高的应用，如在线聊天、游戏、股票监控等，具有显著的优势。 在Java中，实现WebSocket服务端通常需要以下步骤： 1...
WebSocket协议基于TCP，提供了更高效的帧结构和握手协议，使得服务器可以主动向客户端推送数据。 在Java中，WebSocket API主要由JSR 356定义，包含在Java EE 7及以上版本中。我们可以通过`javax.websocket`包下的...
一旦连接建立，服务器同样可以向客户端推送数据，只需要找到对应的WebSocket连接并调用发送方法即可。 在"WebSocket入门demo"中，我们可能看到的文件包括HTML、JavaScript和服务器端代码。HTML文件可能包含...
WebSocket是HTML5中引入的一种新的通信协议，它允许在客户端和服务器...这对于开发实时交互的应用非常有帮助，例如在线聊天、实时推送通知等。在实际项目中，还需要考虑错误处理、连接管理、消息编码解码等更多细节。
WebSocket是HTTP协议的一个扩展，它提供了全双工通信的能力，使得服务器可以主动向客户端推送数据，而不仅仅局限于客户端发起请求的模式。WebSocket API被设计用来创建持久性的连接，极大地优化了实时应用，如在线...
WebSocket是Web应用中的一种协议，它实现了浏览器与服务器的全双工通信，即允许服务器主动向客户端推送数据。WebSocket协议的出现解决了HTTP协议下服务器无法主动推送数据的问题，极大地优化了实时性要求高的应用...
在微信小程序中，WebSocket协议是实现长连接的重要技术，它提供了一种全双工、双向通信的机制，使得服务器和客户端可以同时发送数据，非常适合用于实时聊天、推送通知等应用场景。 WebSocket是基于TCP协议的，它在...
在传统的HTTP协议中，每次请求都需要客户端发起，而WebSocket则允许服务器主动向客户端推送数据，极大地提高了实时性。本实例将深入探讨如何使用HTML5的WebSocket API结合C++来构建服务端，实现高效的实时通信。 ...