WebSocket初探

<script type="text/javascript">
        var Chat = {};

        Chat.socket = null;

        Chat.connect = (function(host) {
            // 创建WebSocket
            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;
            }
            // 定义Open事件处理函数
            Chat.socket.onopen = function () {
                Console.log(‘Info: WebSocket connection opened.‘);
                document.getElementById(‘chat‘).onkeydown = function(event) {
                    if (event.keyCode == 13) {
                        Chat.sendMessage();
                    }
                };
            };
            // 定义Close事件处理函数
            Chat.socket.onclose = function () {
                document.getElementById(‘chat‘).onkeydown = null;
                Console.log(‘Info: WebSocket closed.‘);
            };
            // 定义Message事件处理函数
            Chat.socket.onmessage = function (message) {
                Console.log(message.data);
            };
        });

        Chat.initialize = function() {
            if (window.location.protocol == ‘http:‘) {
                Chat.connect(‘ws://‘ + 
window.location.host + ‘/examples/websocket/chat‘);
            } else {
                Chat.connect(‘wss://‘ + 
window.location.host + ‘/examples/websocket/chat‘);
            }
        };
		// 发送消息至服务端
        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>

public class ChatWebSocketServlet extends WebSocketServlet {

    private static final long serialVersionUID = 1L;

    private static final String GUEST_PREFIX = "Guest";

    private final AtomicInteger connectionIds = new AtomicInteger(0);
    private final Set<ChatMessageInbound> connections =
            new CopyOnWriteArraySet<ChatMessageInbound>();
    // 创建Inbound实例，WebSocketServlet子类必须实现的方法
    @Override
    protected StreamInbound createWebSocketInbound(String subProtocol,
            HttpServletRequest request) {
        return new ChatMessageInbound(connectionIds.incrementAndGet());
    }
    // MessageInbound子类，完毕收到WebSocket消息后的逻辑处理
    private final class ChatMessageInbound extends MessageInbound {

        private final String nickname;

        private ChatMessageInbound(int id) {
            this.nickname = GUEST_PREFIX + id;
        }
        // Open事件
        @Override
        protected void onOpen(WsOutbound outbound) {
            connections.add(this);
            String message = String.format("* %s %s",
                    nickname, "has joined.");
            broadcast(message);
        }
        // Close事件
        @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, HTMLFilter.filter(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) {
                    // Ignore
                }
            }
        }
    }

通过上述例程能够看到WebSocket广播实际上是通过遍历全部连接并通过每一个连接向对应的client发送消息实现的。

四、            WebSocket实战

        实时向在线用户推送通知是一个WebSocket应用的简单场景，后台提交通知信息以后，所在在线用户均应非常快收到这个通知。通过上述例程了解WebSocket后，能够尝试编写一个实现这个需求的WebSocket应用。

<!DOCTYPE html>
<html>
<head>
    <title>Receive Message</title>
    <style type="text/css">
        #winpop { width:200px; height:0px; 
            position:absolute; 
            right:0; bottom:0; 
            border:1px solid #999999; 
            margin:0; 
            padding:1px; 
            overflow:hidden; 
            display:none; 
            background:#FFFFFF}
        #winpop .con { width:100%; height:80px; 
            line-height:80px; 
            font-weight:bold; 
            font-size:12px; 
            color:#FF0000; 
            text-align:center}
    </style>
    <script type="text/javascript">
        // 弹窗相关
        function tips_pop(){
            var MsgPop=document.getElementById("winpop");
            var popH=parseInt(MsgPop.style.height);
            
            if(isNaN(popH)) {
                popH = 0;
            }
            
            if (popH==0){
                MsgPop.style.display="block";
                show=setInterval("changeH(‘up‘)",100);
            }
            else {
                hide=setInterval("changeH(‘down‘)",100);
            }
        }

        function changeH(str) {
            var MsgPop=document.getElementById("winpop");
            var popH=parseInt(MsgPop.style.height);
            
            if(isNaN(popH)) {
                popH = 0;
            }
            
            if(str=="up"){   
                if (popH<=100){    
                    MsgPop.style.height=(popH+4).toString()+"px";
                }
                else{  
                    clearInterval(show);
                    setTimeout("tips_pop()", 5000);
                }
            }
            if(str=="down"){ 
                if (popH>=4){      
                    MsgPop.style.height=(popH-4).toString()+"px";
                }
                else{        
                    clearInterval(hide);    
                    MsgPop.style.display="none";  
                }
            }
        }
        
        // WebSocket相关
        var ws = null;
        
        function connect() {
            var target = ‘ws://‘ + window.location.host 
                + "/test/NotifyWebSocketServlet";
            
            if (‘WebSocket‘ in window) {
                ws = new WebSocket(target);
            } else if (‘MozWebSocket‘ in window) {
                ws = new MozWebSocket(target);
            } else {
                alert(‘WebSocket is not supported by this browser.‘);
                return;
            }
            
            ws.onopen = function () {
                 document.getElementById(‘msg‘).innerHTML = 
                    "WebSocket has opened, Waiting message.......";
            };
            
            ws.onmessage = function (event) {
                document.getElementById(‘infomsg‘).innerHTML = event.data;
                tips_pop();
            };
            
            ws.onclose = function () {
                document.getElementById(‘msg‘).innerHTML = "WebSocket has closed";
            };
        }

        function disconnect() {
            if (ws != null) {
                ws.close();
                ws = null;
            }
        }       
        
        connect();        
    </script>
</head>
<body>
    <h1 align="center" id="msg">Try to connect websocket.</h1>
    <div id="winpop">
        <div class="con" id="infomsg"></div>
    </div>
</body>
</html>

package net.yanzhijun.example;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;

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

public class NotifyWebSocketServlet extends WebSocketServlet {

    private static final long serialVersionUID = 1L;    

    @Override
    protected StreamInbound createWebSocketInbound(String subProtocol,
            HttpServletRequest request) {
        ServletContext application = this.getServletContext();
        return new NofityMessageInbound(application);
    }    
}

        与Tomcat给出的演示样例代码不同的是，在NotifyWebSocketServlet中并未将继承于MessageInbound的NofityMessageInbound作为一个内嵌类。前述演示样例代码中发送消息和接收消息都是在同一组client页面和服务端响应Servlet间进行的，而当前须要实现是在一个页面中提交通知，而在其他用户的页面上显示通知信息，因此须要将全部client与服务端的连接存储一个全局域中，故而NofityMessageInbound将不仅仅在当前Servlet中被使用，所以有必要将其独立出来。

package net.yanzhijun.example;

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

import javax.servlet.ServletContext;

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

public class NofityMessageInbound extends MessageInbound {
    private ServletContext application;
    private Set<NofityMessageInbound> connections = null;
    
    public NofityMessageInbound(ServletContext application) {
        this.application = application;
        connections = 
            (Set<NofityMessageInbound>)application.getAttribute("connections");
        if(connections == null) {
            connections =
                new CopyOnWriteArraySet<NofityMessageInbound>();
        }
    }
    
    @Override
    protected void onOpen(WsOutbound outbound) {
        connections.add(this);    
        application.setAttribute("connections", connections);
    }

    @Override
    protected void onClose(int status) {
        connections.remove(this);
        application.setAttribute("connections", connections);
    }

    @Override
    protected void onBinaryMessage(ByteBuffer message) throws IOException {
        throw new UnsupportedOperationException(
                "message not supported.");
    }

    @Override
    protected void onTextMessage(CharBuffer message) throws IOException {
        throw new UnsupportedOperationException(
                "message not supported.");
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>PushMessage</title>
    </head>
    <body>
        <h1 align="Center">Online Broadcast</h1>
        <form method="post" action="PushMessageServlet">
            <p>Message:<br/>
                <textarea name="message" rows="5" cols="30"></textarea>
            </p>
            <p><input type="submit" value="Send">  
                <input type="reset" value="Reset">
            </p>
        </form>
    </body>
</html>

package net.yanzhijun.example;

import java.io.PrintWriter;
import java.nio.CharBuffer;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.io.IOException;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PushMessageServlet extends HttpServlet {
     private static final long serialVersionUID = 1L;
     
    @Override
    public void doGet(HttpServletRequest request,
                      HttpServletResponse response)
        throws IOException, ServletException {
            doPost(request, response);
        }
        
    @Override
    public void doPost(HttpServletRequest request,
                      HttpServletResponse response)
        throws IOException, ServletException {
            
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        
        PrintWriter out = response.getWriter();
        
        String message = request.getParameter("message");        
        if(message == null || message.length() == 0) {            
            out.println("The message is empty!");
            return;
        }
        
        // 广播消息
        broadcast(message);
        
        out.println("Send success!");        
    }
    
    // 将參数中的消息发送至全部在线client
    private void broadcast(String message) {
        ServletContext application=this.getServletContext();    
        Set<NofityMessageInbound> connections = 
(Set<NofityMessageInbound>)application.getAttribute("connections");
        if(connections == null){
            return;
        }
        
        for (NofityMessageInbound connection : connections) {
            try {
                CharBuffer buffer = CharBuffer.wrap(message);
                connection.getWsOutbound().writeTextMessage(buffer);
            } catch (IOException ignore) {
                // Ignore
            }
        }
    } 
}

五、            WebSocket总结