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.
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.
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.
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
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:
– 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: