项目的原因需要实现基于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 方法... "); // 处理 doPost this.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 方法... "); // 处理 doPost this.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>
时间: 2024-10-24 08:00:45