Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

SignalR-Selecting which online user,logged in or not,to send message to.How to practical guide.

Source Code is at the end of this article, on Github.

One of the reasons that I like Signalr is its ability to identify users by simply them, opening your web page. I would also highly recommend using it for Push Notifications.

Unlike web services, it allows two different objects, residing on two different machines, and in two different applications, to talk to each other.

There are many complex applications for SignalR like scaling it on your own local server, or self host the HUB, or using it as a background worker behind the scenes.

Sometimes, SignalR looks to me as an API that does the mapping between your client and server side functions.But that is just me, no?

On the other hand, if NuGet has close to five million downloads of SignalR, as shown in the picture below, and this is on June 28,2018, then one must consider this technology when the need arises to work with Real Time Data.There is no need to reinvent the wheel, in my opinion.

But let’s start from simple things, once we are able to do that we will be able to jump to the next step.

What we are going to do is exactly the following:

-Create a web page for everybody to be able to visit it. Also, the user will have the option to log in with Google, in order to identify him or her. This option is optional in SignalR, no obligation to identify oneself at all, because SignalR knows you without the need to know your name.

What I mean, in simple words, is that Admin, in our example, can send anonymous user a message, as well as authenticated user, with his or her name. For SignalR it does not matter, but for human logic, it matters. Let’s consider a case where small number of people are on the network, logged in to the site, and Admin wants to reach and send a message to particular person, then of-course, he needs to know other person’s name, that’s all !

To do this, and to give the user an option to identify himself or herself, we are going to use google sign in button:

When user clicks on this button, he is authenticated with google, and we get the following information from him, as described by Google itself:

As you can see form the code, and we will use it, that after a user signs in with google, provided of-course that he has a google account, in return the admin, or the web page gets such info as Full Name, Given Name, Family Name, and Email. All this info is provided from Google. We can use this info, for convenience of both parties, and trustworthiness of both parties, the website, and the users as well, to store their information in our SQL database table below, and do the MAPPING.

Please replace this client id, with your own, when doing google sign in.

Mapping  will be done between user’s name, above, and SignalR ConnectionID ! Because when SignalR will want to send message to particular ConnectionID, we can refer in our message the user’s actual name that he or she has provided.

SignalR gives you freedom in this situation. It is nice.

Important note to remember, when testing on Firefox, everything works fine except that Firefox takes longer to close connection once the user closes browser or refreshes the page, so the OnDisconnected SignalR method will take a little bit to be invoked. On Chrome it is fast.

Let’s start by creating SQL table that will hold our connectionIDs for each new connection to our HUB, and user’s information, if he or she wants to identify himself or herself, no obligation whatsoever.First create database MySignalRUsers, then create the following table below:

Now for the application logic, let’s start from the server or SignalR server, that will accept all connections, client’s and Admin’s on http port 8080, pick any unused port, it does not matter. We will make a console app, as described in SignalR examples on their site, but tweak it a bit. We will add two new methods:

public override Task OnConnected()

and

public override Task OnDisconnected

In OnConnected we will get the connectionID of new user, and insert it in our database, and later update it with Mapping information for each user if he or she decides to log in  and authenticate. And in OnDisconnected we will remove the whole row for a user that closed browser and ended the session, or disconnected.

The code below is Program.cs file, with it’s starting Main method, for console apps:

Now for the code above, we can build it in release mode, take the executable and put it on remote machine and server. It does not need to be localhost:8080.But if we do that, we will need to change the endpoint to match remote server’s endpoint.

Now for the client part, we will create a standard asp.net web application, with two pages: Default.aspx which will be for all users of our website, and Admin.aspx which will be only for administrator who will ping or send messages selectively to all current online users.

The code for Default.aspx and Default.aspx.cs is below:

And the server side code for Default.aspx, which is Default.aspx.cs

In the code above, we marked BindDataTable as WebMethod because we will call it from front end page with Ajax call and POST, in order to add user Mapping for each connection ID and bind logically which connection ID is for which User:

url:'’,

Now the Admin page or Admin.aspx, which will be only for Administrators:

And of-course the code behind file for Admin.aspx:

In the code above, we only load all currently connected users and bind them to our multi drop down list.

To test this, start SignalR server, then launch your website, the default page will look as below:

The server, will look as picture below, with already several connections happened or happening:

Now open the Admin page or click on the link “Admin Page” in a new tab or new browser window:

The first multi drop down holds connection IDs and their names in case one Signed In with “Sign In With Google” button. If you refresh the page it will update all the connection IDs with their details respectively. For example if you take a careful look at the picture above, the second ID has no name. This is because this ID is for the Admin page actually, since Admin page also initiated SignalR connection.

You can play with it depending on your needs of-course.

Now, while on this page, select any ID, except the Admin’s ID, write some text in text box, and hit Send. Now switch to client Default.aspx window, and you should see the picture below. with Notification popping up on client side with the text that we sent:

In Summary, we have implemented a solution where Administrator of a website can ping or send messaged to currently live logged in or not logged in users. The logging in is performed with Google Sign In Button, which , to implement, you first need to have google account and add new project in Developer’s Console, then get client ID and secret to use, as shown in the cod above.

The code for the server part of this project is on GitHub:

https://github.com/thoughtsonprogramming/SRServer

Client side part is also on GitHub:

https://github.com/thoughtsonprogramming/WebApplication2



This post first appeared on Thoughts On Programming, please read the originial post: here

Share the post

SignalR-Selecting which online user,logged in or not,to send message to.How to practical guide.

×

Subscribe to Thoughts On Programming

Get updates delivered right to your inbox!

Thank you for your subscription

×