Blash: Twitter Dashboard Using Blazor Wasm, Web API, SignalR & Twitter API (Part 1)

Each dashboard has the ability to return tweets based on a different search query.

The Blazor WebAssembly application connects to an ASP.NET Core Web API, through HTTP requests and SignalR.

SignalR allows a two-way communication between the ASP.NET Core Web API and Blazor WebAssembly application. As a result, the activities that happen on one instance of a dashboard can be mirrored on another.

Inside the ASP.NET Core Web API, there is a background task that connects to a stream on the Twitter API.

When a tweet is received from that stream, it sends it to the ASP.NET Core Web API, which in-turn sends it to all the users connected via the Blazor WebAssembly application through SignalR.

Now that we have a brief overview of how Blash works, it's time to demonstrate how it can be used.

How To Use Blash

The Blash source code is available on our code examples section.

A Twitter Developer account is needed to be able to use Blash. When Twitter has approved the developer account, a Twitter app can be set up.

The Twitter app will give the client ID and secret. The client ID and secret needs to be added to the configuration in-order to get a successful connection with the Twitter API.

Once that's done, we need to start both the ASP.NET Core Web API and Blazor WebAssembly applications in Visual Studio.

It's now time to get started!

Creating a New Dashboard

Dashboards allows us to show tweets based on a particular search query.

This could be based on a particular search query. Or, we might want to get tweets from a certain author.

To get real-time tweets based on a certain search query, click on New Dashboard. A modal pops up and this allows us to put our search query in.

Once we have pressed the Add New Dashboard button, it goes away and gets all the tweets related to our search query.

This is then returned to the page.

If we have put in a viral search term (such as "gamestop"), the dashboard constantly shows the most recent tweets.

The use of SignalR means that this happens in real-time without having to refresh the page.

In-order to show tweets from a particular author, we can prefix from: when creating a dashboard.

For instance, if we want to get all the tweets from the @RoundTheCode twitter account, we add from: RoundTheCode when creating a dashboard.

This will return only the tweets from that particular author.

Of course, we have access to the RoundTheCode twitter account, and we did a test to see how long it takes to receive a real-time tweet on Blash once it's been posted.

It took around 5-10 seconds, so very quick!

The Behaviour of SignalR

SignalR has been implemented to mirror the behaviour on all instances.

For example, if we had an instance of Blash on one machine, and opened it up on another machine, any activity would be mirrored across both machines.

So, if a new dashboard is created, deleted, or real-time tweets are received on one instance, have a look at the other instance and we will find it's been mirrored!

Demonstration of Blash

Watch our video where we demonstrate how to use Blash.

We will talk you through the steps on how to create a dashboard, either by search query or author.

In-addition, we will send out a real tweet and test how long it takes to be displayed on our dashboard.

Finally, we will show the power of SignalR, and how it can be used to mirror the same behaviour across multiple instances.

The Code

Inside our code examples section, we demonstrate the different applications and class libraries that Blash relies on.

Coming up in part 2, we will do a video demonstration that gives it a bit more detail on each application and class library, in-terms of functionality and purpose.

We will also give you a preview of what happens in the background when the ASP.NET Core Web API connects to the Twitter API in the background.

Finally, we will demonstrate how to set up a Twitter app through a Twitter developer account for the all important client ID and secret.