基于Pushlet实现的Web版报价系统

   项目的原因需要实现基于Web版的网上报价查询系统。用户需求很简单就是客户通过登录网站后，可以对产品提交买卖价格，系统有个集中展示屏幕来展示10档最优买入和卖出价格。对于上述功能的实现无外乎有两种实现方式：

推送（Push）技术：

一种建立在服务器上的机制，由服务器主动将信息发往客户端的技术。Push技术的优势在于信息主动性和及时性。

拉（Pull）技术：

客户机主动请求信息，采用客户端定时刷新页面，可使用Ajax技术实现，每隔N秒自动Reload一次，如果在此期间Server端数据发生变化，客户端可以获取新的内容。

   根据我们的需求，采用推送技术来实现上述功能是个比较好的选择。经过技术选型，最终选择使用Pushlet框架。Pushlet采用观察者模式，客户端订阅服务器感兴趣的事件，服务器端为每个客户端分配一个Session ID为标记，事件源会把新产生俄事件以多播的方式发送到订阅者的事件队列里。具体原理这里不作过多介绍，本文主要介绍一下使用Pushlet实现的一个计算报价平均值的Demo。

新建一个QuoteServlet.类，一个Servlet用于实现从客户端提交用户的报价，并触发服务器端发送价格变动事件。

package com;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;/* * Servlet方法实现数据的提交 */public class QuoteServlet extends HttpServlet{private static final long serialVersionUID = 2386052823761867369L;public static Double ttPrice = 0.00;public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{// 调用 HttpServlet 自带的日志函数输出信息到控制台this.log("执行 doGet 方法... ");// 处理 doPostthis.execute(request, response);//调用pushlet更新对方的数据String valueString = Double.toString(ttPrice);QuotePushlet.sendByMulticast(valueString);}/** * 以 POST 方式访问页面时执行该函数。 */ public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.log("执行 doPost 方法... ");// 处理 doPostthis.execute(request, response);//调用pushlet更新对方的数据String valueString = Double.toString(ttPrice);//定向广播//QuotePushlet.sendByMulticast(valueString);//定向发送QuotePushlet.sendByUnicast(valueString);//QuotePushlet.sendByBroadcast(valueString);}private void execute(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{String priceString = getReqStr(request.getParameter("qprice"),true);Double priceDb = 0.0;if (priceString != null && priceString != ""){priceDb = Double.valueOf(priceString);}  if (ttPrice != 0.00){ttPrice = ttPrice + priceDb;ttPrice = ttPrice/2;}else{ttPrice = priceDb;}}    private  String getReqStr(Object s,boolean isGetMethod){    if(s==null) return "";    if(!isGetMethod) return ((String)s).toString();    try{              return new String(((String)s).toString().getBytes("ISO8859_1"), "GBK");    }catch(Exception e){       return "";    }    }}

创建QuotePushlet类，用于实现事件广播。我这边分别使用了Pushlet的unicast,multicast,broadcast来发送广播事件。其中unicast是定向发，multicast,broadcast都是全局广播。

package com;import java.util.HashMap;import java.util.Map;import nl.justobjects.pushlet.core.Dispatcher;import nl.justobjects.pushlet.core.Event;import nl.justobjects.pushlet.core.Session;import nl.justobjects.pushlet.core.SessionManager;/* * 使用push的broadcast,multicast,unicast方法 *  * 实现数据的展示 */public class QuotePushlet {public static void sendByMulticast(String value){Map<String, String> map = new HashMap<String, String>();map.put("avgPrice", value);Event event = null;event = Event.createDataEvent("/quote/newPrice", map);//群发广播Dispatcher.getInstance().multicast(event);}public static void sendByUnicast(String value){Map<String, String> map = new HashMap<String, String>();map.put("avgPrice", value);Event event = null;event = Event.createDataEvent("/quote/newPrice", map);Session[] sessions = SessionManager.getInstance().getSessions();for ( Session session : sessions ) {//定向发送Dispatcher.getInstance().unicast(event, session.getId());}}public static void sendByBroadcast(String value){Map<String, String> map = new HashMap<String, String>();map.put("avgPrice", value);Event event = null;event = Event.createDataEvent("/quote/newPrice", map);Dispatcher.getInstance().broadcast(event);}}

使用pushlet需要在Web.xml里进行配置。

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><!-- Define the pushlet servlet --><servlet><servlet-name>pushlet</servlet-name><servlet-class>nl.justobjects.pushlet.servlet.Pushlet</servlet-class><load-on-startup>3</load-on-startup></servlet><!-- Define the Servlet Mappings. --><!-- The pushlet --><servlet-mapping><servlet-name>pushlet</servlet-name><url-pattern>/pushlet.srv</url-pattern></servlet-mapping><servlet><servlet-name>quoteServlet</servlet-name><servlet-class>com.QuoteServlet</servlet-class></servlet><servlet-mapping><servlet-name>quoteServlet</servlet-name><url-pattern>/quoteServlet</url-pattern></servlet-mapping></web-app>

另外还需要pushlet.properties和sources.properties,这里不表啦。

报价的JSP页面代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>quote</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="Pragma" content="no-cache">   <script type="text/javascript" src="ajax-pushlet-client.js"></script>   <link rel="stylesheet" type="text/css" href="./script/easyui/jquery-easyui-1.3.5/easyui.css" ><link rel="stylesheet" type="text/css" href="./script/easyui/jquery-easyui-1.3.5/icon.css" ><script type="text/javascript" src="./script/easyui/jquery.min.js"></script><script type="text/javascript" src="./script/easyui/jquery.easyui.min.js"></script>   <style type="text/css" ID="PageStyle"> body, td{     background: #ffffff;     color: #000000;     font-size: 14px;     font-family : verdana, sans-serif;} body {    margin-left: 8px;    margin-right: 0px;} .head {    color: #111111;}</style><script type="text/javascript"> function QuotationPost(){  $.ajax({ type: "post",  url: "quoteServlet", dataType: "text", data:{qprice:$("#formqprice").val()}, success: function (data) {     },  error: function (XMLHttpRequest, textStatus, errorThrown) {     alert(errorThrown);  }         });}</script></head><body><div><span>当前债券的平均价格是</span>  <span id="qprice"></span>   <br></div><div>  <span>我要报价:</span>  <div style="font-size: 20px;" >   <form id="QuotationForm" method="post"  >    <table>  <tr> <td colspan="3" >               报价：     <input name="qprice" id="formqprice"     type="text"    style="width:100px"  /> </td>  </tr>  <tr>   <td colspan="2" >      <input type="button" value="提交报价" onclick="QuotationPost();" />   </td>  </tr></table>   </form>  </div></div></body></html>

价格展示的前台页面如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Pragma" content="no-cache" /><script type="text/javascript" src="ajax-pushlet-client.js"></script><script type="text/javascript">PL._init(); PL.joinListen('/cuige/he');function onData(event) { //alert(event.get("mmdata")); // 离开// PL.leave();var kbDom = document.getElementById('kb');var kb = event.get("mess");//alert(event.get("mmdata"));kbDom.innerHTML = kb;}</script></head><body>当前债券平均价格：<span id="kb">...</span>元</body></html>