Client Overview

Developed web application to search, claim residential property addresses, and create a network with neighbors.

Problem

The client wanted to have a web-based solution to search for a home address, claim it and create their own network in the neighborhood with other users after verification and registering into the app. Users were supposed to have connected with each other via one-to-one chat and needed to receive updates through notifications in their application along with other features.

Two-way real-time communication is required in this web-based application to connect with the users around in the network. Along with chat, push notifications are required to broadcast information like emails, digital flyers, alerts to all the application users instantly. As communication between the users is the key feature of the app, we wanted to have a secure and robust system to solve this problem.

We can briefly understand the required features as below:

N2N Chat: We needed to develop an instant messaging solution to enable users to seamlessly communicate with each other. The challenge was to build a platform that receives and sends real-time messages to online and offline users who are connected via the application. Neighbors (connected users) would have able to see their online/offline status and connect with them simultaneously.

Push Notification and automatic updates: As the application users are required to be notified for new updates received in the applications through admin and other neighbors around, receiving notifications for new mails, digital flyers, alerts instantly in the application without refreshing the application or reloading the web page also needed to be implemented in the application.

Solution

To meet this need, ASP.NET has a technology called SignalR.

SignalR is an open-source web library. It is used for creating real-time communications in web applications. With SignalR we can make server content available to connected clients instantly as it becomes available instead of the server waiting for a client to request new data. SignalR is an excellent choice for handling “real-time” web functionality through ASP.NET. A common example of its use is in the development of chats where the user needs to have their message sent immediately the same way they receive it. While chat is common, it’s not the only example of using SignalR. Monitoring apps, collaborative forms, and real-time games are also great to use cases.

 

In SignalR, there are two distinct models for implementing client-server communications:

• Persistent Connections are the base class with an API for exposing a SignalR service over HTTP. They are useful when developers need direct access to low-level communication technology. Persistent connections use a similar model to that of WCF (Windows Communication Foundation).
• Hubs are built on top of Persistent Connections and abstract most of the underlying complexity in order to allow developers to call methods both on the client and the server without worrying about the implementation details. One great benefit of using Hubs is that you get model binding and serialization straight out of the box.

Technical Specifications

Below are the required high-level steps used in the implementation of SignalR in the project:

 

1. To install signalR library and scripts in your project run this command “Install-Package Microsoft.AspNet.SignalR.Core -Version 2.4.3” in Visual Studio Package Manager Console.

 

2. Enable SQL broker from Database using this command “ALTER DATABASE DatabaseName SET ENABLE_broker WITH ROLLBACK IMMEDIATE”.

SQL Service Broker (SSB) is a powerful asynchronous queuing and messaging infrastructure. It provides tools to handle a wide variety of tasks, from simple workload queuing all the way to advanced message routing between remote servers.

 

3. Configure SignalR in our project, we need to add signalR service to ConfigureService method of startup class.

public void ConfigureServices(IServiceCollection services)

{

services.AddSignalR();

}

 

4. We need to configure the route to signalR hubs using the UseSignalR method defined in the configure method of the startup class.

app.UseSignalR(routes =>

{

routes.MapHub<ChatHub>(“/chatHub”);

});

 

5. To send the message to particular clients. Users can receive/send messages:

public override Task OnConnectedAsync()

{

var connectionId = Context.ConnectionId;

Clients.client(connectionId).SendAsync(“MethodName”, connectionId);

return base.OnConnectedAsync();

}

 

6. Create a UI for the message box from scratch, where users can type and send or receive messages from other users.

 

7. Add SignalR js library at Message box page.

<script src=”~/Scripts/jquery.signalR-2.3.0.min.js”></script>

<script src=”~/signalr/hubs” type=”text/javascript”></script>

<script type=”text/javascript”>

$(function () {

// Proxy created on the fly

var users= $.connection.userHub;

// Declare a function on the job hub so the server can invoke it

users.client.displayUsers = function () {

getData();

};

// Start the connection

$.connection.hub.start();

getData();

});

</script>

 

When the user types any message in the text box and hits the enter key or clicks send button, a message will save in the database and after that, it will push to the related user (recipient). In this condition, we are sending messages to registered users.

If a user is online he/she will get a message instantly. Otherwise, messages will be received whenever a user login to the application. Below method used in SignalR to send one to one chat messages:

Clients.client(connectionId).SendAsync(“MethodName”, connectionId);

 

8. We used signalR technology for push notifications as well. Neighbors can send mails to other users and the admin can push mails/alerts/digital flyers to the application users. To send a real-time notification to users SignalR provides the method below which is also used in our application.

Clients.All.SendAsync(“method”, message);

 

To wrap up, above we discussed how we simplified the problem using SignalR. When you need real-time web functionality, SignalR is an easy and flexible solution to enable bidirectional communication (and particularly server-client push notifications). It includes an ASP.NET Site server library and a JavaScript client library to make it easier to manage client-server connections and push content updates to clients from SignalR Hub.

You can add the SignalR library to an existing ASP.NET application to gain real-time functionality. It also enables completely new types of applications that require high-frequency updates from the server, e.g. real-time gaming, application monitoring, etc.

Looking to add real-time web functionalities to your website or application? Let us help you give the right direction.