Blazor, RabbitMQ and MQTT using Paho with JSInterop.

With Blazor being in official preview I decided to create a simple chat application using the Client-side Blazor project template which runs on WebAssembly.

The goal

Connect to a RabbitMQ service with one or more clients sending and receiving public chat messages.

Lets get start

I’ve never used any MQTT library before but found Paho by Eclipse. It’s a great library from and it’s aimed at IoT development, but will do perfectly for this example.

Step 1: Installing and configuring RabbitMQ

Go to the RabbitMQ website and download the latest version of RabbitMQ (version 3.7.15 at the time of writing). You will also need Erlang (version 22.0 at time of writing) as it’s a prerequisite for RabbitMQ.

Once you’ve installed Erlang and RabbitMQ you will need to enable the following plugins. To do this, follow the information on the RabbitMQ plugins page on their website about enabling plugins.

  • rabbitmq_management
  • rabbitmq_web_mqtt

If you are running windows you can search for the “RabbitMQ Command Prompt (sbin dir) shortcut under your start menu or you can navigate to the following folder in command prompt running as an administrator.

C:\Program Files\RabbitMQ Server\rabbitmq_server-x.y.z\sbin>

Run the following commands:

rabbitmq-plugins enable rabbitmq_management
rabbitmq-plugins enable rabbitmq_web_mqtt

Once you have enabled the plugins you can navigate to the management page by going to http://localhost:15672 if you have not changed the default port.

Default credentials:
username: guest
password: guest

What you want to make sure of is that the plugin has been enabled and a listening port has been setup. My RabbitMQ MQTT port is using the default MQTT port of 15675 as shown below.


Step 2: Configuring Visual Studio

To get started with this you will need Visual Studio 2019 or Visual Studio Code but for this example I’m using Visual Studio 2019 v16.4.

Then you will need to install ASP.NET Core v3.1.103 SDK and as well as the Blazor 3.1.0-preview4.19579.2 template. If you have any issues installing please follow the Get started with Blazor docs.

Step 3: Creating your Blazor project

Start Visual Studio 2019 and follow the below steps:

  • Create Project
  • Select ASP.NET Core Web Application
  • Enter a project name of Blazor.MQTT.Chat
  • Select the Blazor (client-side) template


Step 4: Clean up the default template

Delete the following razor files from the default template:

  • Pages
    • Counter.razor
    • FetchData.razor
  • Shared
    • SurveyPrompt.razor

Step 5: Adding the Paho Javascript library and creating our JSInterop class

We need to create a javascript library that will be used by our Blazor JSInterop class to communicate between the Eclipse Paho Javascript library and our application.

– Create a folder called scripts under wwwroot
– Create a new file called paho-mqtt-interop.js and add the following code to it.

Now we need to update the index.html file under wwwroot to include a reference to the Eclipse Paho library as well as our new paho-mqtt-interop.js file.

Add the below script tags straight after the “_framework/blazor.webassembly.js” script tag reference.

Create a new folder in the project root called “JsInterop” and create the following classes “MqttEvents.cs” and “MqttJsInterop.cs” with the below code:



Navigate to the Startup.cs file and add the following in the ConfigureServices method to make sure the Dependency Injection we use later on works.

Step 6: Layout and adding our final touches

So earlier we cleaned up the default project and just left it. Lets create the layout for the chat application and implement the razor page changes we need to get the Blazor application working.

Replace the follow razor files:

Shared -> MainLayout.razor

Pages -> Index.razor

Start the application and open multiple browser tabs to the same address, enter your name, click connect and start chatting.


You can also see how many users are connected by looking at your RabbitMQ Management -> Connections Tab


GitHub Repo (Updated to use 3.1.0-preview4.19579.2)

I’ve put the entire project up on my GitHub account here:


4 thoughts on “Blazor, RabbitMQ and MQTT using Paho with JSInterop.

  1. Hi,

    Thanks for the interesting article. However I can’t seem to fix the following error:
    WASM: Microsoft.JSInterop.JSException: Unable to set property ‘onMessageArrived’ of undefined or null reference

    I’m using the latest blazor preview template.

    Thanks for any tips or updates.

    1. Hi jokke009Joost,

      I haven’t updated this to use the latest Blazor template, I do know there have been some changes on how you interact with JSInterop. I’ll try put some time into updating the post using the latest preview.

      1. Thanks for the quick response Ryan !
        All my attempts to get it going are failing at the moment.

        looking forward to any update you may have.

        Thanks again.

      2. Hi jokke009Joost,

        I’ve updated the article and GitHub repo to target ASP.NET Core 3.1 using the Blazor 3.1.0-preview4.19579.2 template and fixed the issue you were experiencing.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s