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

MySQL Docker helper script

Here is a little script I made to help me start/stop and remove a MySQL docker instance. The script also points to an init file (docker-entrypoint-initdb.d) for the database where you can put all the creations of init objects needed, eg. CREATE TABLE…, INSERT INTO…, and so on

Usage:

>my-docker-db-script start # Starts MySQL docker instance. Creates it if it does not exist
>my-docker-db-script stop # Stops the MySQL docker instance
>my-docker-db-script remove # Removes the MySQL instance

Bash script:

#!/bin/bash

name="my-mysql-db"
command="$1"

function start() {
 state=$(2>/dev/null docker inspect $name --format '{{ .State.Status }}' || echo "")

 if [[ "$state" == "running" ]]; then
  echo "Databse already running!"
  exit 1
 fi
 
 if [[ "$state" == "exited" ]]; then
  echo "Database already exists. Starting..."
  docker start $name && echo "  ... database started"
 else
  echo "No database exists. Creating..."
  docker run -d -p 3306:3306 --name $name \
   -e MYSQL_ROOT_PASSWORD=root \
   -e MYSQL_DATABASE=my_db \
   -e MYSQL_USERNAME=myusername \
   -e MYSQL_PASSWORD=myuserpassword \
   -v $(pwd)/my-mysql-db/mysql-docker-init:/docker-entrypoint-initdb.d \
   -d mysql:5.6.51 && echo "  ... database created"
 fi

}

function stop() {
 state=$(2>/dev/null docker inspect $name --format '{{ .State.Status }}' || echo "")

 if [[ "$state" == "" ]]; then
  echo "Database does not exist!"
  exit 1
 fi

 echo "Stopping database ..."
 docker stop $name && echo "  ... database stopped"
}

function remove() {
 state=$(2>/dev/null docker inspect $name --format '{{ .State.Status }}' || echo "")

 if [[ "$state" == "" ]]; then
  echo "Database does not exist!"
  exit 1
 fi

 echo "Removing database"
 if [[ "$state" == "running" ]]; then
  docker stop $name && echo "  ...database stopped"
 fi

 docker rm $name && echo "   ...database removed"
}

case "$command" in
 start)
  start
  ;;
 stop)
  stop
  ;;
 remove)
  remove
  ;;
 *)
  echo "Invalid command: ${command}. Usage $0 (start|stop|remove)"
  exit 1
esac 

Tested on MySQL v5.6.51, OSX 10.15.7 and Docker Desktop 4.3.2

My default ports cheat sheet

I usually come in contact with many systems and servers that all have many different ports. Some I remember and some I don’t, so I put them here for easy access 🙂

  • DBs:
    • MySQL: 3306
    • PostgreSQL: 5432
    • MariaDB: 3306
    • Mimer SQL: 1360
    • OracleDB: 1521
    • IBM DB2: 50000
    • Pervasive SQL: 3351 (transactional)/1583 (relational)
    • SQL Server: 1433
  • Java Frameworks
    • Spring framework: 8080
    • Play! framework: 9000
  • Javascript Frameworks:
    • NextJS: 3000
    • Angular: 4200
    • Vue: 8080
  • Mule
    • HTTP Listener Configuration: 8081
  • WebMethods
    • IS: 5555
    • Diagnostics: 9999
    • MWS: 8080
  • ActiveMQ
    • AMQP: 5672
    • OpenWire: 61616
    • MQTT: 1883/8883(SSL)
    • STOMP: 61613
    • Web interface: 8161
    • WebSocket: 61614
  • IBM MQ
    • Queue Manager: 1414
    • AMQP: 5672
    • MQTT: 1883
  • Server:
    • HTTP: 80
    • HTTPS: 443
    • SSH: 22
    • FTP: 21
    • SMTP: 25 (legacy)/587
    • SMTPS: 465
  • Misc web applications
    • Webmin: 10000