今年大家都在炒作Web2.0,其中的一門技術Ajax也是跟著火了起來,因此前面我寫了一篇名為《忽悠一下AJAX》的文章,簡單地分析了一下Ajax的技術的實質。雖然筆者不太喜歡跟風,但Ajax有一些地方還是比較有用的。前段時間做了EasyJF開源團隊的網上會議系統,就用到了Ajax技術,下面把設計思路發出來跟大家分享一下。
一、系統實現的功能
本會議室系統主要用於EasyJF開源團隊的成員網上會議使用,會議系統類比傳統的會議形式,可以同時開設多個不同主題的會議室,每個會議室需要提供存取權限控制功能,會議中能夠指定會議發言模式(分為排隊發言、自由發言兩種),系統能自動記錄每個會議室的發言資訊,可以供參會人員長期查閱。
會議系統的使用者支援遊客帳號參加會議,同時也提供跟其它使用者系統的介面,比如EasyJF官網中的開源論壇系統。
會議系統暫時使用文字交談的方式,並提供語音及視頻的介面。
二、技術體系
伺服器端使用Java語言,MVC使用EasyJWeb架構;
用戶端使用AJAX技術與伺服器端互動資料;
會議曆史資訊儲存格式使用文字格式設定,方便系統安裝運行,也便於管理。
三、會議室伺服器端設計
會議室伺服器端是整個會議系統的核心部分,伺服器端程式設計的好壞影響到整個系統的品質。
首先,根據會議室要實現的功能進行抽象分析。一個會議室對象,應該包括會議主題、會議簡介、參會人數限制、公告、會議室類型、存取權限設定、房間密碼、當前參會的人員、當前發言的人員、排隊等待發言的人員等參數資訊。我們把他封裝一個Java對象當中。如下面的ChatRoom代碼所示:
public class ChatRoom{ private String cid;//主鍵 private String title;//聊天室主題 private String intro;//聊天室簡介 private String announce;//聊天室公告 private String owner;//聊天室建立人 private Integer maxUser;//最大線上人數 private Integer intervals;//最大重新整理時間間隔 private String vrtype;//存取權限 private String vrvalue;//訪問值 private Integer status;//聊天室狀態 private Date inputTime; } |
需要一個管理會議室的類,與會議有關的操作(如啟動會議、關閉會議)等都直接找他。該類還應該即有自動定時檢測使用者線上情況(防止使用者意外退出)、把記憶體中的會議曆史發言資訊儲存到文字檔中等功能。這裡可以考慮使用一個ChatService類提供這些功能:
public class ChatService implements Runnable { private static final Map service=new HashMap();//會議室服務,系統中的當前會議室存放到該表集合中 private static final int maxServices=10;//可以同時開的最大會議室數 private static final SimpleDateFormat df=new SimpleDateFormat("yyyy-MM-dd"); private final List msgs;//聊天資訊Chat private final List users;//線上使用者,ChatUser private final List talkers;//排隊發言人數Talker private final List manager;//會議室管理員 private Talker currentTalker;//當前發言人 public ChatService() { this.msgs=new ArrayList(); this.users=new ArrayList(); this.talkers=new ArrayList(); this.manager=new ArrayList(); this.maxUser=1000;//最大1000人同時 this.interval=1000*60*5;//5分鐘以前的資訊 } } |
會議發言資訊也需要封裝成一個類,表示發言人、接收人、內容、發言時間、類型等,大致如下面的Chat類:
public class Chat { private String cid; private String sender; private String reciver; private String content; private Date vdate; private Integer types; private Integer status; } |
還有表示參加會議的人的資訊,包括參會人名稱、IP地址、狀態等,如下面的ChatUser類所示:
public class ChatUser { private String ip; private String port; private String userName; private Date lastAccessTime; private Integer status; } |
另外還需要一個表示當前發言人的Talker類,表示當前的發言人,發言開始時間,發言預計結束時間等。
在伺服器端的設計中,會議室資訊服務器應該能以多線程的方式運行,即啟動一個會議就新開一個線程,每個會議線程維護自己的會議狀態,如參會人、發言人,儲存會議曆史發言資訊以及清空記憶體中的資料等操作。
四、用戶端設計
會議室用戶端包括兩個部分,一個部分是會議室的管理介面,主要包會議室的“添刪改查”及“啟動”或“關閉”會議服務的操作。這部分我們直接使用EasyJWeb Tools中的添刪改查業務引擎AbstractCrudAction可以快速實現。介面也比較簡單,直接使用EasyJWeb Tools代碼產生工具引擎產生即可。會議室管理的用戶端是傳統的Java Web技術,因此沒有什麼要考慮的。
用戶端的第二個部分也即會議系統的主要部分,該部分主要有兩個介面,第一個頁面是會議室進入的選擇頁面。也即把已經啟動的會議室列出來,使用者選擇一個會議室進入,這個頁面也是使用傳統的Java Web技術。第二個頁面是進入會議室後的主介面,這個介面是整個會議系統的主要介面,所有參與會議的操作都在這裡啟動並執行。這個介面需要不斷的與伺服器端互動傳輸資料,傳輸的內容包括使用者的發言、其它人給使用者的發言、會議室的狀態等。有的傳輸資訊需要即時響應(如使用者發言),有的資訊可以設定成定時響應(如會議室狀態)。
Java Web程式中與伺服器端互動資料主要有兩種方式,一種是直接重新整理頁面,另外一種是使用Socket直接跟Web伺服器連接埠通訊。由於Socket編程相對複雜,我們選擇第一種直接重新整理頁面的方式,這種方式又可以分為幾種,包括傳統的Form提交,傳統的自動重新整理網頁取得資料以及使用ActiveXObject對象(如xmlhttp)直接與伺服器互動資料,也即AJAX方式。由於使用AJAX方式使用者感覺不到頁面在重新整理,表現起來好於手動或自動重新整理頁面的方式,因此我們決定選擇AJAX方式實現用戶端與伺服器端進行資料互動。
使用者發言的時候,直接使用xmlhttp對象Post資料到伺服器。為了能不斷接收到別人的發言資訊,需要定時不斷的從伺服器端讀取資料,因此,需要在用戶端啟動一個定時器,每隔一定的時候自動使用xmlhttp對象到伺服器端下載別人的發言資訊,並顯示到會議室資訊主介面中。另外還要定時重新整理參會的人數、會議室當前發言人、會議室的公告等會議狀態資訊,這也可以通過從用戶端啟動一個定時器,通過xmlhttp對象與伺服器互動得到。
另外還有一些操作,鎖定會議室、踢人、指定發言人的發言時間、給會議室加密碼等功能,也通過xmlhttp的方式與伺服器傳輸命令實現。
五、核心代碼說明
1、伺服器端核心代碼
在EasyJF開源團隊的會議系統中,由於是以EasyJF官網的論壇系統、後台管理等是整合一起的。伺服器ChatService與ChatRoom共同合并到了一個ChatService.java類中,實現會議室管理及會議服務功能。ChatService類的部分主要代碼如下:
package com.easyjf.chat.business; public class ChatService implements Runnable { private static final Map service=new HashMap();//會議室服務,系統中的當前會議室存放到該表集合中 private static final int maxServices=10;//可以同時開的最大會議室數 private static final SimpleDateFormat df=new SimpleDateFormat("yyyy-MM-dd"); private final List msgs;//聊天資訊Chat private final List users;//線上使用者,ChatUser private final List talkers;//排隊發言人數Talker private final List manager;//會議室管理員 private Talker currentTalker;//當前發言人 private String cid;//會議室id private String title;//會議室主題 private String intro;//會議室簡介 private String owner;//會議室建立人 private int maxUser;//最大線上人數 private int interval;//最大重新整理時間間隔 private String vrtype;//存取權限 private String vrvalue;//訪問值 private String announce; private String password;//房間進入密碼 private int status;//會議室狀態 private String filePath; //private Thread thread; private boolean isStop=false; public ChatService() { this.msgs=new ArrayList(); this.users=new ArrayList(); this.talkers=new ArrayList(); this.manager=new ArrayList(); this.maxUser=1000;//最大1000人同時 this.interval=1000*60*5;//5分鐘以前的資訊 } /** * 停止所有會議室 * */ public static void clear() { if(!service.isEmpty()) { Iterator it=service.values().iterator(); while(it.hasNext()) { ChatService chat=(ChatService)it.next(); chat.stop(); } } service.clear(); } /** * 建立一個會議室 * @param name 會議室ID * @return */ public static ChatService create(String name) { ChatService ret=null; if(service.containsKey(name)) { ChatService s=(ChatService)service.get(name); s.stop(); service.remove(name); } if(service.size()<maxServices) { ret=new ChatService(); service.put(name,ret); } return ret; } /** * 停止某個會議室 * @param name 會議室ID * @return */ public static boolean close(String name) { ChatService chatRoom=ChatService.get(name); if(chatRoom!=null) { chatRoom.stop(); service.remove(name); } return true; } /** * 獲得一個會議室資訊 * @param name 會議室ID * @return */ public static ChatService get(String name) { if(service.containsKey(name))return (ChatService)service.get(name); else return null; } public void run() { // TODO Auto-generated method stub //this.thread=Thread.currentThread(); while(!isStop) { //System.out.println("開始監控一個會議室!"+this.title); this.flash(); try{ Thread.sleep(5000); } catch(Exception e) { e.printStackTrace(); } } //System.out.println("結束!"); } public void stop() { this.flashAll(); isStop=true; } //會議室中有人發言 public boolean talk(Chat chat) { boolean ret=false; if(canTalk(chat.getSender())) { this.msgs.add(chat); ret=true; } return ret; } public boolean exit(ChatUser user) { talk(geneSystemMsg(user.getUserName()+"退出了會議室!")); return this.users.remove(user); } } //重新整理資訊,儲存會議資訊 public void flash() { flashChatMsg(); flashChatUser(); } } |
2、MVC處理部分的Action代碼
在EasyJF的會議系統中,由於使用EasyJWeb作為MVC架構,因此處理Ajax比較簡單,下面是會議室系統的核心Action主要代碼。
package com.easyjf.chat.action; public class ChatAction extends AbstractCmdAction { private ChatService chatRoom; public Object doBefore(WebForm form, Module module) { // TODO Auto-generated method stub if(chatRoom==null)chatRoom=ChatService.get((String)form.get("cid")); return super.doBefore(form, module); } public Page doInit(WebForm form, Module module) { // TODO Auto-generated method stub return doMain(form,module); } //使用者登入進入會議室 public Page doMain(WebForm form, Module module) { if(chatRoom!=null){ ChatUser user=getChatUser(); if(!chatRoom.join(user))form.addResult("msg","不能加入房間,可能是許可權不夠!"); form.addResult("chatRoom",chatRoom); form.addResult("user",user); } else { form.addResult("msg","會議未啟動或者會議室不存在!"); } return module.findPage("main"); } //處理使用者發言資訊 public Page doSend(WebForm form, Module module) { if(chatRoom==null)return new Page("err","/err.html","thml");//返回會議室不存在的錯誤 Chat chat=(Chat)form.toPo(Chat.class); chat.setCid(chatRoom.geneId()); chatRoom.talk(chat); return doRecive(form,module); } //使用者接收發言資訊 public Page doRecive(WebForm form, Module module) { if(chatRoom==null)return new Page("err","/err.html","thml");//返回會議室不存在的錯誤 String lastReadId=CommUtil.null2String(form.get("lastReadId")); //System.out.println(lastReadId); form.addResult("list", chatRoom.getNewestMsg(getChatUser(),lastReadId)); return module.findPage("msgList"); } //使用者重新整理會議狀態資訊 public Page doLoadConfig(WebForm form, Module module) { if(chatRoom==null)return new Page("err","/err.html","thml");//返回會議室不存在的錯誤 form.addResult("userList", chatRoom.getUsers()); form.addResult("talkerList", chatRoom.getTalkers()); return module.findPage("config"); } //使用者退出 public Page doExit(WebForm form, Module module) { if(chatRoom==null)return new Page("err","/err.html","thml");//返回會議室不存在的錯誤 hatRoom.exit(getChatUser()); form.addResult("msg","退出成功"); ActionContext.getContext().getSession().removeAttribute("chatUser"); return new Page("msg","/chat/xmlMsg.xml",Globals.PAGE_TEMPLATE_TYPE); } |
3、用戶端AJAX部分核心代碼
EasyJF會議系統中,伺服器發送給用戶端的都是格式化的xml文檔資料。下面是核心的AJAX函數及發送接收會議資訊的用戶端代碼。
function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } return xmlreq; } //處理返回資訊 //xmlHttp傳回值, //method:方法名 方法必須帶一個參數如doRecive(xNode); function handleAjaxResult(req,method) { return function () { if (req.readyState == 4) { if (req.status == 200) { // 將載有響應資訊的XML傳遞到處理函數 var objXMLDoc=new ActiveXObject("Microsoft.XMLDOM"); objXMLDoc.loadXML(req.responseText); eval("if(objXMLDoc.firstChild)"+method+"(objXMLDoc.firstChild.nextSibling);"); } else { //alert("HTTP error: "+req.status); } } } } //執行用戶端Ajax命令 //url 資料post地址 //postData 發送的資料包 //handleMethod 處理返回的方法 function executeAjaxCommand(url,postData,handleMethod) { var req = newXMLHttpRequest(); req.onreadystatechange =handleAjaxResult(req,handleMethod); req.open("PO ST", url, true); req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); req.setRequestHeader("charset","utf-8"); req.send(postData); } //使用者發言 unction doSend() { if(!check())return false; var msg=EditForm.content.value; var reciver=EditForm.reciver.value; var url="/chat.ejf?easyJWebCommand=send&cid="+roomId+"&lastReadId="+lastReadId; var postData="sender="+myName+"&reciver="+reciver+"&content="+msg; clearTimeout(reciveTime); executeAjaxCommand(url,postData,"recive"); EditForm.content.value=""; } //接收發言資訊 function doRecive() { var reciver=EditForm.reciver.value; var url="/chat.ejf?easyJWebCommand=recive&cid="+roomId+"&lastReadId="+lastReadId; executeAjaxCommand(url,"","recive"); } //處理接收到的發言資訊 function recive(list) { var id=""; for(var oNode=list.firstChild;oNode;oNode=oNode.nextSibling) // 依次分析每個節點 { chatContent.innerHTML+=showMsg(oNode); id=oNode.getAttribute("cid"); } if(id!="") lastReadId=id; chatContent.scrollTop=chatContent.scrollHeight; reciveTime=setTimeout("doRecive();",5000); } |
六、系統示範
大家可以到EasyJF開源團隊的官方網站看程式示範效果,地址是:
http://www.easyjf.com/chatRoom.ejf?easyJWebCommand=show&ejid=2538093638804337
結束語
Ajax從技術上講主要就是javascript、dhtml、css、xmldom、xmlhttp等一些我們很早就接觸了的技術。而xmldom及xmlhttp也沒有什麼東西,寫程式的時候把參考文檔開啟Copy就OK,dhtml及javascript涉及的東西就多了,不能只是看參考文檔,需要把他真正消化,並能靈活動用,這就需要大家都練習了。筆者建議大家不要濫用Ajax。對於高手建議多研究一些業務及系統級演算法設計等,對於新手嘛,把基本的技術(用戶端的包括dhtml、css、javascript、xml等,J2EE伺服器端的設計模式、UML建模、Servlet、JDBC或ORM系統、XML、EJB及一些架構、工具等)學好才是硬道理。