DWR Server Push(服务器推技术) 实现即时聊天

当你有QQ消息时,QQ小图标会晃动,我们甚至还可以设定QQ有消息时,自动弹出来!
这些在C/S模式下很容易实现!如果要在B/S模式如何来实现呢?
我们肯定会想到在客服端调用ajax在后台不断查询服务器.看是否有关于自己消息.如果有则查询返回.这种做法肯定会大量占用系统资源!不可取!
现在DWR反转AJAX功能.允许我们从服务器端来控制客服端.而不需要客户端来请求.服务器可以自动把消息发给指定客户端!

以下DEMO,已经实现了对指定用户发送消息功能,并且即时显示在指定用户界面上面.当然你可以修改这些,让它弹出来显示,或者像QQ一样在你页面某个角落让消息图标闪动:)
下面我做一个简单说明:


用户JAVABEAN User.java
package com.chat;

/**
 * 用户
 *
 *
 */
public class User {

 private String userid;

 private String username;

 public String getUserid() {
  return userid;
 }

 public void setUserid(String userid) {
  this.userid = userid;
 }

 public String getUsername() {
  return username;
 }

 public void setUsername(String username) {
  this.username = username;
 }

 public User(String userid, String username) {
  super();
  this.userid = userid;
  this.username = username;
 }

}

聊天处理类 ChatManager.java

package com.chat;

import java.util.ArrayList;
import java.util.Collection;
import java.util.HashSet;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;

import org.directwebremoting.ScriptSession;
import org.directwebremoting.ServerContext;
import org.directwebremoting.ServerContextFactory;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;

/**
 * 处理聊天相关
 *
 *
 */
public class ChatManager {

 /** 保存当前在线用户列表 */
 public static List<User> users = new ArrayList<User>();

 /**
  * 更新在线用户列表
  * @param username 待添加到列表用户名
  * @param flag 是添加用户到列表,还是只获得当前列表
  * @param request
  * @return 用户userid
  */
 public String updateUsersList(String username, boolean flag, HttpServletRequest request) {
  User user = null;
  if (flag) { 
   // 这里取会话(HttpSession)id为用户id
   user = new User(request.getSession().getId(), username);
   //保存用户到列表
   users.add(user); 
   //将用户id和页面脚本session绑定
   this.setScriptSessionFlag(user.getUserid());
  }
  //获得DWR上下文
  ServletContext sc = request.getSession().getServletContext();
  ServerContext sctx = ServerContextFactory.get(sc);
  //获得当前浏览 index.jsp 页面所有脚本session
  Collection sessions = sctx.getScriptSessionsByPage("/chat/index.jsp");
  Util util = new Util(sessions);
  //处理这些页面中一些元素
  util.removeAllOptions("users");
  util.addOptions("users", users, "username");
  util.removeAllOptions("receiver");
  util.addOptions("receiver", users,"userid","username");
  if(!flag){
   return null;
  }
  return user.getUserid();
 }

 /**
  * 将用户id和页面脚本session绑定
  * @param userid
  */
 public void setScriptSessionFlag(String userid) {
  WebContextFactory.get().getScriptSession().setAttribute("userid", userid);
 }

 /**
  * 根据用户id获得指定用户页面脚本session
  * @param userid
  * @param request
  * @return
  */
 @SuppressWarnings("unchecked")
 public ScriptSession getScriptSession(String userid, HttpServletRequest request) {
  ScriptSession scriptSessions = null;
  Collection<ScriptSession> sessions = new HashSet<ScriptSession>();
  sessions.addAll(ServerContextFactory.get(request.getSession().getServletContext())
    .getScriptSessionsByPage("/chat/index.jsp"));
  for (ScriptSession session : sessions) {
   String xuserid = (String) session.getAttribute("userid");
   if (xuserid != null && xuserid.equals(userid)) {
    scriptSessions = session;
   }
  }
  return scriptSessions;
 }
 
 /**
  * 发送消息
  * @param sender 发送者
  * @param receiverid 接收者id
  * @param msg 消息内容
  * @param request
  */
 public void send(String sender,String receiverid,String msg,HttpServletRequest request){
  ScriptSession session = this.getScriptSession(receiverid, request);
  Util util = new Util(session);
  util.setStyle("showMessage", "display", "");
  util.setValue("sender", sender);
  util.setValue("msg", msg);
 }
}

聊天主页面 index.jsp

<%@ page language="java" pageEncoding="GBK"%> 
<html> 
    <head> 
        <title>chat</title> 
        <meta http-equiv="pragma" content="no-cache"> 
        <meta http-equiv="cache-control" content="no-cache"> 
        <meta http-equiv="expires" content="0"> 
        <script type='text/javascript' src='dwr/interface/ChatManager.js'></script> 
        <script type='text/javascript' src='dwr/engine.js'></script> 
        <script type='text/javascript' src='dwr/util.js'></script> 
        <script type="text/javascript" src="chat/chat.js"></script> 
    </head> 
    <body> 
        <input type="hidden" name="userid" /> 
        <br> 
        昵称:  
        <input type="text" name="username" /> 
        <input type="button" value="注册" οnclick="register(this);" /> 
        <br /> 
        <br /> 
        我要对  
        <select name="receiver" id="receiver" disabled=true" > 
        </select> 
        说:  
        <input type="text" name="message" id="message" disabled="true" /> 
        <input type="button" value="发送" id="send" name="send" disabled="true" 
            οnclick="send();" /> 
        <br /> 
        <br /> 
        在线用户列表:  
        <ul id="users"> 
        </ul> 
 
        <div id="showMessage" style="display: none"> 
            <span id="sender"></span>对你说:  
            <span id="msg"></span> 
        </div> 
    </body> 
</html>

JAVASCRIPT 文件 chat.js

/**
 * 注册帐号
 */
function register(button) {
 if ($('username').value == "" || $('username').value.length <= 0) {
  alert("请输入昵称");
  return;
 }

 /* 下面是对一些按钮禁用和激活操作 */
 $('username').disabled = true;
 button.disabled = true;
 $('message').disabled = false;
 $('send').disabled = false;
 $('receiver').disabled = false;

 /* 把我输入用户名注册到服务器,并获得用户id(这里用session id 代替) */
 ChatManager.updateUsersList($('username').value, true, function(data) {
  if (data != null && data.length > 0) {
   $('userid').value = data; // 注册成功,把userid放到当前页面
  }
 });
}

/**
 * 页面初始化
 */
function init() {
 dwr.engine.setActiveReverseAjax(true); // 激活反转 重要
 ChatManager.updateUsersList(null, false); // 当你打开界面时候,先获得在线用户列表.
}

/**
 * 发送消息
 */
function send() {
 var sender = dwr.util.getValue('username'); // 获得发送者名字
 var receiver = dwr.util.getValue('receiver'); // 获得接受者id
 var msg = dwr.util.getValue('message'); // 获得消息内容
 ChatManager.send(sender, receiver, msg); // 发送消息
}

window.onload = init;//页面加载完毕后执行初始化方法init

配置文件 web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="
http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="
http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="
http://java.sun.com/xml/ns/j2ee
 
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>
   org.directwebremoting.servlet.DwrServlet
  </servlet-class>
  <init-param>
   <description>调试DWR,发布系统时应将其设为false</description>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
  <init-param>
   <description>使用服务器推技术(反转AJAX)</description>
   <param-name>activeReverseAjaxEnabled</param-name>
   <param-value>true</param-value>
  </init-param>
  <init-param>
   <param-name>
    initApplicationScopeCreatorsAtStartup
   </param-name>
   <param-value>true</param-value>
  </init-param>
  <init-param>
   <param-name>maxWaitAfterWrite</param-name>
   <param-value>100</param-value>
  </init-param>
  <load-on-startup>4</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>
</web-app>

DWR配置文件 dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "
http://getahead.org/dwr/dwr20.dtd">
<dwr>
 <allow>
  <convert converter="bean" match="com.chat.User" />
  <create creator="new" javascript="ChatManager">
   <param name="class" value="com.chat.ChatManager" />
  </create>
 </allow>
</dwr>

 

engine.js util.js dwr 自带,在 dwr.jar 包中可以找到。 ChatManager.js 是由 DWRServlet 根据 dwr.xml 定义自动生成。要想查看可以在浏览器地址栏输入:

http://localhost:8080/chat/dwr/interface/ChatManager.js 结果如下

 // Provide a default path to dwr.engine
if (dwr == null) var dwr = {};
if (dwr.engine == null) dwr.engine = {};
if (DWREngine == null) var DWREngine = dwr.engine;

if (ChatManager == null) var ChatManager = {};
ChatManager._path = '/chat/dwr';
ChatManager.send = function(p0, p1, p2, callback) {
  dwr.engine._execute(ChatManager._path, 'ChatManager', 'send', p0, p1, p2, false, callback);
}
ChatManager.getScriptSession = function(p0, callback) {
  dwr.engine._execute(ChatManager._path, 'ChatManager', 'getScriptSession', p0, false, callback);
}
ChatManager.updateUsersList = function(p0, p1, callback) {
  dwr.engine._execute(ChatManager._path, 'ChatManager', 'updateUsersList', p0, p1, false, callback);
}
ChatManager.setScriptSessionFlag = function(p0, callback) {
  dwr.engine._execute(ChatManager._path, 'ChatManager', 'setScriptSessionFlag', p0, callback);
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值