天天看点

基于Tomcat7、Java、WebSocket的服务器推送聊天室项目 前言 链接地址后台处理 链接地址前台展示

前言

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

基于Tomcat7、Java、WebSocket的服务器推送聊天室项目 前言 链接地址后台处理 链接地址前台展示

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

链接地址后台处理

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

[java]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

  1. package com.ibcio;  
  2. import javax.servlet.annotation.WebServlet;  
  3. import javax.servlet.http.HttpServletRequest;  
  4. import org.apache.catalina.websocket.StreamInbound;  
  5. @WebServlet(urlPatterns = { "/message"})  
  6. //如果要接收浏览器的ws://协议的请求就必须实现WebSocketServlet这个类  
  7. public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet {  
  8.     private static final long serialVersionUID = 1L;  
  9.     public static int ONLINE_USER_COUNT = 1;  
  10.     public String getUser(HttpServletRequest request){  
  11.         return (String) request.getSession().getAttribute("user");  
  12.     }  
  13.     //跟平常Servlet不同的是,需要实现createWebSocketInbound,在这里初始化自定义的WebSocket连接对象  
  14.     @Override  
  15.     protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {  
  16.         return new WebSocketMessageInbound(this.getUser(request));  
  17.     }  
  18. }  

        这个Servlet跟普通的Servlet有些不同,继承的WebSocketServlet类,并且要重写createWebSocketInbound方法。这个类中Session中的user属性是用户进入index.jsp的时候设置的,记录当前用户的昵称。下面就是自己实现的WebSocket连接对象类WebSocketMessageInbound类的代码: [java]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

  1. package com.ibcio;  
  2. import java.io.IOException;  
  3. import java.nio.ByteBuffer;  
  4. import java.nio.CharBuffer;  
  5. import net.sf.json.JSONObject;  
  6. import org.apache.catalina.websocket.MessageInbound;  
  7. import org.apache.catalina.websocket.WsOutbound;  
  8. public class WebSocketMessageInbound extends MessageInbound {  
  9.     //当前连接的用户名称  
  10.     private final String user;  
  11.     public WebSocketMessageInbound(String user) {  
  12.         this.user = user;  
  13.     }  
  14.     public String getUser() {  
  15.         return this.user;  
  16.     }  
  17.     //建立连接的触发的事件  
  18.     @Override  
  19.     protected void onOpen(WsOutbound outbound) {  
  20.         // 触发连接事件,在连接池中添加连接  
  21.         JSONObject result = new JSONObject();  
  22.         result.element("type", "user_join");  
  23.         result.element("user", this.user);  
  24.         //向所有在线用户推送当前用户上线的消息  
  25.         WebSocketMessageInboundPool.sendMessage(result.toString());  
  26.         result = new JSONObject();  
  27.         result.element("type", "get_online_user");  
  28.         result.element("list", WebSocketMessageInboundPool.getOnlineUser());  
  29.         //向连接池添加当前的连接对象  
  30.         WebSocketMessageInboundPool.addMessageInbound(this);  
  31.         //向当前连接发送当前在线用户的列表  
  32.         WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString());  
  33.     }  
  34.     @Override  
  35.     protected void onClose(int status) {  
  36.         // 触发关闭事件,在连接池中移除连接  
  37.         WebSocketMessageInboundPool.removeMessageInbound(this);  
  38.         JSONObject result = new JSONObject();  
  39.         result.element("type", "user_leave");  
  40.         result.element("user", this.user);  
  41.         //向在线用户发送当前用户退出的消息  
  42.         WebSocketMessageInboundPool.sendMessage(result.toString());  
  43.     }  
  44.     @Override  
  45.     protected void onBinaryMessage(ByteBuffer message) throws IOException {  
  46.         throw new UnsupportedOperationException("Binary message not supported.");  
  47.     }  
  48.     //客户端发送消息到服务器时触发事件  
  49.     @Override  
  50.     protected void onTextMessage(CharBuffer message) throws IOException {  
  51.         //向所有在线用户发送消息  
  52.         WebSocketMessageInboundPool.sendMessage(message.toString());  
  53.     }  
  54. }  

     代码中的主要实现了onOpen、onClose、onTextMessage方法,分别处理用户上线、下线、发送消息。在这个类中有个WebSocketMessageInboundPool连接池类,这个类是用来管理目前在线的用户的连接,下面是这个类的代码: [java]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

  1. package com.ibcio;  
  2. import java.io.IOException;  
  3. import java.nio.CharBuffer;  
  4. import java.util.HashMap;  
  5. import java.util.Map;  
  6. import java.util.Set;  
  7. public class WebSocketMessageInboundPool {  
  8.     //保存连接的MAP容器  
  9.     private static final Map<String,WebSocketMessageInbound > connections = new HashMap<String,WebSocketMessageInbound>();  
  10.     //向连接池中添加连接  
  11.     public static void addMessageInbound(WebSocketMessageInbound inbound){  
  12.         //添加连接  
  13.         System.out.println("user : " + inbound.getUser() + " join..");  
  14.         connections.put(inbound.getUser(), inbound);  
  15.     }  
  16.     //获取所有的在线用户  
  17.     public static Set<String> getOnlineUser(){  
  18.         return connections.keySet();  
  19.     }  
  20.     public static void removeMessageInbound(WebSocketMessageInbound inbound){  
  21.         //移除连接  
  22.         System.out.println("user : " + inbound.getUser() + " exit..");  
  23.         connections.remove(inbound.getUser());  
  24.     }  
  25.     public static void sendMessageToUser(String user,String message){  
  26.         try {  
  27.             //向特定的用户发送数据  
  28.             System.out.println("send message to user : " + user + " ,message content : " + message);  
  29.             WebSocketMessageInbound inbound = connections.get(user);  
  30.             if(inbound != null){  
  31.                 inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
  32.             }  
  33.         } catch (IOException e) {  
  34.             e.printStackTrace();  
  35.         }  
  36.     }  
  37.     //向所有的用户发送消息  
  38.     public static void sendMessage(String message){  
  39.         try {  
  40.             Set<String> keySet = connections.keySet();  
  41.             for (String key : keySet) {  
  42.                 WebSocketMessageInbound inbound = connections.get(key);  
  43.                 if(inbound != null){  
  44.                     System.out.println("send message to user : " + key + " ,message content : " + message);  
  45.                     inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
  46.                 }  
  47.             }  
  48.         } catch (IOException e) {  
  49.             e.printStackTrace();  
  50.         }  
  51.     }  
  52. }  

链接地址前台展示

    上面的代码就是聊天室后台的代码,主要是由3个对象组成,Servlet、连接对象、连接池,下面就是前台的代码,前台的代码主要是实现与服务器进行连接,展示用户列表及信息列表,前台的展示使用了Ext框架,不熟悉Ext的同学可以初步的了解下Ext,下面的是index.jsp的代码: [html]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

  1. <%@ page language="java" pageEncoding="UTF-8" import="com.ibcio.WebSocketMessageServlet"%>  
  2. <%  
  3.     String user = (String)session.getAttribute("user");  
  4.     if(user == null){  
  5.         //为用户生成昵称  
  6.         user = "游客" + WebSocketMessageServlet.ONLINE_USER_COUNT;  
  7.         WebSocketMessageServlet.ONLINE_USER_COUNT ++;  
  8.         session.setAttribute("user", user);  
  9.     }  
  10.     pageContext.setAttribute("user", user);  
  11. %>  
  12. <html>  
  13. <head>  
  14.     <title>WebSocket 聊天室</title>  
  15.     <!-- 引入CSS文件 -->  
  16.     <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">  
  17.     <link rel="stylesheet" type="text/css" href="ext4/shared/example.css" />  
  18.     <link rel="stylesheet" type="text/css" href="css/websocket.css" />  
  19.     <!-- 映入Ext的JS开发包,及自己实现的webscoket. -->  
  20.     <script type="text/javascript" src="ext4/ext-all-debug.js"></script>  
  21.     <script type="text/javascript" src="websocket.js"></script>  
  22.     <script type="text/javascript">  
  23.         var user = "${user}";  
  24.     </script>  
  25. </head>  
  26. <body>  
  27.     <h1>WebSocket聊天室</h1>  
  28.     <p>通过HTML5标准提供的API与Ext富客户端框架相结合起来,实现聊天室,有以下特点:</p>  
  29.     <ul class="feature-list" style="padding-left: 10px;">  
  30.         <li>实时获取数据,由服务器推送,实现即时通讯</li>  
  31.         <li>利用WebSocket完成数据通讯,区别于轮询,长连接等技术,节省服务器资源</li>  
  32.         <li>结合Ext进行页面展示</li>  
  33.         <li>用户上线下线通知</li>  
  34.     </ul>  
  35.     <div id="websocket_button"></div>  
  36. </body>  
  37. </html>  

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

[javascript]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

  1. //用于展示用户的聊天信息  
  2. Ext.define('MessageContainer', {  
  3.     extend : 'Ext.view.View',  
  4.     trackOver : true,  
  5.     multiSelect : false,  
  6.     itemCls : 'l-im-message',  
  7.     itemSelector : 'div.l-im-message',  
  8.     overItemCls : 'l-im-message-over',  
  9.     selectedItemCls : 'l-im-message-selected',  
  10.     style : {  
  11.         overflow : 'auto',  
  12.         backgroundColor : '#fff'  
  13.     },  
  14.     tpl : [  
  15.             '<div class="l-im-message-warn">​交谈中请勿轻信汇款、中奖信息、陌生电话。 请遵守相关法律法规。</div>',  
  16.             '<tpl for=".">',  
  17.             '<div class="l-im-message">',  
  18.             '<div class="l-im-message-header l-im-message-header-{source}">{from}  {timestamp}</div>',  
  19.             '<div class="l-im-message-body">{content}</div>', '</div>',  
  20.             '</tpl>'],  
  21.     messages : [],  
  22.     initComponent : function() {  
  23.         var me = this;  
  24.         me.messageModel = Ext.define('Leetop.im.MessageModel', {  
  25.                     extend : 'Ext.data.Model',  
  26.                     fields : ['from', 'timestamp', 'content', 'source']  
  27.                 });  
  28.         me.store = Ext.create('Ext.data.Store', {  
  29.                     model : 'Leetop.im.MessageModel',  
  30.                     data : me.messages  
  31.                 });  
  32.         me.callParent();  
  33.     },  
  34.     //将服务器推送的信息展示到页面中  
  35.     receive : function(message) {  
  36.         var me = this;  
  37.         message['timestamp'] = Ext.Date.format(new Date(message['timestamp']),  
  38.                 'H:i:s');  
  39.         if(message.from == user){  
  40.             message.source = 'self';  
  41.         }else{  
  42.             message.source = 'remote';  
  43.         }  
  44.         me.store.add(message);  
  45.         if (me.el.dom) {  
  46.             me.el.dom.scrollTop = me.el.dom.scrollHeight;  
  47.         }  
  48.     }  
  49. });  

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

[javascript]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

  1. Ext.onReady(function() {  
  2.             //创建用户输入框  
  3.             var input = Ext.create('Ext.form.field.HtmlEditor', {  
  4.                         region : 'south',  
  5.                         height : 120,  
  6.                         enableFont : false,  
  7.                         enableSourceEdit : false,  
  8.                         enableAlignments : false,  
  9.                         listeners : {  
  10.                             initialize : function() {  
  11.                                 Ext.EventManager.on(me.input.getDoc(), {  
  12.                                             keyup : function(e) {  
  13.                                                 if (e.ctrlKey === true  
  14.                                                         && e.keyCode == 13) {  
  15.                                                     e.preventDefault();  
  16.                                                     e.stopPropagation();  
  17.                                                     send();  
  18.                                                 }  
  19.                                             }  
  20.                                         });  
  21.                             }  
  22.                         }  
  23.                     });  
  24.             //创建消息展示容器  
  25.             var output = Ext.create('MessageContainer', {  
  26.                         region : 'center'  
  27.                     });  
  28.             var dialog = Ext.create('Ext.panel.Panel', {  
  29.                         region : 'center',  
  30.                         layout : 'border',  
  31.                         items : [input, output],  
  32.                         buttons : [{  
  33.                                     text : '发送',  
  34.                                     handler : send  
  35.                                 }]  
  36.                     });  
  37.             var websocket;  
  38.             //初始话WebSocket  
  39.             function initWebSocket() {  
  40.                 if (window.WebSocket) {  
  41.                     websocket = new WebSocket(encodeURI('ws://localhost:8080/WebSocket/message'));  
  42.                     websocket.onopen = function() {  
  43.                         //连接成功  
  44.                         win.setTitle(title + '  (已连接)');  
  45.                     }  
  46.                     websocket.onerror = function() {  
  47.                         //连接失败  
  48.                         win.setTitle(title + '  (连接发生错误)');  
  49.                     }  
  50.                     websocket.onclose = function() {  
  51.                         //连接断开  
  52.                         win.setTitle(title + '  (已经断开连接)');  
  53.                     }  
  54.                     //消息接收  
  55.                     websocket.onmessage = function(message) {  
  56.                         var message = JSON.parse(message.data);  
  57.                         //接收用户发送的消息  
  58.                         if (message.type == 'message') {  
  59.                             output.receive(message);  
  60.                         } else if (message.type == 'get_online_user') {  
  61.                             //获取在线用户列表  
  62.                             var root = onlineUser.getRootNode();  
  63.                             Ext.each(message.list,function(user){  
  64.                                 var node = root.createNode({  
  65.                                     id : user,  
  66.                                     text : user,  
  67.                                     iconCls : 'user',  
  68.                                     leaf : true  
  69.                                 });  
  70.                                 root.appendChild(node);  
  71.                             });  
  72.                         } else if (message.type == 'user_join') {  
  73.                             //用户上线  
  74.                                 var root = onlineUser.getRootNode();  
  75.                                 var user = message.user;  
  76.                                 var node = root.createNode({  
  77.                                     id : user,  
  78.                                     text : user,  
  79.                                     iconCls : 'user',  
  80.                                     leaf : true  
  81.                                 });  
  82.                                 root.appendChild(node);  
  83.                         } else if (message.type == 'user_leave') {  
  84.                                 //用户下线  
  85.                                 var root = onlineUser.getRootNode();  
  86.                                 var user = message.user;  
  87.                                 var node = root.findChild('id',user);  
  88.                                 root.removeChild(node);  
  89.                         }  
  90.                     }  
  91.                 }  
  92.             };  
  93.             //在线用户树  
  94.             var onlineUser = Ext.create('Ext.tree.Panel', {  
  95.                         title : '在线用户',  
  96.                         rootVisible : false,  
  97.                         region : 'east',  
  98.                         width : 150,  
  99.                         lines : false,  
  100.                         useArrows : true,  
  101.                         autoScroll : true,  
  102.                         split : true,  
  103.                         iconCls : 'user-online',  
  104.                         store : Ext.create('Ext.data.TreeStore', {  
  105.                                     root : {  
  106.                                         text : '在线用户',  
  107.                                         expanded : true,  
  108.                                         children : []  
  109.                                     }  
  110.                                 })  
  111.                     });  
  112.             var title = '欢迎您:' + user;  
  113.             //展示窗口  
  114.             var win = Ext.create('Ext.window.Window', {  
  115.                         title : title + '  (未连接)',  
  116.                         layout : 'border',  
  117.                         iconCls : 'user-win',  
  118.                         minWidth : 650,  
  119.                         minHeight : 460,  
  120.                         width : 650,  
  121.                         animateTarget : 'websocket_button',  
  122.                         height : 460,  
  123.                         items : [dialog,onlineUser],  
  124.                         border : false,  
  125.                         listeners : {  
  126.                             render : function() {  
  127.                                 initWebSocket();  
  128.                             }  
  129.                         }  
  130.                     });  
  131.             win.show();  
  132.             //发送消息  
  133.             function send() {  
  134.                 var message = {};  
  135.                 if (websocket != null) {  
  136.                     if (input.getValue()) {  
  137.                         Ext.apply(message, {  
  138.                                     from : user,  
  139.                                     content : input.getValue(),  
  140.                                     timestamp : new Date().getTime(),  
  141.                                     type : 'message'  
  142.                                 });  
  143.                         websocket.send(JSON.stringify(message));  
  144.                         //output.receive(message);  
  145.                         input.setValue('');  
  146.                     }  
  147.                 } else {  
  148.                     Ext.Msg.alert('提示', '您已经掉线,无法发送消息!');  
  149.                 }  
  150.             }  
  151.         });  

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