A simple chat application with javascript and ActiveMQ using STOMP messaging

Here is a small chat program that can be used for building a rich chat application, or if you just want a very simple chat program for your friends. It contains sending and receiving STOMP messages from an Apache ActiveMQ topic.

Prerequisites:
* Apace ActiveMQ server which can be found here: https://activemq.apache.org/components/classic/download/ Usually no configuration needed. Just start the server (./activemq start) and everything should work ok
* Stomp.js. A helper script for handling the WebSocket communication between ActiveMQ and your javascript application. This script can be found here, courtesy of Jeff Mesnil and Mark Broadbent: https://github.com/jmesnil/stomp-websocket/tree/master/lib

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A simple ActiveMQ chat application</title>
    
    <script src="stomp.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <textarea id="chat" rows="10" cols="35"></textarea>
    <br />
    <input id="message" size="40" type="text">
    <br />
    <button id="send" type="button" onclick="send()">Send</button>
</body>
</html>

Javascript:

// Setup websocket connection
const client = Stomp.client("ws://localhost:61614/stomp", "v11.stomp");
// Setup header options
const headers = {id: 'JUST.FCX', ack: 'client'};

// Connect to ActiveMQ (via websocket)
client.connect("admin", "admin", function () {
    // Setup subscription of topic (/topic/chat)
    client.subscribe("/topic/chat",
        function (message) {
            const msg = message.body;
            // Add message to textarea
            document.getElementById("chat").value += msg + "\n";
            // Acknowledge the message
            message.ack();
        }, headers);
});

function send() {
    const message = document.getElementById("message");
    // Send message to topic (/topic/chat)
    client.send("/topic/chat", {}, message.value);
    // Reset input field
    message.value = "";
}

Tested on OSX 10.15.7 and Apache ActiveMQ v5.16.3

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">

This site uses Akismet to reduce spam. Learn how your comment data is processed.