1个月不写博客了，最近挺忙的，刚用了2天写了个预约的小程序和大家分享下~
首先大家看下界面： 1.秘书端 - 专门添加预约的内容，添加以后立马在 “市长端” 弹出有一个新的预约
2.市长端 - 专门看最新的预约 ，看看要不要接待，接待或不接待点击按钮以后以后立马 回复秘书
其实挺简单的一个需求啊，但是其中用到的东西还真是挺多的
1.socket server端 和 web socket client端 中的消息时时分发到各个 client端 2. ajax json 数据查询和UI渲染包括一些css的动画
setp1. 我先按照web的做法把ui和各个页面的效果做出来
setp2. 完善好所有不是实时同步的业务流程
setp3. 根据websocket 分发的数据，挑选是自己的，audio提示：您有一个新的消息，然后调用ajax刷新数据来实现实时同步
setp4. 添加完或者接待完 使用send (admin_id,to_admin_id) 方法推送给某个人，然后某个人的ui进行重新ajax渲染
部分代码：
web socket client 端 api.jsp 把所用同步的回调方法和上线，下线，发送，播放声音都放在一个jsp中 需要的页面直接：iframe引入
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/config.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>web socket api</title> <base href="<%=$.root() %>" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> </head> <body> <audio id="audio" preload="auto" controls="controls" height="100" width="100"> <source src="qiyulin/song.ogg" type="audio/ogg" /> <source src="qiyulin/song.mp3" type="audio/mp3" /> <embed height="100" width="100" src="qiyulin/song.mp3" /> </audio> <script type="text/javascript"> var tcp_url='<%=tcp_url %>'; </script> <script type="text/javascript" src="qiyulin/prototype.js"></script> <script type="text/javascript"> var ws =null; //play var play = function(){ var audio = document.getElementById('audio'); audio.play(); } //offline var offline = function(){ log("[WebSocket#close]\n"); if (ws!=null) { ws.close(); ws = null; } } //online var online = function(){ if(ws==null){ ws = new WebSocket(tcp_url); ws.onopen = function() { log("[WebSocket#onopen]\n"); window.parent.online(); } ws.onmessage = function(e) { log("[WebSocket#onmessage] Message: '" + e.data + "'\n"); window.parent.message(e.data); } ws.onclose = function() { log("[WebSocket#onclose]\n"); if (ws) { ws.close(); ws = null; } window.parent.offline(); } } } //send var send = function(admin_id,to_admin_id){ if(ws!=null){ var json ='{"admin_id":'+admin_id+',"to_admin_id":'+to_admin_id+'}'; ws.send(json); }else{ online(); var json ='{"admin_id":'+admin_id+',"to_admin_id":'+to_admin_id+'}'; ws.send(json); } } function log(text) { var str=(new Date).getTime() + ": " + (!Object.isUndefined(text) && text !== null ? text.escapeHTML() : "null") ; console.log(str); } document.observe("dom:loaded", function() { if (!window.WebSocket) { alert("不支持WebSocket!"); return; } online(); }); </script> </body> </html>socket server端 因为是web的，所以在web.xml中配置 一个ContextListener
public class TcpServerListener implements ServletContextListener{ private TcpServer s; public void contextInitialized(ServletContextEvent arg0) { int port = 8887; try { s = new TcpServer( port ); s.start(); System.out.println( "TCPSERVER START ON PORT: " + s.getPort() ); } catch (UnknownHostException e) { e.printStackTrace(); } } public void contextDestroyed(ServletContextEvent arg0) { try { s.stop(); } catch (Exception e) { e.printStackTrace(); } } }
请求json数据 java action 端
public void visitorjson(){ String page = $.get("p"); if($.empty(page)) page ="1"; Map admin = (Map)$.session("admin"); int s = $.time($.date()); int e = s+24*60*60; String where=" and start_time>"+s+" and start_time<"+e; String start="select *"; String cstart="select count(*) c"; String sql=" from record where status=1 and admin_id="+admin.get("id")+" "+where; String limit =" order by start_time desc "; List<Map> list = new ArrayList<Map>(); StringBuilder count = new StringBuilder("0"); $.dbcp().query(start+sql+limit,list).count(cstart+sql,count).close(); $.json("status",1).json("list",list).json("count",count).out(); }
查询list 和 共多少条 ，然后返回json。是不是很优雅~~
$.dbcp().query(sql1,list).count(sql2,count).close(); $.json("status",1).json("list",list).json("count",count).out();
源码连接：
链接：https://pan.baidu.com/s/197W0XXRed5gVBJek_3GuFw 提取码：rlyq
