Saturday, July 6, 2013

Simple WebSocket Test with Tomcat


Introduction

This article describe how to use HTML5 WebSocket with Tomcat support.

Result

View demo on line
http://screencast.com/t/qyimehPrY

Program

index.html

Initial WebSocket, a button that will trigger WebSocket and display the returned message within content div.

<html>
    <head>
        <script type="text/javascript">
            var TestWebSocket = {
                socket: null,
                connect: (function() {
                    var host = 'ws://' + window.location.host + '/TomcatWebSocketTest/testWebSocketServlet';
                    if ('WebSocket' in window) {
                        TestWebSocket.socket = new WebSocket(host);
                    } else if ('MozWebSocket' in window) {
                        TestWebSocket.socket = new MozWebSocket(host);
                    } else {
                        alert('Error: WebSocket is not supported by this browser.');
                        return;
                    }
                    // process message from server
                    TestWebSocket.socket.onmessage = function (message) {
                        document.getElementById('content').innerHTML = message.data;
                    };
                    /* optional
                    // do something while onopen/onclose if needed
                    TestWebSocket.socket.onopen = function () {
                        alert('WebSocket opened.');
                    };
                    TestWebSocket.socket.onclose = function () {
                        alert('WebSocket closed.');
                    };
                    */
                }),
                // send message to server
                trigger: (function() {
                    TestWebSocket.socket.send('trigger');
                }),
            };

            TestWebSocket.connect();
        </script>
    </head>
    <body>
        <div id="content"></div>
        <button id="btn" onclick="TestWebSocket.trigger();">trigger</button>
    </body>
</html>


TestWebSocketServlet.java

Create and hold each WebSocket StreamInbound instance, where StreamInbound instance will handle receive/response message it self.

package test;

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

/**
 * Tested with Tomcat 7.0.42
 * @author benbai123
 *
 */
public class TestWebSocketServlet extends WebSocketServlet {

    private static final long serialVersionUID = -7663708549630020769L;

    // for message that will be sent to client
    private final AtomicInteger _cnt = new AtomicInteger(0);
    // hold each connection in this Set
    private final Set<TestMessageInbound> connections =
        new CopyOnWriteArraySet<TestMessageInbound>();
    /**
     * For create connection only, each connection will
     * handle it self as needed
     */
    @Override
    protected StreamInbound createWebSocketInbound(String subProtocol,
            HttpServletRequest request) {
        /* enable this fragment to send message by server directly
         * 
        if (_cnt.getAndIncrement() == 0) {
            new Thread(new Runnable(){
                public void run () {
                    try{
                        while (true) {
                            send();
                            Thread.sleep(1000);
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }).start();
        }
        */
        return new TestMessageInbound();
    }
    private final class TestMessageInbound extends MessageInbound {
        // add self instance into connections Set while opened
        @Override
        protected void onOpen(WsOutbound outbound) {
            connections.add(this);
        }
        // remove self instance from connections Set whild closed
        @Override
        protected void onClose(int status) {
            connections.remove(this);
        }
        // ignore binary message since we just want to process text messages
        @Override
        protected void onBinaryMessage(ByteBuffer message) throws IOException {
            throw new UnsupportedOperationException(
                "Unsupported: Binary message.");
        }
        // send a message to each connection in connections Set
        // while receive a text message
        @Override
        protected void onTextMessage(CharBuffer message) throws IOException {
            send();
        }
    }
    public void send () {
        String msg = "Current count: " + _cnt.getAndIncrement();
        for (TestMessageInbound connection : connections) {
            try {
                connection.getWsOutbound().writeTextMessage(CharBuffer.wrap(msg));
            } catch (IOException ignore) {
                /* ignore */
            }
        }
    }
}


web.xml

Configure WebSocket.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    version="3.0">
    <display-name>TomcatWebSocketTest</display-name>
    <servlet>
        <servlet-name>testWebSocketServlet</servlet-name>
        <servlet-class>test.TestWebSocketServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>testWebSocketServlet</servlet-name>
        <url-pattern>/testWebSocketServlet</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>


Reference

Start point of official tutorial.
http://tomcat.apache.org/tomcat-7.0-doc/web-socket-howto.html

Download

Full project at github
https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/WebServer/WebSocket/TomcatWebSocketTest

Demo Flash
https://github.com/benbai123/JSP_Servlet_Practice/blob/master/demo_src/Server/Tomcat/TomcatWebSocketTest.swf

1 comment: