HTML5-приложение в реальном времени с Websocket и ActiveMQ / Camel

В рамках своей презентации на CamelOne я подготовил несколько примеров, чтобы понять , что Apache ActiveMQ и Camel предлагают для работы с технологиями HTML5 и WebSocket .
Разработка «Веб-приложений реального времени» всегда была болезненной, независимо от того, была ли используемая технология основана на Java-апплете, Adobe Flash, Adobe ShockWave, Microsoft Silverlight и протоколе (HTTP, RMI, …).

После публикации HTML5 (2009 г.) и работы, проделанной организациями W3C и IETF, теперь у нас есть стандарт rfc-6455.что мы можем использовать для двунаправленного обмена «сообщениями» между браузером и веб-сервером. Только один запрос HTTP (ов) требуется для инициирования связи WebSocket, а затем для обмена кадрами данных (текст или байты).

ActiveMQ (выпуск 5.6), как и Camel (выпуск 2.10), предлагает транспортный коннектор WebSocket или конечную точку, используя реализацию Jetty WebServer WebSocket (v7.5). Это позволяет не только извлекать данные из тем, но и при комбинировании шаблонов EIP Camel и некоторых компонентов, таких как: sql, jpa, file, rss, atom, twitter, … мы можем «объединять», «обогащать» или «фильтровать» контент получают от поставщиков каналов, прежде чем публиковать их для потребителей каналов.

ActiveMQ использует Stomp в качестве проводного формата для отправки сообщений WebSockets между сервером WebSocket, работающим в брокере ActiveMQ, и веб-браузером. В этом контексте мы должны использовать одну из двух доступных библиотек javascript ( stomp.js , stomple ) для разработки проекта.

$(document).ready(function() {
   var client, destinationQuotes;
    $('#connect_form').submit(function() {
        var url = $("#connect_url").val();
        client = Stomp.client(url);
 
        // the client is notified when it is connected to the server.
        var onconnect = function(frame) {
 
            var stockTable = document.getElementById("stockTable");
            var stockRowIndexes = {};
 
            client.subscribe(destinationQuotes, function(message) {
                var quote = JSON.parse(message.body);
                $('.' + "stock-" + quote.symbol).replaceWith("" +
                    "" + quote.symbol + "" +
                    "" + quote.open.toFixed(2) + "" +
                    "" + quote.last.toFixed(2) + "" +
                    "" + quote.change.toFixed(2) + "" +
                    "" + quote.high.toFixed(2) + "" +
                    "" + quote.low.toFixed(2) + "" +
                    "");
    ...
 
    client.connect(login, passcode, onconnect);

и, конечно, протокол WebSocket должен быть включен.

<transportconnectors>
  <transportconnector name="websocket" uri="ws://0.0.0.0:61614">
</transportconnector></transportconnectors>

Camel не нуждается в специальном формате для обмена данными между конечной точкой WebSocket и браузером, поскольку текст JSon будет отправляться через кадры данных WebSocket в браузер. Мы просто должны выставить верблюжий маршрут как сервер WebSocket. 

public class WebSocketStockPricesRoute extends RouteBuilder {
    @Override
    public void configure() throws Exception {
 
           from("activemq:topic:stockQuoteTopic")
             .log(LoggingLevel.DEBUG,">> Stock price received : ${body}")
             .to("websocket:stockQuoteTopic?sendToAll=true");
 
    }
} 

и используйте в браузере JS-скрипт WebSocket HTML5.

var socket;
    $('#connect_form').submit(function () {
 
        var stockTable = document.getElementById("stockTable");
        var stockRowIndexes = {};
        var host = $("#connect_url").val();
        socket = new WebSocket(host);
 
       // Add a connect listener
        socket.onopen = function () {
            $('#msg').append('<div class="event">
Socket Status: ' + socket.readyState + ' (open)</div>
');
        }
 
        socket.onmessage = function (msg) {
            // $('#msg').append('<div class="message">
Received: ' + msg.data + "</div>
");
 
            var quote = JSON.parse(msg.data);
 
        ....

В обоих случаях вы можете комбинировать другие библиотеки javascript (jquery, jquery-ui), чтобы улучшить дизайн объектов JSon, отображаемых в браузере.

Вот несколько скриншотов из демоверсий

Биржевой трейдер

Чат комната Twitter и новостная лента