Kết nối RabbitMQ sử dụng Web STOMP Plugin

Bài viết được sự cho phép của tác giả Giang Phan

Trong các bài viết trước mình đã giới thiệu với các bạn cách kết nối đến RabbitMQ sử dụng Java thông qua giao thức AMQP. Trong bài này, tôi sẽ giới thiệu với các bạn cách kết nối RabbitMQ sử dụng Javascript thông qua WebSocket.

Web STOMP Plugin là gì?

Web STOMP plugin giúp chúng ta có thể sử dụng Javascript để kết nối đến RabbitMQ sử dụng giao thức STOMP thông qua WebSocket connection.

RabbitMQ Web STOMP sử dụng giao thức STOMP, được cung cấp bởi RabbitMQ STOMP plugin và expose (hiển thị) nó bằng WebSocket.

Để enable RabbitMQ Web STOMP plugin, sử dụng lênh sau:

rabbitmq-plugins enable rabbitmq_web_stomp

Sau khi enable, chúng ta có thể access một web socket endpoint tại context path: /ws

Chẳng hạn: http://127.0.0.1:15674/ws

Sử dụng Web STOMP Plugin

Trong ví dụ bên dưới, tôi sẽ tạo một ứng dụng Echo server, đơn giản cho phép user gửi một Message lên RabbitMQ server và subscribe để nhận Message từ RabbitMQ Server.

Giao diện chúng ta sẽ tạo như sau:

• Box bên trái: hiển thị thông tin Message nhận được từ RabbitMQ server.
• Box bên phải: hiển thị thông tin log message giao tiếp giữa client và RabbitMQ server thông qua websocket.
• Một input cho phép user gửi message lên RabbitMQ server.

Để sử dụng STOMP trong Web browser context, chúng ta cần download một JavaScript STOMP library.

Link download: https://raw.github.com/jmesnil/stomp-websocket/master/lib/stomp.js

Đoạn code của chương trình như sau:

index.html

Tiếp theo, chúng ta sẽ tạo file javascript để kết nối đến RabbitMQ server, gửi và nhận message:

• printLogDebug : hiển thị thông tin log message giao tiếp giữa client và RabbitMQ server thông qua websocket. Thông tin log sẽ được hiển thị ở box bên phải.
• printReceivedMessage : hiển thị thông tin Message nhận được từ RabbitMQ server. Thông tin log sẽ được hiển thị ở box bên trái.
• send : thực hiện gửi message lên RabbitMQ server.
• subscribe: đăng ký nhận message từ RabbitMQ server.
• bindSubmittingForm : bind sự kiện submit form (khi user nhấn enter), để lấy thông tin user đã nhập trong input và gửi Message lên RabbitMQ server.
• onConnectCallback : phương thức này được gọi lại sau khi đã tạo Stomp Client thành công. Nó thực hiện bind sự kiện submit form, subscribe nhận message từ RabbitMQ server.
• onErrorCallback : phương thức này được gọi lại khi tạo Stomp Client thất bại.
• start : chạy ứng dụng, bao gồm tạo client, enable debug, tạo connection và đăng ký các callback.

Các bạn lưu ý rằng, Destination được định nghĩa trong STOMP có một chút khác biệt so với Java sử dụng AMQP. Đặc tả STOMP không quy định loại destination nào mà broker phải hỗ trợ, thay vào đó nó được xác định dựa vào giá trị của destination header trong SEND và MESSAGE. RabbitMQ STOMP hỗ trợ một số loại destination sau:

• /exchange : SEND các khóa định tuyến tùy ý và SUBSCRIBE cho các pattern kết tùy ý.
• /queue : SEND và SUBSCRIBE tới các hàng đợi được quản lý bởi STOMP gateway.
• /amq/queue : SEND và SUBSCRIBE tới các hàng đợi được tạo bên ngoài STOMP gateway.
• /topic : SEND và SUBSCRIBE tới transient và durable topic.
• /temp-queue/ : tạo hàng đợi tạm thời (chỉ trong reply-to header).

Chi tiết các bạn tham khảo thêm tại: https://www.rabbitmq.com/stomp.html#d

rabbit-client.js

/**  * This is a RabbitMQ Web STOMP by gpcoder.com  * @see https://www.rabbitmq.com/web-stomp.html  */ // Create a destination with exchange type is topic and the routing key is gpcoder-stomp const DESTINATION = "/topic/gpcoder-stomp"; var client; var app = {     printLogDebug: function (message) {         let div = $('#logDebug');         div.append($("<code>").text(message));         div.scrollTop(div.scrollTop() + 10000);     },     printReceivedMessage: function (message) {         let div = $('#logReceivedMessage');         div.append($("<code>").text(message));         div.scrollTop(div.scrollTop() + 10000);     },     send: function(data) {         // destination, headers, body         client.send(DESTINATION, { "content-type": "text/plain" }, data);     },     subscribe: function() {         // destination, callback, headers         client.subscribe(DESTINATION, function (response) {             app.printReceivedMessage(response.body);         });     },     bindSubmittingForm: function() {         $('#first form').submit(function () {             let input = $('#first input');             let data = input.val();             app.send(data);             input.val('');             return false;         });     },     onConnectCallback: function () {         app.bindSubmittingForm();         app.subscribe();     },     onErrorCallback: function () {         console.log('error');     },     createRabbitClient: function() {         // Create STOMP client over websocket         return Stomp.client('ws://localhost:15674/ws');     },     start: function() {         // Create RabbitMQ client using STOMP over websocket         client = app.createRabbitClient(); // asign the created client as global for sending or subscribing messages                  // Enable debug         client.debug = app.printLogDebug;         // username, password, connectCallback, errorCallback, host         client.connect('guest', 'guest', app.onConnectCallback, app.onErrorCallback, '/');     } }; // Start application app.start();

Thêm một chút css cho page dễ nhìn hơn:

main.css

body {
    font-family: "Arial";
    color: #444;
}

h1, h2 {
    color: #39792e;
    font-weight: normal;
}

h1 {
    font-size: 1.5em;
    margin: 10px 20px;
}

h2 {
    font-size: 1.2em;
}

a {
    color: #39792e;
    border: 1px solid #fda;
    background: #fff0e0;
    border-radius: 3px; -moz-border-radius: 3px;
    padding: 2px;
    text-decoration: none;
    /* font-weight: bold; */
}

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.menu li {
    padding: 5px 0;
}

.box {
    width: 440px;
    float: left;
    margin: 0 20px 0 20px;
}

.box div, .box input {
    border: 1px solid;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    padding: 5px;
    margin: 3px 0 10px 0;
}

.box div {
    border-color: grey;
    height: 300px;
    overflow: auto;
}

div code {
    display: block;
}

#first div code {
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #eee;
    margin-bottom: 5px;
}

#second div {
    font-size: 0.8em;
}

Bây giờ các bạn có thể chạy thử file index.html ở trên và kiểm tra kết quả.

Mở admin UI và xem thông tin Exchange, Queue được tạo:

Trên đây là một số hướng dẫn cơ bản về cách kết nối RabbitMQ server sử dụng Javascript thông qua WebSocket. Các bạn có thể tham khảo thêm cách Authentication user, cấu hình security, thay đổi host, port, … ở các liên kết bên dưới.

Tài liệu tham khảo:

• https://www.rabbitmq.com/web-stomp.html
• https://www.rabbitmq.com/stomp.html
• https://www.rabbitmq.com/configure.html
• http://jmesnil.net/stomp-websocket/doc/

Bài viết gốc được đăng tải tại gpcoder.com

Có thể bạn quan tâm:

• [Python cơ bản thường dùng trong công việc] Phần 12 : Kết nối RabbitMQ
• Cách sử dụng các plugins jQuery trong VueJS
• Đôi chút về RabbitMQ

Xem thêm Việc làm Developer hấp dẫn trên Station D