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.

RabbitMQ_Listening_Ports

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.1.0.

Then you will need to install ASP.NET Core v3.0.0-preview5 (SDK 3.0.100-preview5-011568) and as well as the Blazor extensions. If you have any issues installing please follow the Get started with Blazor docs.

Important to note: If you are installing a Preview SDK of .NET Core 3 you will need to configure Visual Studio 2019 to use the preview SDKs. To do this open Visual Studio 2019 then:

Open Tools -> Options -> Environment -> Preview Features -> Check “Use previews of the .NET Core SDK”

Enable_Preview_Features

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

Select_Blazor_Client_Side

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:

MqttEvents.cs

MqttJsInterop.cs

Navigate to the Startup.cs file and add the following in the ConfigureServices method to make sure the Dependancy 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.

Blazor_MQTT_Chat

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

RabbitMQ_Connections

GitHub Repo

I’ve put the entire project up on my GitHub account here:
https://github.com/Icidis/Blazor.MQTT.Chat

References
https://www.eclipse.org/paho/
https://github.com/eclipse/paho.mqtt.javascript

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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