WebSocket ( Java + TomCat )

Uma novidade com a ultima versão do Tomcat na qual fiz um estudo essa semana é o WebSocket.

WebSockets é um dos novos recursos previstos como parte do padrão HTML5. Ele oferece suporte à mensagens textuais e binárias, bi-direcionais, entre o servidor web e o navegador. Permite a criação de aplicações full-duplex, como chats, video conferências, sem exigir e onerar o navegador com lógica de pooling e reusando a mesma conexão HTTP, por fim tambem economiza recursos no servidor. Também permite o tráfego de mensagens assíncronas enviadas pelo servidor ou pelo cliente simplificando aplicações que demandam atualizações em tempo real.
Bom para realizar um teste simples peguei um exemplo de um chat, no qual vou demonstrar a seguinte.
Primeiramente você devê ter a ultima versão do Tomcat de preferência. O suporte veio a partir da 7.0.27.
Utilizando o eclipse com suporte a WEB, crie um projeto Dynamic Web, adicione como Target Runtime a ultima versão instalada do Tomcat e o dynamic web module version para 3.0, configuração default do target runtime, selecione posteriormente de preferencia  para gerar o arquivo web.xml.
Ok, criado o projeto iremos criar uma classe que estende de WebSocketServlet.
public class ChatWebSocketServlet extends WebSocketServlet 
Criaremos nossa classe de mensagem dentro do servlet, aqui adicionaremos os comportamentos para abertura de conexão, fechamento, e o envio de mensagens.
 private final AtomicInteger connectionIds = new AtomicInteger(0);
    private final Set<ChatMessageInbound> connections =
            new CopyOnWriteArraySet<ChatWebSocketServlet.ChatMessageInbound>();
  private final class ChatMessageInbound extends MessageInbound {
        private final String nickname;
        private ChatMessageInbound(int id) {
            this.nickname = "User"+ 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, 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
                }
            }
        }
    }
Bom , por ultimo sobreescrevemos createWebSocketInbound, retornando a nossa classe de mensagem e criando um id para a conexão.
@Override
    protected StreamInbound createWebSocketInbound(String subProtocol,
            HttpServletRequest request) {
        return new ChatMessageInbound(connectionIds.incrementAndGet());
    }
Bom, o Servlet é basicamente isso apenas. Devemos depois de criado adicioná-lo ao web.xml .

<servlet>

<servlet-name>wsChat</servlet-name>
<servlet-class>util.ChatWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>wsChat</servlet-name>
<url-pattern>/wsChat</url-pattern>
</servlet-mapping>
Pronto, o lado server precisamos de apenas isso.
Agora vamos criar um html simples para acessar nosso WebSocket e visualizar essa comunicação, por hora a mensagem é enviada a todos os clients, posteriormente podemos realizar diversos filtros e tratamentos.
Aqui vamos abrir a conexão e enviar mensagem via javascript.
<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();
                    }
                };
                
                document.getElementById('btnsend').onclick = function(event){
                    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);
            };
        });
        Chat.initialize = function() {
            if (window.location.protocol == 'http:') {
                Chat.connect('ws://' + window.location.host + '/TesteChat/wsChat');
            } else {
                Chat.connect('wss://' + window.location.host + '/TesteChat/wsChat');
            }
        };
        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>
<body>
<noscript>
<h2 style="color: #ff0000">Seems your browser doesn't support
Javascript! Websockets rely on Javascript being enabled. Please
enable Javascript and reload this page!</h2>
</noscript>
<div>
<p>
<input type="text" placeholder="Digite a aperte enter" id="chat">
<input type="button" id="btnsend" value="Enviar">
</p>
<div id="console-container">
<div id="console"></div>
</div>
</div>
</body>
Referente ao estilo da página coloque alguas coisitas do Bootstrap, algo que venho estudando também e é bem legal, da uma cara muito legal para o site muito facilmente.
<style type="text/css">
input#chat {
width: 350px
}
#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>
<link href="css/bootstrap.css" rel="stylesheet" />
Bom, a intenção desse post é apenas apresentar este recurso que pode ser muito util no nosso dia-a-dia.
Segue o projeto em anexo na página.
Abs.
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s