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();