用AJAX+J2EE完成网上会议系统_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("warom www.aiyiweb.com 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); }

　
　　 结束语

　　 Ajax从技术上讲次要就是javascript、dhtml、css、xmldom、xmlhttp等一些我们很早就接触了的技术。而xmldom及xmlhttp也没有什么东西，写程序的时候把参考文档打开Copy就OK，dhtml及javascript涉及的东西就多了，不能只是看参考文档，需求把他真正消化，并能灵活动用，这就需求大家都练习了。笔者建议大家不要滥用 Ajax。对于高手建议多研讨一些业务及系统级算法设计等，对于老手嘛，把基本的技术(客户端的包括dhtml、css、javascript、xml等，J2EE服务器端的设计模式、UML建模、Servlet、JDBC或ORM系统、XML、EJB及一些框架、工具等)学好才是硬道理。