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

tuyi456com 贡献于2014-04-14

作者   创建于2012-06-06 01:30:27   修改者jiangwei  修改于2014-04-14 07:25:22字数11520

文档摘要:HTML5 WebSocket实现了服务器与浏览器的双向通讯,双向通讯使服务器消息推送开发更加简单,最常见的就是即时通讯和对信息实时性要求比较高的应用。以前的服务器消息推送大部分采用的都是“轮询”和“长连接”技术,这两中技术都会对服务器产生相当大的开销,而且实时性不是特别高。WebSocket技术对只会产生很小的开销,并且实时性特别高。下面就开始讲解如何利用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: [java] view plaincopy 1 package com.ibcio; 2 3 import javax.servlet.annotation.WebServlet; 4 import javax.servlet.http.HttpServletRequest; 5 6 import org.apache.catalina.websocket.StreamInbound; 7 8 @WebServlet(urlPatterns = { "/message"}) 9 //如果要接收浏览器的ws://协议的请求就必须实现WebSocketServlet这个类 10 public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet { 11 12 private static final long serialVersionUID = 1L; 13 14 public static int ONLINE_USER_COUNT = 1; 15 16 public String getUser(HttpServletRequest request){ 17 return (String) request.getSession().getAttribute("user"); 18 } 19 20 //跟平常Servlet不同的是,需要实现createWebSocketInbound,在这里初始化自定义的WebSocket连接对象 21 @Override 22 protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) { 23 return new WebSocketMessageInbound(this.getUser(request)); 24 } 25 } 这个Servlet跟普通的Servlet有些不同,继承的WebSocketServlet类,并且要重写createWebSocketInbound方法。这个类中Session中的user属性是用户进入index.jsp的时候设置的,记录当前用户的昵称。下面就是自己实现的WebSocket连接对象类WebSocketMessageInbound类的代码: [java] view plaincopy 26 package com.ibcio; 27 28 import java.io.IOException; 29 import java.nio.ByteBuffer; 30 import java.nio.CharBuffer; 31 32 import net.sf.json.JSONObject; 33 34 import org.apache.catalina.websocket.MessageInbound; 35 import org.apache.catalina.websocket.WsOutbound; 36 37 public class WebSocketMessageInbound extends MessageInbound { 38 39 //当前连接的用户名称 40 private final String user; 41 42 public WebSocketMessageInbound(String user) { 43 this.user = user; 44 } 45 46 public String getUser() { 47 return this.user; 48 } 49 50 //建立连接的触发的事件 51 @Override 52 protected void onOpen(WsOutbound outbound) { 53 // 触发连接事件,在连接池中添加连接 54 JSONObject result = new JSONObject(); 55 result.element("type", "user_join"); 56 result.element("user", this.user); 57 //向所有在线用户推送当前用户上线的消息 58 WebSocketMessageInboundPool.sendMessage(result.toString()); 59 60 result = new JSONObject(); 61 result.element("type", "get_online_user"); 62 result.element("list", WebSocketMessageInboundPool.getOnlineUser()); 63 //向连接池添加当前的连接对象 64 WebSocketMessageInboundPool.addMessageInbound(this); 65 //向当前连接发送当前在线用户的列表 66 WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString()); 67 } 68 69 @Override 70 protected void onClose(int status) { 71 // 触发关闭事件,在连接池中移除连接 72 WebSocketMessageInboundPool.removeMessageInbound(this); 73 JSONObject result = new JSONObject(); 74 result.element("type", "user_leave"); 75 result.element("user", this.user); 76 //向在线用户发送当前用户退出的消息 77 WebSocketMessageInboundPool.sendMessage(result.toString()); 78 } 79 80 @Override 81 protected void onBinaryMessage(ByteBuffer message) throws IOException { 82 throw new UnsupportedOperationException("Binary message not supported."); 83 } 84 85 //客户端发送消息到服务器时触发事件 86 @Override 87 protected void onTextMessage(CharBuffer message) throws IOException { 88 //向所有在线用户发送消息 89 WebSocketMessageInboundPool.sendMessage(message.toString()); 90 } 91 } 代码中的主要实现了onOpen、onClose、onTextMessage方法,分别处理用户上线、下线、发送消息。在这个类中有个WebSocketMessageInboundPool连接池类,这个类是用来管理目前在线的用户的连接,下面是这个类的代码: [java] view plaincopy 92 package com.ibcio; 93 94 import java.io.IOException; 95 import java.nio.CharBuffer; 96 import java.util.HashMap; 97 import java.util.Map; 98 import java.util.Set; 99 100 public class WebSocketMessageInboundPool { 101 102 //保存连接的MAP容器 103 private static final Map connections = new HashMap(); 104 105 //向连接池中添加连接 106 public static void addMessageInbound(WebSocketMessageInbound inbound){ 107 //添加连接 108 System.out.println("user : " + inbound.getUser() + " join.."); 109 connections.put(inbound.getUser(), inbound); 110 } 111 112 //获取所有的在线用户 113 public static Set getOnlineUser(){ 114 return connections.keySet(); 115 } 116 117 public static void removeMessageInbound(WebSocketMessageInbound inbound){ 118 //移除连接 119 System.out.println("user : " + inbound.getUser() + " exit.."); 120 connections.remove(inbound.getUser()); 121 } 122 123 public static void sendMessageToUser(String user,String message){ 124 try { 125 //向特定的用户发送数据 126 System.out.println("send message to user : " + user + " ,message content : " + message); 127 WebSocketMessageInbound inbound = connections.get(user); 128 if(inbound != null){ 129 inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message)); 130 } 131 } catch (IOException e) { 132 e.printStackTrace(); 133 } 134 } 135 136 //向所有的用户发送消息 137 public static void sendMessage(String message){ 138 try { 139 Set keySet = connections.keySet(); 140 for (String key : keySet) { 141 WebSocketMessageInbound inbound = connections.get(key); 142 if(inbound != null){ 143 System.out.println("send message to user : " + key + " ,message content : " + message); 144 inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message)); 145 } 146 } 147 } catch (IOException e) { 148 e.printStackTrace(); 149 } 150 } 151 } 前台展示 上面的代码就是聊天室后台的代码,主要是由3个对象组成,Servlet、连接对象、连接池,下面就是前台的代码,前台的代码主要是实现与服务器进行连接,展示用户列表及信息列表,前台的展示使用了Ext框架,不熟悉Ext的同学可以初步的了解下Ext,下面的是index.jsp的代码: [html] view plaincopy 152 <%@ page language="java" pageEncoding="UTF-8" import="com.ibcio.WebSocketMessageServlet"%> 153 <% 154 String user = (String)session.getAttribute("user"); 155 if(user == null){ 156 //为用户生成昵称 157 user = "游客" + WebSocketMessageServlet.ONLINE_USER_COUNT; 158 WebSocketMessageServlet.ONLINE_USER_COUNT ++; 159 session.setAttribute("user", user); 160 } 161 pageContext.setAttribute("user", user); 162 %> 163 164 165 WebSocket 聊天室 166 167 168 169 170 171 172 173 174 177 178 179 180

WebSocket聊天室

181

通过HTML5标准提供的API与Ext富客户端框架相结合起来,实现聊天室,有以下特点:

182
    183
  • 实时获取数据,由服务器推送,实现即时通讯
  • 184
  • 利用WebSocket完成数据通讯,区别于轮询,长连接等技术,节省服务器资源
  • 185
  • 结合Ext进行页面展示
  • 186
  • 用户上线下线通知
  • 187
188
189 190 页面的展示主要是在websocket.js中进行控制,下面是websocket.jsd的代码: [javascript] view plaincopy 191 //用于展示用户的聊天信息 192 Ext.define('MessageContainer', { 193 194 extend : 'Ext.view.View', 195 196 trackOver : true, 197 198 multiSelect : false, 199 200 itemCls : 'l-im-message', 201 202 itemSelector : 'div.l-im-message', 203 204 overItemCls : 'l-im-message-over', 205 206 selectedItemCls : 'l-im-message-selected', 207 208 style : { 209 overflow : 'auto', 210 backgroundColor : '#fff' 211 }, 212 213 tpl : [ 214 '
​交谈中请勿轻信汇款、中奖信息、陌生电话。 请遵守相关法律法规。
', 215 '', 216 '
', 217 '
{from} {timestamp}
', 218 '
{content}
', '
', 219 '
'], 220 221 messages : [], 222 223 initComponent : function() { 224 var me = this; 225 me.messageModel = Ext.define('Leetop.im.MessageModel', { 226 extend : 'Ext.data.Model', 227 fields : ['from', 'timestamp', 'content', 'source'] 228 }); 229 me.store = Ext.create('Ext.data.Store', { 230 model : 'Leetop.im.MessageModel', 231 data : me.messages 232 }); 233 me.callParent(); 234 }, 235 236 //将服务器推送的信息展示到页面中 237 receive : function(message) { 238 var me = this; 239 message['timestamp'] = Ext.Date.format(new Date(message['timestamp']), 240 'H:i:s'); 241 if(message.from == user){ 242 message.source = 'self'; 243 }else{ 244 message.source = 'remote'; 245 } 246 me.store.add(message); 247 if (me.el.dom) { 248 me.el.dom.scrollTop = me.el.dom.scrollHeight; 249 } 250 } 251 }); 这段代码主要是实现了展示消息的容器,下面就是页面加载完成后开始执行的代码: [javascript] view plaincopy 252 Ext.onReady(function() { 253 //创建用户输入框 254 var input = Ext.create('Ext.form.field.HtmlEditor', { 255 region : 'south', 256 height : 120, 257 enableFont : false, 258 enableSourceEdit : false, 259 enableAlignments : false, 260 listeners : { 261 initialize : function() { 262 Ext.EventManager.on(me.input.getDoc(), { 263 keyup : function(e) { 264 if (e.ctrlKey === true 265 && e.keyCode == 13) { 266 e.preventDefault(); 267 e.stopPropagation(); 268 send(); 269 } 270 } 271 }); 272 } 273 } 274 }); 275 //创建消息展示容器 276 var output = Ext.create('MessageContainer', { 277 region : 'center' 278 }); 279 280 var dialog = Ext.create('Ext.panel.Panel', { 281 region : 'center', 282 layout : 'border', 283 items : [input, output], 284 buttons : [{ 285 text : '发送', 286 handler : send 287 }] 288 }); 289 var websocket; 290 291 //初始话WebSocket 292 function initWebSocket() { 293 if (window.WebSocket) { 294 websocket = new WebSocket(encodeURI('ws://localhost:8080/WebSocket/message')); 295 websocket.onopen = function() { 296 //连接成功 297 win.setTitle(title + ' (已连接)'); 298 } 299 websocket.onerror = function() { 300 //连接失败 301 win.setTitle(title + ' (连接发生错误)'); 302 } 303 websocket.onclose = function() { 304 //连接断开 305 win.setTitle(title + ' (已经断开连接)'); 306 } 307 //消息接收 308 websocket.onmessage = function(message) { 309 var message = JSON.parse(message.data); 310 //接收用户发送的消息 311 if (message.type == 'message') { 312 output.receive(message); 313 } else if (message.type == 'get_online_user') { 314 //获取在线用户列表 315 var root = onlineUser.getRootNode(); 316 Ext.each(message.list,function(user){ 317 var node = root.createNode({ 318 id : user, 319 text : user, 320 iconCls : 'user', 321 leaf : true 322 }); 323 root.appendChild(node); 324 }); 325 } else if (message.type == 'user_join') { 326 //用户上线 327 var root = onlineUser.getRootNode(); 328 var user = message.user; 329 var node = root.createNode({ 330 id : user, 331 text : user, 332 iconCls : 'user', 333 leaf : true 334 }); 335 root.appendChild(node); 336 } else if (message.type == 'user_leave') { 337 //用户下线 338 var root = onlineUser.getRootNode(); 339 var user = message.user; 340 var node = root.findChild('id',user); 341 root.removeChild(node); 342 } 343 } 344 } 345 }; 346 347 //在线用户树 348 var onlineUser = Ext.create('Ext.tree.Panel', { 349 title : '在线用户', 350 rootVisible : false, 351 region : 'east', 352 width : 150, 353 lines : false, 354 useArrows : true, 355 autoScroll : true, 356 split : true, 357 iconCls : 'user-online', 358 store : Ext.create('Ext.data.TreeStore', { 359 root : { 360 text : '在线用户', 361 expanded : true, 362 children : [] 363 } 364 }) 365 }); 366 var title = '欢迎您:' + user; 367 //展示窗口 368 var win = Ext.create('Ext.window.Window', { 369 title : title + ' (未连接)', 370 layout : 'border', 371 iconCls : 'user-win', 372 minWidth : 650, 373 minHeight : 460, 374 width : 650, 375 animateTarget : 'websocket_button', 376 height : 460, 377 items : [dialog,onlineUser], 378 border : false, 379 listeners : { 380 render : function() { 381 initWebSocket(); 382 } 383 } 384 }); 385 386 win.show(); 387 388 //发送消息 389 function send() { 390 var message = {}; 391 if (websocket != null) { 392 if (input.getValue()) { 393 Ext.apply(message, { 394 from : user, 395 content : input.getValue(), 396 timestamp : new Date().getTime(), 397 type : 'message' 398 }); 399 websocket.send(JSON.stringify(message)); 400 //output.receive(message); 401 input.setValue(''); 402 } 403 } else { 404 Ext.Msg.alert('提示', '您已经掉线,无法发送消息!'); 405 } 406 } 407 }); 上面的代码就是页面完成加载后自动连接服务器,并创建展示界面的代码。 注意 需要注意的两点,在部署完成之后需要将在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实现视频聊天和语音聊天。在我的Leetop项目中已经实现了浏览器端视频聊天的功能,大家可以去看看 www.ibcio.com,在我的另外一篇文章中有详细的介绍:http://blog.csdn.net/leecho571/article/details/8207102,下图就是Leetop项目的效果图: 实例下载 下载地址:http://download.csdn.net/detail/leecho571/5854569 更多2 · 上一篇HTML5 Web Speech API 结合Ext实现浏览器语音识别以及输入 · 下一篇使用WebRTC实现电脑与手机通过浏览器进行视频通话

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享文档获得金币 ] 1 人已下载

下载文档