1個(gè)月不寫博客了，最近挺忙的，剛用了2天寫了個(gè)預(yù)約的小程序和大家分享下~
首先大家看下界面：
1.秘書端 - 專門添加預(yù)約的內(nèi)容，添加以后立馬在 “市長(zhǎng)端” 彈出有一個(gè)新的預(yù)約
2.市長(zhǎng)端 - 專門看最新的預(yù)約 ，看看要不要接待，接待或不接待點(diǎn)擊按鈕以后以后立馬 回復(fù)秘書
其實(shí)挺簡(jiǎn)單的一個(gè)需求啊，但是其中用到的東西還真是挺多的
1.socket server端 和 web socket client端 中的消息時(shí)時(shí)分發(fā)到各個(gè) client端
2. ajax json 數(shù)據(jù)查詢和UI渲染包括一些css的動(dòng)畫
setp1. 我先按照web的做法把ui和各個(gè)頁面的效果做出來
setp2. 完善好所有不是實(shí)時(shí)同步的業(yè)務(wù)流程
setp3. 根據(jù)websocket 分發(fā)的數(shù)據(jù)，挑選是自己的，audio提示：您有一個(gè)新的消息，然后調(diào)用ajax刷新數(shù)據(jù)來實(shí)現(xiàn)實(shí)時(shí)同步
setp4. 添加完或者接待完 使用send (admin_id,to_admin_id) 方法推送給某個(gè)人，然后某個(gè)人的ui進(jìn)行重新ajax渲染
部分代碼：
web socket client 端 api.jsp 把所用同步的回調(diào)方法和上線，下線，發(fā)送，播放聲音都放在一個(gè)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端 因?yàn)槭莣eb的，所以在web.xml中配置 一個(gè)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();
- }
- }
- }
請(qǐng)求json數(shù)據(jù) 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。是不是很優(yōu)雅~~
- $.dbcp().query(sql1,list).count(sql2,count).close();
- $.json("status",1).json("list",list).json("count",count).out();
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
