Tomcat学习总结（4）——基于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：

 

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类的代码：

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连接池类，这个类是用来管理目前在线的用户的连接，下面是这个类的代码：

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的代码：

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的代码：

 

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. });

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

 

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. });

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

 

注意

 

        需要注意的两点，在部署完成之后需要将在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项目的效果图：

 

实例下载