STOMP - JavaScript

Updated on 20 Sep 2023

To retrieve a message and display it, we’ll use JavaScript. First lets download the stomp client. This comes from the excellent Stomp over Websocket website.

If you recall from an earlier section we did this

sudo rabbitmq-diagnostics listeners

This is why on line 8, we are specify the port 15674.

$(document).ready(function() {
    //--this is using rabbitmq

    //this works
    var url = "ws://localhost:15674/ws";
    var client = Stomp.client(url);

    //client.heartbeat.incoming = 0;
    //client.heartbeat.outgoing = 0;

    connect_callback = function() {
        // called after the client is connected and 
        // authenticated to the STOMP server
        client.subscribe("/queue/q1", stomp_callback); 
    error_callback = function(error) {
    // display the error's message header:

    //user, pass, connect_event, error_event, host  (host does not work with command line stomp from python)
    //client.connect('demo_user', 'demo_pass', connect_callback, error_callback, 'demo_host');

    var headers = {
        login: 'demo_user',
        passcode: 'demo_pass',
        host: 'demo_host',
        // additional header
        'client-id': 'my-client-id'
      client.connect(headers, connect_callback, error_callback);

    //-- called when the client receives a STOMP message from the server
    function stomp_callback(message)
        if(message.body) {
            //--avoid double up of information displayed.
            var text = message.body;
            text = text.substring(text.indexOf("\r") + 1);

            //--convert the newline character to <br />
            html = text.split("\n").join("<br />");



    //--button send...  (WORKS)
        //--send a message
                   "Hello from my webpage, STOMP\n");



Now lets build a webpage. The important parts are

  • stomp.js → we got that from the stomp client link above.
  • myStomp.js → that is the JavaScript code above.
<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="css/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/starter-template.css" rel="stylesheet">
    <script src="js/jquery3.js"></script>
    <script src="js/stomp.js"></script>
    <script src="js/myStomp.js"></script>


    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    <main role="main" class="container">

      <div class="starter-template">
        <h1>Call API's with JavaScript</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

        <div class="row">
          <div class="col-sm">
            <p>Open 1 - simple API call that returns a string</p>
            <button id="open1" type="button" class="btn btn-primary">Primary</button>
          <div class="col-sm">
            <p>Post 1 - Pass JSON to API endpoint</p>
            <button id="post1" type="button" class="btn btn-primary">Primary</button>
          <div class="col-sm">
            <p>Post 2 - Pass XML to an API endpoint</p>
            <button id="post2" type="button" class="btn btn-primary">Primary</button>

        <hr />

        <div class="row">
          <h2>Important Links</h2>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        <hr />

      <button id="send" type="button" class="btn btn-success">Send Stomp Message</button>
      <div id="debug"></div>
      <hr />
    </main><!-- /.container -->


What it looks like

Here is what is looks like when we open the browser and send a message.

./ "hello world from Python"