DWR服务器推模式

文件即时共享

实现功能简介：

用户登录后，显示所有文件的列表。点击“上传文件”，弹出文件上传窗口，用户浏览本地文件确定提交后，就可以将文件上传至服务器指定的位置。服务器将上传者和文件信息推送到所有的客户端页面指定的 div中显示，并在页面文件列表的表格最后添加一行新上传的文件信息。

涉及的技术：

1. Struts 1.x

2. Dwr 2.0 服务器推模式

3. Jsp

系统结构如下图1 所示：

图1  系统目录文件结构

实现代码摘要：

FileAction.java

文件上传成功后，调用fileList.jsp中JavaScript方法sendMessag(msg) ；

out.println( "<script type='text/javascript'>"  +                "opener.sendMessage('" +username+ "@" +fileName+ "@" + sizeStr + "@" + sdf .format( new  Date()).replace( " " ,  "" )+ "');" + "</script>" );

 

fileList.jsp

sendMessag(msg) 调用后台 UpLoadTip .java中的 upBroadcast(msg) 方法，并将新上传的文件信息作为参数传递过去。

< script   type = 'text/javascript'   src = './dwr/engine.js' ></ script >   < script   type = 'text/javascript'   src = './dwr/interface/UpLoadTip.js' >      </ script > < script   type = 'text/javascript'   src = './dwr/util.js' ></ script > < script   type = "text/javascript" >      function  sendMessage(msg) {       UpLoadTip.upBroadcast(msg);     }             function  show(obj){      addNewRow(obj);  //在文件列表 表格最后追加一 行     } </script>

 

Dwr.xml（配置文件）

< dwr > < allow > < create   creator = "new"   javascript = "UpLoadTip" > < param   name = "class"   value = "com.kuntuo.service.impl.UpLoadTip" /> </ create >    </ allow > </ dwr >

 

UpLoadTip.java

此类实现了服务器推模式的功能，首先获取需要推送的目标文件的所有客户端，然后进行回调客户端的show(msg)JavaScript 方法。

public class UpLoadTip {   public void upBroadcast(String msg){      WebContext wctx = WebContextFactory. get ();       String currentPage = wctx.getCurrentPage();        //获取当前页的所有客户端       ScriptProxy sp =  new  ScriptProxy(               wctx.getScriptSessionsByPage(currentPage));       //调用客户端show方法，并传递参数msg;       sp.addFunctionCall( "show" , msg);     } }

客户端的show(msg) 方法来提示所有客户端“ XXX 上传了 XXX 文件”，并调用 adNewRow(mag) 将 页面文件列表的表格最后添加一行新上传的文件信息。

  addNewRow(obj) 在文件列表最后动态添加一行记录

function  addNewRow(obj){ var  msg = obj.split( "@" ); var  username = msg[0]; var  fileName = msg[1]; var  index = fileName.lastIndexOf( "." ); var  type = fileName.substring(index+1); var  size = msg[2]; var  time = msg[3]; time = time.substring(0,10)+ " " +time.substring(10,18);      var  row = document.createElement( "tr" ); var  cell1 = document.createElement( "td" ); var  no = getMaxNo(); cell1.appendChild(document.createTextNode(no)); cell1.setAttribute( "align" ,  "center" ); row.appendChild(cell1); var  cell2 = document.createElement( "td" ); cell2.appendChild(document.createTextNode(fileName)); row.appendChild(cell2); var  cell3 = document.createElement( "td" ); cell3.appendChild(document.createTextNode(type)); cell3.setAttribute( "align" ,  "center" ); row.appendChild(cell3); var  cell4 = document.createElement( "td" ); cell4.appendChild(document.createTextNode(size)); cell4.setAttribute( "align" ,  "center" ); row.appendChild(cell4); var  cell5 = document.createElement( "td" ); cell5.appendChild(document.createTextNode(time)); cell5.setAttribute( "align" ,  "center" ); row.appendChild(cell5);      var  down = document.createElement( "a" ); down.setAttribute( "href" , "file.do?method=downFile&fileName=" +fileName); down.appendChild(document.createTextNode( "下载 " )); var  cell6 = document.createElement( "td" ); cell6.appendChild(down); cell6.setAttribute( "class" ,  "tdFont" ); cell6.setAttribute( "align" ,  "center" ); row.appendChild(cell6);   document.getElementById( "new" ).appendChild(row);   }

Java接口：

FileService.java

/**

 * 文件上传功能

 * @param   F ormFile

 * @param   String 上传文件保存路径

 */

public  String uploadFile(FormFile,String) ;

/**

 * 文件下载功能

 * @param   String  文件名称

 * @param   HttpServletResponse

 */

public  String downloadFile(String ,HttpServletResponse) ;

测试：FireFox 和 IE 测试通过

分别打开FireFox和IE，输入用户名登录成功之后，用其中一个浏览器上传文件，上传文件成功后，在FireFox和IE的页面顶部同时提示了“XXX上传了XXX文件 立即下载”，文件列表的最后都同时动态的产生了一行新纪录（页面无刷新）。

演示 图1 图2 和图3

演示 图 1 FireFox浏览器文件上传成功

演示 图 2 FireFox浏览器提示新文件上传 表格动态产生一行新纪录

 

演示 图 3 IE浏览器提示新文件上传 表格动态产生一行新纪录