Asp.Net MVC SignalR Tutorial
What is the SignalR
It is a library that provides Server-Client communication during asynchronous operations in Web applications.The simplest example of this is the chat system. Apart from this, live match results are a good example to this. For example, when a goal is scored, everybody in the system will score the goal. So everybody changes this information instantly.
In conjunction with the “WebSockets” server running in the middle of the machine, clients are prevented from pooling the Server. SignalR occasionally acts as a layer. If the Server or Client WebSockets are not supported, it will fallback to other technologies (including polling).
When there is a change in the signal with the SignalR Server, it informs the Client or Client.
Apart from “WebSocket” and “Long Polling”, there are two more technical structures as “Forever Frame” and “Server Sent Events” to get rid of Http Stateless.
Forever Frame is an obsolete technique, so there is no need to enter this technique here.
Server Sent Events performs operations through a browser without changing the Http protocol.
Set up the Project
Firstly,we are creating one Asp.Ne MVC project.
If you do not know how to start the asp.net mvc project, go to this article.
In order to use SignalR with Asp.NET MVC 5, we need to integrate the necessary JavaScript and .DLL files into your project. You must follow the combination of “Tools> Library Package Manager> Package Manager Console” in order to add these files to the project.
The console will appear as an icon. We type “Install-Package Microsoft.AspNet.SignalR” on the console screen and press “Enter”.
|
2 |
Install-Package Microsoft.AspNet.SignalR |
We need JavaScript and .DLL files installed in the project.
Now we are adding a new SignalR Hub Class
The contents of our SignalR Hub Class class named “ChatHub.cs” will be as follows.
|
2 3 4 5 6 7 8 |
public class ChatHub : Hub { public void Send(string username, string message) { Clients.All.sendMessage(username, message); } } |
If you examine the above code block, I added the method named “Send” to indicate the program fragment that will provide the chat flow during Chat.
Now let’s add the following code to the class named Startup.cs. If we do not have a class called Startup.cs, we’ll add ourselves a new class.
|
2 3 4 5 6 7 8 9 |
public partial class Startup { public void Configuration(IAppBuilder app) { ConfigureAuth(app); app.MapSignalR(); } } |
Now all we need to do is add the Controller class and create the View file.
I am adding a Controller class named “Home (Controller) .cs” and creating the View file of the “Index” Action in it.
|
2 3 4 5 6 7 8 9 |
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } } |
- File:Views/Home/Index.cshtml
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script> <script type="text/javascript" src="~/signalr/hubs"></script> <script> $(function () { var chat = $.connection.chatHub; var $username = $('#txtUsername'); var $message = $('#txtMessage'); var $messages = $('#messages'); $message.focus(); chat.client.sendMessage = function (name, message) { $messages.append('<li><strong>' + name + '</strong>: ' + message + '</li>'); }; $.connection.hub.start().done(function () { alert("connection start"); $('#btnSendMessage').click(function () { chat.server.send($username.val(), $message.val()); $message.val('').focus(); }); }); }); </script> </head> <body> <div style="width:80px"> <label for="txtUserName">User: </label> @Html.TextBox("txtUsername") <br /> <label for="txtMessage">Message: </label> @Html.TextBox("txtMessage") <button id="btnSendMessage">Send</button> </div> <div id="messages"></div> </body> </html> |
an alert will be displayed when we start the project
Demo
As you can see, the program worked successfully
if you have question do not forget to write from the chat button next to it or from the comment
thank youu