JAVA+Tomcat7.0+WebSocket开发实战

最近研究win8 metro也就是win8 app store里面的应用，发现metro原来就是一个前台展示，由于没有iis，没有.netFramework框架，在vs2012中开发链接数据库操作非常的困难，想要链接数据库，完全没有开发C# .net那么轻松，遥想当年，用一句Sqlcommand就能横行天下，第一次接触metro这种完全没有后台动态语言的应用，真是智商捉急啊。

想开发WIN8 APP的孩子们可以多关注一下msdn链接给下：http://msdn.microsoft.com/zh-CN/windows/apps/；更详细的链接给下：http://msdn.microsoft.com/zh-cn/library/windows/apps/br229565.aspx.由于国内市面上关于win8 appstore的书简直太少，即使是仅有的几本书，主要还是应用xaml+c#的开发语言。对于xaml使用并不是很顺畅的我，只能选择html+js+css的开发路径，于是参考资料少的可怜。于是百度，谷歌。发现谷歌要比百度好多了，谷歌不愧是靠pagerank混的，这点百度的竞价体制真是太烦人了。

一开始想进行数据库操作，发现完全没有数据库操作的途径，所以只能用网络通信的方式，问了旁边实验室的娃，得知ajax比较适用，但是由于对ajax实在还不熟，而且也不确定win8app store里面对ajax支持的程度到底有多好，于是应用了html里面原生的websocket通信方式，来解决从后台向前台传数据的问题。关于websocket，网站上有不少的通信协议解释，在这里就不赘述了，给个链接：http://ued.sina.com.cn/?p=900。（说实话，除了上面的原理还能明白，下面的代码完全不知道写哪。。。我水平就是个菜，勿喷。）

好了不多说，这篇文章是来说websocket的，由于html5的盛行，websocket能够做关于实时从后台向前台传数据的操作，非常的棒，类似实时股票分析的应用。

首先websocket需要服务器端和客户端，这个和普通的socket相似。但是通信协议完全是凌驾在web服务器上的，需要web服务器的支持。

先说服务器端：主流有1  nodjs+js,

                                        2 tomcat7+jdk1.7+java（我用）

                                        3 glassfish+java+jdk1.7

                                        4 （记得看别人写的还有一种，大家可以自己去搜，百度前几个准有）

由于对别的不熟，就决定用tomcat7+jdk1.7

注意：一定是tomcat7 因为6还没有支持websocket的开发，所以一定要用7

开发ide：选用eclipse

于是这是一个eclipse下jdk1.7+tomcat7的一个webservice

闲话不多说，有图有证据

新建一个servlet

代码如下：

package websocket.chat;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

@WebServlet("/ChatWebSocketServlet")
public class ChatWebSocketServlet extends WebSocketServlet {
    private static final long serialVersionUID = 1L;
    private static final String GUEST_PREFIX = "Guest";
    //用于自动生成连接ID
    private final AtomicInteger connectionIds = new AtomicInteger(0);
    //用于保存所有连接Inbound的集合
    private final Set<ChatMessageInbound> connections =
            new CopyOnWriteArraySet<ChatMessageInbound>();
    //生成新的连接Inbound，WebSocketServlet必须实现该方法
    @Override
    protected StreamInbound createWebSocketInbound(String subProtocol,
            HttpServletRequest request) {
        return new ChatMessageInbound(connectionIds.incrementAndGet());
    }
    //聊天消息处理类
    private final class ChatMessageInbound extends MessageInbound {
        private final String nickname;
        private ChatMessageInbound(int id) {
            this.nickname = GUEST_PREFIX + id;
        }
        //创建新的连接时触发
        @Override
        protected void onOpen(WsOutbound outbound) {
            connections.add(this);
            String message = String.format("* %s %s",
                    nickname, "has joined.");
            broadcast(message);
        }
        //关闭连接时触发
        @Override
        protected void onClose(int status) {
            connections.remove(this);
            String message = String.format("* %s %s",
                    nickname, "has disconnected.");
            broadcast(message);
        }
        //发送二进制消息时触发
        @Override
        protected void onBinaryMessage(ByteBuffer message) throws IOException {
            throw new UnsupportedOperationException(
                    "Binary message not supported.");
        }
        //发送文本消息时触发
        @Override
        protected void onTextMessage(CharBuffer message) throws IOException {
            // Never trust the client
            String filteredMessage = String.format("%s: %s",
                    nickname, message.toString());
            broadcast(filteredMessage);
        }
        //该方法向所有活动连接发送文本信息
        private void broadcast(String message) {
            for (ChatMessageInbound connection : connections) {
                try {
                    CharBuffer buffer = CharBuffer.wrap(message);
                    connection.getWsOutbound().writeTextMessage(buffer);
                } catch (IOException ignore) {
                }
            }
        }
    }
}

下面再建立一个html页面

在下！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        input#chat {
            width: 410px
        }
        #console-container {
            width: 400px;
        }
        #console {
            border: 1px solid #CCCCCC;
            border-right-color: #999999;
            border-bottom-color: #999999;
            height: 170px;
            overflow-y: scroll;
            padding: 5px;
            width: 100%;
        }
        #console p {
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        var Chat = {};
        Chat.socket = null;
        Chat.connect = (function(host) {
            if ('WebSocket' in window) {
                Chat.socket = new WebSocket(host);
            } else if ('MozWebSocket' in window) {
                Chat.socket = new MozWebSocket(host);
            } else {
                Console.log('Error: WebSocket is not supported by this browser.');
                return;
            }
			//建立连接触发事件
            Chat.socket.onopen = function () {
                Console.log('Info: WebSocket connection opened.');
                document.getElementById('chat').onkeydown = function(event) {
                    if (event.keyCode == 13) {
                        Chat.sendMessage();
                    }
                };
            };
			//关闭连接触发事件
            Chat.socket.onclose = function () {
                document.getElementById('chat').onkeydown = null;
                Console.log('Info: WebSocket closed.');
            };
			//接收消息触发事件
            Chat.socket.onmessage = function (message) {
                Console.log(message.data);
            };
        });
		//初始化聊天对象方法，注意URL中的项目名称和Servlet名称
        Chat.initialize = function() {
            if (window.location.protocol == 'http:') {
                Chat.connect('ws://' + window.location.host + '/webchat/ChatWebSocketServlet');
            } else {
                Chat.connect('wss://' + window.location.host + '/webchat/ChatWebSocketServlet');
            }
        };
		//发送聊天信息方法
        Chat.sendMessage = (function() {
            var message = document.getElementById('chat').value;
            if (message != '') {
                Chat.socket.send(message);
                document.getElementById('chat').value = '';
            }
        });
        var Console = {};
		//显示消息记录
        Console.log = (function(message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.innerHTML = message;
            console.appendChild(p);
            while (console.childNodes.length > 25) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        });
        Chat.initialize();
    </script>
</head>
<body>
<div>
    <p>
        <input type="text" placeholder="type and press enter to chat" id="chat">
    </p>
    <div id="console-container">
        <div id="console"></div>
    </div>
</div>
</body>
</html>

好了，运行吧