基于Tomcat7、Java、WebSocket的服务器推送聊天室实例

前言

html5 websocket实现了服务器与浏览器的双向通讯，双向通讯使服务器消息推送开发更加简单，最常见的就是即时通讯和对信息实时性要求比较高的应用。以前的服务器消息推送大部分采用的都是“轮询”和“长连接”技术，这两中技术都会对服务器产生相当大的开销，而且实时性不是特别高。websocket技术对只会产生很小的开销，并且实时性特别高。下面就开始讲解如何利用websocket技术开发聊天室。在这个实例中，采用的是tomcat7服务器，每个服务器对于websocket的实现都是不一样的，所以这个实例只能在tomcat服务器中运行，不过目前spring已经推出了websocket的api，能够兼容各个服务器的实现，大家可以查阅相关的资料进行了解，在这里就不介绍了，下图是聊天室的效果图：

在这里实例中，实现了消息的实时推送，还实现了聊天用户的上下线通知。下面就开始具体讲解如何实现。

后台处理

tomcat实现websocket的主要是依靠org.apache.catalina.websocket.messageinbound这个类，这个类的在{tomcat_home}/lib/catalina.jar中，所以你开发的时候需要将catalina.jar和tomcat-coyote.jar引入进来，下面这段代码就是暴露给客户端连接地址的servlet：

package com.ibcio; 
 
import javax.servlet.annotation.webservlet; 
import javax.servlet.http.httpservletrequest; 
 
import org.apache.catalina.websocket.streaminbound; 
 
@webservlet(urlpatterns = { "/message"}) 
//如果要接收浏览器的ws://协议的请求就必须实现websocketservlet这个类 
public class websocketmessageservlet extends org.apache.catalina.websocket.websocketservlet { 
 
  private static final long serialversionuid = 1l; 
   
  public static int online_user_count = 1; 
   
  public string getuser(httpservletrequest request){ 
    return (string) request.getsession().getattribute("user"); 
  } 
 
  //跟平常servlet不同的是，需要实现createwebsocketinbound，在这里初始化自定义的websocket连接对象 
  @override 
  protected streaminbound createwebsocketinbound(string subprotocol,httpservletrequest request) { 
    return new websocketmessageinbound(this.getuser(request)); 
  } 
} 

这个servlet跟普通的servlet有些不同，继承的websocketservlet类，并且要重写createwebsocketinbound方法。这个类中session中的user属性是用户进入index.jsp的时候设置的，记录当前用户的昵称。下面就是自己实现的websocket连接对象类websocketmessageinbound类的代码：

 package com.ibcio; 
 
import java.io.ioexception; 
import java.nio.bytebuffer; 
import java.nio.charbuffer; 
 
import net.sf.json.jsonobject; 
 
import org.apache.catalina.websocket.messageinbound; 
import org.apache.catalina.websocket.wsoutbound; 
 
public class websocketmessageinbound extends messageinbound { 
 
  //当前连接的用户名称 
  private final string user; 
 
  public websocketmessageinbound(string user) { 
    this.user = user; 
  } 
 
  public string getuser() { 
    return this.user; 
  } 
 
  //建立连接的触发的事件 
  @override 
  protected void onopen(wsoutbound outbound) { 
    // 触发连接事件，在连接池中添加连接 
    jsonobject result = new jsonobject(); 
    result.element("type", "user_join"); 
    result.element("user", this.user); 
    //向所有在线用户推送当前用户上线的消息 
    websocketmessageinboundpool.sendmessage(result.tostring()); 
     
    result = new jsonobject(); 
    result.element("type", "get_online_user"); 
    result.element("list", websocketmessageinboundpool.getonlineuser()); 
    //向连接池添加当前的连接对象 
    websocketmessageinboundpool.addmessageinbound(this); 
    //向当前连接发送当前在线用户的列表 
    websocketmessageinboundpool.sendmessagetouser(this.user, result.tostring()); 
  } 
 
  @override 
  protected void onclose(int status) { 
    // 触发关闭事件，在连接池中移除连接 
    websocketmessageinboundpool.removemessageinbound(this); 
    jsonobject result = new jsonobject(); 
    result.element("type", "user_leave"); 
    result.element("user", this.user); 
    //向在线用户发送当前用户退出的消息 
    websocketmessageinboundpool.sendmessage(result.tostring()); 
  } 
 
  @override 
  protected void onbinarymessage(bytebuffer message) throws ioexception { 
    throw new unsupportedoperationexception("binary message not supported."); 
  } 
 
  //客户端发送消息到服务器时触发事件 
  @override 
  protected void ontextmessage(charbuffer message) throws ioexception { 
    //向所有在线用户发送消息 
    websocketmessageinboundpool.sendmessage(message.tostring()); 
  } 
} 

代码中的主要实现了onopen、onclose、ontextmessage方法，分别处理用户上线、下线、发送消息。在这个类中有个websocketmessageinboundpool连接池类，这个类是用来管理目前在线的用户的连接，下面是这个类的代码：

package com.ibcio; 
 
import java.io.ioexception; 
import java.nio.charbuffer; 
import java.util.hashmap; 
import java.util.map; 
import java.util.set; 
 
public class websocketmessageinboundpool { 
 
  //保存连接的map容器 
  private static final map<string,websocketmessageinbound > connections = new hashmap<string,websocketmessageinbound>(); 
   
  //向连接池中添加连接 
  public static void addmessageinbound(websocketmessageinbound inbound){ 
    //添加连接 
    system.out.println("user : " + inbound.getuser() + " join.."); 
    connections.put(inbound.getuser(), inbound); 
  } 
   
  //获取所有的在线用户 
  public static set<string> getonlineuser(){ 
    return connections.keyset(); 
  } 
   
  public static void removemessageinbound(websocketmessageinbound inbound){ 
    //移除连接 
    system.out.println("user : " + inbound.getuser() + " exit.."); 
    connections.remove(inbound.getuser()); 
  } 
   
  public static void sendmessagetouser(string user,string message){ 
    try { 
      //向特定的用户发送数据 
      system.out.println("send message to user : " + user + " ,message content : " + message); 
      websocketmessageinbound inbound = connections.get(user); 
      if(inbound != null){ 
        inbound.getwsoutbound().writetextmessage(charbuffer.wrap(message)); 
      } 
    } catch (ioexception e) { 
      e.printstacktrace(); 
    } 
  } 
   
  //向所有的用户发送消息 
  public static void sendmessage(string message){ 
    try { 
      set<string> keyset = connections.keyset(); 
      for (string key : keyset) { 
        websocketmessageinbound inbound = connections.get(key); 
        if(inbound != null){ 
          system.out.println("send message to user : " + key + " ,message content : " + message); 
          inbound.getwsoutbound().writetextmessage(charbuffer.wrap(message)); 
        } 
      } 
    } catch (ioexception e) { 
      e.printstacktrace(); 
    } 
  } 
} 

前台展示

上面的代码就是聊天室后台的代码，主要是由3个对象组成，servlet、连接对象、连接池，下面就是前台的代码，前台的代码主要是实现与服务器进行连接，展示用户列表及信息列表，前台的展示使用了ext框架，不熟悉ext的同学可以初步的了解下ext，下面的是index.jsp的代码：

<%@ page language="java" pageencoding="utf-8" import="com.ibcio.websocketmessageservlet"%> 
<% 
  string user = (string)session.getattribute("user"); 
  if(user == null){ 
    //为用户生成昵称 
    user = "游客" + websocketmessageservlet.online_user_count; 
    websocketmessageservlet.online_user_count ++; 
    session.setattribute("user", user); 
  } 
  pagecontext.setattribute("user", user); 
%> 
<html> 
<head> 
  <title>websocket 聊天室</title> 
  <!-- 引入css文件 --> 
  <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css"> 
  <link rel="stylesheet" type="text/css" href="ext4/shared/example.css" /> 
  <link rel="stylesheet" type="text/css" href="css/websocket.css" /> 
   
  <!-- 映入ext的js开发包，及自己实现的webscoket. --> 
  <script type="text/javascript" src="ext4/ext-all-debug.js"></script> 
  <script type="text/javascript" src="websocket.js"></script> 
  <script type="text/javascript"> 
    var user = "${user}"; 
  </script> 
</head> 
 
<body> 
  <h1>websocket聊天室</h1> 
  <p>通过html5标准提供的api与ext富客户端框架相结合起来，实现聊天室，有以下特点：</p> 
  <ul class="feature-list" style="padding-left: 10px;"> 
    <li>实时获取数据，由服务器推送，实现即时通讯</li> 
    <li>利用websocket完成数据通讯，区别于轮询，长连接等技术，节省服务器资源</li> 
    <li>结合ext进行页面展示</li> 
    <li>用户上线下线通知</li> 
  </ul> 
  <div id="websocket_button"></div> 
</body> 
</html> 

页面的展示主要是在websocket.js中进行控制，下面是websocket.jsd的代码：

//用于展示用户的聊天信息 
ext.define('messagecontainer', { 
 
  extend : 'ext.view.view', 
 
  trackover : true, 
 
  multiselect : false, 
 
  itemcls : 'l-im-message', 
 
  itemselector : 'div.l-im-message', 
 
  overitemcls : 'l-im-message-over', 
 
  selecteditemcls : 'l-im-message-selected', 
 
  style : { 
    overflow : 'auto', 
    backgroundcolor : '#fff' 
  }, 
 
  tpl : [ 
      '<div class="l-im-message-warn">​交谈中请勿轻信汇款、中奖信息、陌生电话。 请遵守相关法律法规。</div>', 
      '<tpl for=".">', 
      '<div class="l-im-message">', 
      '<div class="l-im-message-header l-im-message-header-{source}">{from} {timestamp}</div>', 
      '<div class="l-im-message-body">{content}</div>', '</div>', 
      '</tpl>'], 
 
  messages : [], 
 
  initcomponent : function() { 
    var me = this; 
    me.messagemodel = ext.define('leetop.im.messagemodel', { 
          extend : 'ext.data.model', 
          fields : ['from', 'timestamp', 'content', 'source'] 
        }); 
    me.store = ext.create('ext.data.store', { 
          model : 'leetop.im.messagemodel', 
          data : me.messages 
        }); 
    me.callparent(); 
  }, 
 
  //将服务器推送的信息展示到页面中 
  receive : function(message) { 
    var me = this; 
    message['timestamp'] = ext.date.format(new date(message['timestamp']), 
        'h:i:s'); 
    if(message.from == user){ 
      message.source = 'self'; 
    }else{ 
      message.source = 'remote'; 
    } 
    me.store.add(message); 
    if (me.el.dom) { 
      me.el.dom.scrolltop = me.el.dom.scrollheight; 
    } 
  } 
}); 

这段代码主要是实现了展示消息的容器，下面就是页面加载完成后开始执行的代码：

  ext.onready(function() { 
      //创建用户输入框 
      var input = ext.create('ext.form.field.htmleditor', { 
            region : 'south', 
            height : 120, 
            enablefont : false, 
            enablesourceedit : false, 
            enablealignments : false, 
            listeners : { 
              initialize : function() { 
                ext.eventmanager.on(me.input.getdoc(), { 
                      keyup : function(e) { 
                        if (e.ctrlkey === true 
                            && e.keycode == 13) { 
                          e.preventdefault(); 
                          e.stoppropagation(); 
                          send(); 
                        } 
                      } 
                    }); 
              } 
            } 
          }); 
      //创建消息展示容器 
      var output = ext.create('messagecontainer', { 
            region : 'center' 
          }); 
 
      var dialog = ext.create('ext.panel.panel', { 
            region : 'center', 
            layout : 'border', 
            items : [input, output], 
            buttons : [{ 
                  text : '发送', 
                  handler : send 
                }] 
          }); 
      var websocket; 
 
      //初始话websocket 
      function initwebsocket() { 
        if (window.websocket) { 
          websocket = new websocket(encodeuri('ws://localhost:8080/websocket/message')); 
          websocket.onopen = function() { 
            //连接成功 
            win.settitle(title + ' (已连接)'); 
          } 
          websocket.onerror = function() { 
            //连接失败 
            win.settitle(title + ' (连接发生错误)'); 
          } 
          websocket.onclose = function() { 
            //连接断开 
            win.settitle(title + ' (已经断开连接)'); 
          } 
          //消息接收 
          websocket.onmessage = function(message) { 
            var message = json.parse(message.data); 
            //接收用户发送的消息 
            if (message.type == 'message') { 
              output.receive(message); 
            } else if (message.type == 'get_online_user') { 
              //获取在线用户列表 
              var root = onlineuser.getrootnode(); 
              ext.each(message.list,function(user){ 
                var node = root.createnode({ 
                  id : user, 
                  text : user, 
                  iconcls : 'user', 
                  leaf : true 
                }); 
                root.appendchild(node); 
              }); 
            } else if (message.type == 'user_join') { 
              //用户上线 
                var root = onlineuser.getrootnode(); 
                var user = message.user; 
                var node = root.createnode({ 
                  id : user, 
                  text : user, 
                  iconcls : 'user', 
                  leaf : true 
                }); 
                root.appendchild(node); 
            } else if (message.type == 'user_leave') { 
                //用户下线 
                var root = onlineuser.getrootnode(); 
                var user = message.user; 
                var node = root.findchild('id',user); 
                root.removechild(node); 
            } 
          } 
        } 
      }; 
 
      //在线用户树 
      var onlineuser = ext.create('ext.tree.panel', { 
            title : '在线用户', 
            rootvisible : false, 
            region : 'east', 
            width : 150, 
            lines : false, 
            usearrows : true, 
            autoscroll : true, 
            split : true, 
            iconcls : 'user-online', 
            store : ext.create('ext.data.treestore', { 
                  root : { 
                    text : '在线用户', 
                    expanded : true, 
                    children : [] 
                  } 
                }) 
          }); 
      var title = '欢迎您：' + user; 
      //展示窗口 
      var win = ext.create('ext.window.window', { 
            title : title + ' (未连接)', 
            layout : 'border', 
            iconcls : 'user-win', 
            minwidth : 650, 
            minheight : 460, 
            width : 650, 
            animatetarget : 'websocket_button', 
            height : 460, 
            items : [dialog,onlineuser], 
            border : false, 
            listeners : { 
              render : function() { 
                initwebsocket(); 
              } 
            } 
          }); 
 
      win.show(); 
 
      //发送消息 
      function send() { 
        var message = {}; 
        if (websocket != null) { 
          if (input.getvalue()) { 
            ext.apply(message, { 
                  from : user, 
                  content : input.getvalue(), 
                  timestamp : new date().gettime(), 
                  type : 'message' 
                }); 
            websocket.send(json.stringify(message)); 
            //output.receive(message); 
            input.setvalue(''); 
          } 
        } else { 
          ext.msg.alert('提示', '您已经掉线，无法发送消息!'); 
        } 
      } 
    }); 

上面的代码就是页面完成加载后自动连接服务器，并创建展示界面的代码。

注意

需要注意的两点，在部署完成之后需要将在tomcat应用目录中的lib目录下的catalina.jar和tomcat-coyote.jar删掉，比如项目的lib目录在d:\workspace\websocket\webroot\web-inf\lib，而部署的应用lib目录是在d:\tools\apache-tomcat-7.0.32\webapps\websocket\web-inf\lib，删掉部署目录的lib目录中连两个jar就可以了，否则会包could not initialize class com.ibcio.websocketmessageservlet错误，切记。

如果还是无法建立连接，请下载最新的tomcat，忘了是那个版本的tomcatcreatewebsocketinbound是没有request参数的，现在的这个代码是有这个参数了，7.0.3xx版本都是带这个参数的，切记。

总结

使用websocket开发服务器推送非常方便，这个是个简单的应用，其实还可以结合webrtc实现视频聊天和语音聊天。

实例下载

下载地址：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。