In this article I will explain step by step, how to build a simple SignalR application in ASP.Net Web Forms using VB.Net.
What is SignalR?
ASP.Net SignalR is a library for ASP.NET developers that makes the process of adding real-time web functionality to applications easy.
Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available without having the client to make a new request.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
HTTP is a stateless protocol and hence it does not keep information about the clients.
Thus, SignalR makes use of following stateful protocols in order to build communication between Server and multiple clients in order to broadcast messages.
WebSocket
WebSocket is full-duplex protocol, bidirectional and stateful protocol. It keeps the connection between client and server alive until it is terminated either by client or server.
Forever Frames
Forever Frames is part of Comet Model which is a web application model where an HTTP request is held for long period which allows the browser to push data to clients without any request.
Forever Frames model is implemented using a hidden IFRAME HTML element which keeps request open for long periods.
Server Side Events (SSE)
Server Side Events (SSE) is a type of HTTP streaming i.e. HTTP response with MIME type oftext/event-stream and it sends plain text messages terminated with double newlines.
With SSE, the API is standardized and the implementation of SSE is very simple.
Long Polling
Polling means to keep on checking with server for new data over a fixed interval of time by making API calls at regular intervals.
There are following two types of Polling:
Short Polling: – Here client requests data from the server and the server will return the response if it is available and if it is not available then it returns an empty response. And this process continues.
Long Polling: – In Long polling, the client send requests to the server and if the response is not available, server will hold the request and return response only when it is available.
Step by step building a simple SignalR Web application
1. Open Visual Studio and select File from the menu and click Add, then New Project.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
2. Then from the Add a new project dialog window, select ASP.NET Web Application (.NET Framework) and click on Next.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
3. Then, give a suitable Project Name, the Location and the Framework and then click on Create.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
4. Finally, from the Create a new ASP.NET Web Application window, select Empty project template and check the Web Forms CheckBox and click on Create.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
5. Once the project is created, you will need to install the
SignalR package from
Nuget using the following command in the
Package Manager Console window.
Install-Package Microsoft.AspNet.SignalR
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
6. Once the SignalR package is successfully installed, the required script files are added in the projects Scripts Folder (Directory) as shown below.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
And, the references are added to the References folder as shown below.
Note: SignalR makes use of Microsoft Owin (
Open Web Interface for .NET) which defines an abstraction between .NET web servers and web applications.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
7. Now, add a new class to the project (Startup.vb) which will be used for configuring the SignalR in our application (as shown below).
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
8. Inside the Startup class, the namespaces for Owin are inherited and then the OwinStartup attribute is added to the namespace.
Finally, inside the Configuration method, the SignalR hubs are mapped to the project using MapSignalR method.
Imports Microsoft.Owin
Imports Owin
<Assembly: OwinStartup(GetType(SignalR_ASP.Net.Startup))>
Public Class Startup
Public Sub Configuration(ByVal app As IAppBuilder)
' Maps SignalR hubs.
app.MapSignalR()
End Sub
End Class
9. Now, add another class in the project by right clicking the project and then click on Add and then Class option from the Context Menu.
In the Add New Item window, give a suitable name i.e. Chat.vb to the class and click on Add.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
This class will handle the SignalR communication between client and server.
The class inherits Hub class and is set with HubName attribute which is used to create the connection to SignalR Hub.
You will need to create a function with two parameters message and userName i.e. SendMessage.
Inside the SendMessage function, the DisplayMessage function of Clients.All class is called, which pushes the message to all Clients connected to the hub.
Imports Microsoft.AspNet.SignalR
Imports Microsoft.AspNet.SignalR.Hubs
' Defining Hub name.
<HubName("ChatHub")>
Public Class Chat
Inherits Hub
' Send Message method.
Public Sub SendMessage(message As String, userName As String)
' Call the DisplayMessage function on all Clients.
Clients.All.DisplayMessage(message, userName)
End Sub
End Class
Finally, the class is look as shown below.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
10. Next, add a Web Form to your project and name it Default.aspx.
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
11. Inside the ASPX page, you will need to add following controls.
TextBox – For input username and message.
Button – For submitting the message.
UL – For displaying the entered message.
<table>
<tr>
<td>User Name:</td>
<td><asp:TextBox ID="txtUserName" runat="server" /></td>
</tr>
<tr>
<td>Message:</td>
<td><asp:TextBox ID="txtMessage" runat="server" /></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSend" runat="server" Text="Send" Enabled="false" /></td>
</tr>
</table>
<hr/>
<ul id="ulMessages"></ul>
12. Then, you will need to inherit JavaScript files.
1. jquery.min.js
2. jquery.signalR-2.4.3.js
3. hubs
And then, inside the SCRIPT tags, you will need to add
jQuery document ready event handler.
Inside the
jQuery document ready event handler, first the connection to the
Hub is created and then the
DisplayMessage event handler is defined.
And inside the DisplayMessage event handler, the returned message is displayed using HTML Unordered List.
Finally, the Hub is started using the start function.
Then inside the
done event handler of the Hub, the
Send button is enabled and then it is assigned with a
jQuery Click event handler.
When the Send button is clicked, the SendMessage method on the Server is called and the values of the Message and UserName TextBoxes are sent to it.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.4.3.js"></script>
<script type="text/javascript" src="signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// Creating the Hub.
var chatHub = $.connection.ChatHub;
//This function will be called by the Server.
//It will be used to push messages to Clients.
chatHub.client.DisplayMessage = function (message, username) {
// Displaying the message.
$("#ulMessages").append("<li><b>" + username + "</b>: " + message + "</li>");
};
// Starting the Hub.
$.connection.hub.start().done(function () {
//Enabling the Button.
$("[id*=btnSend]").removeAttr("disabled");
//Attaching Event handler to the Button.
$("[id*=btnSend]").click(function () {
//Sending the message to the Server.
chatHub.server.sendMessage($("[id*=txtMessage]").val(), $("[id*=txtUserName]").val());
return false;
});
});
});
</script>
Screenshot
![Step by Step simple SignalR application in ASP.Net using VB.Net]()
Downloads
