XML FeedsIntroduction
If you haven't heard of SignalR then you have probably been living under a rock for the past year or so.
SignalR is an Async library for .NET to help build real-time, multi-user interactive web applications.
In other words, it's kind of a client-servery thing.
So what can we do with it. We can send messages to all the clients that are connected to our server for one.
Let's try this.
For this post I took the quickstart example on the SignalR wiki.
The server
First thing to do is to setup the server.
For this I created an Empty ASP.Net web Application.
Then I did the Nuget thing.
Install-Package Microsoft.AspNet.SignalR -pre
Then create a Global.asax file.
- Imports System.Web.SessionState
- Imports System.Web.Routing
- Imports Microsoft.AspNet.SignalR
- Public Class Global_asax
- Inherits System.Web.HttpApplication
- Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
- RouteTable.Routes.MapConnection(Of MyConnection)("echo", "echo/{*operation}")
- End Sub
- End Class
this will create the routes that will tell you where you have to go to get your information. As you can see the route echo will use our MyConnection class which we will create next.
- Imports Microsoft.AspNet.SignalR
- Imports System.Threading.Tasks
- Public Class MyConnection
- Inherits PersistentConnection
- Protected Overrides Function OnReceivedAsync(equest As IRequest, connectionId As String, data As String) As Task
- Return Connection.Broadcast(data)
- End Function
- End Class
This is the most basic form. Take the data you recieved and broadcast it to all clients.
Start this project and you should see something like this.
Which at least means our server has started.
Take note of the url you see in your addressbar and remember that for the next session.
The console client
The first thing to do after this is to make a consoleapplication to test if it really works.
Go to your nuget console and copy paste this in. Make sure the nuget console is in the right project first.
Install-Package -pre Microsoft.AspNet.SignalR.Client
And here is my slightly improved version of that console app.
- Imports Microsoft.AspNet.SignalR.Client
- Module Module1
- Sub Main()
- Dim connection = New Connection("http://localhost:50865/echo")
- AddHandler connection.Received, Sub(data) Console.WriteLine(data)
- connection.Start().Wait()
- Dim line As String = Nothing
- Console.WriteLine("type anything + enter to send, type exit + enter to exit.")
- While line <> "exit"
- line = Console.ReadLine()
- connection.Send(line).Wait()
- End While
- End Sub
- End Module
Make sure you use the correct url. You know, the one I told you to remember.
This will show you the incoming messages via a console.writeline using an AddHandler of the Recieved event of the connection.
And it will give you the possibility to send messages.
Build it and go to your output folder where you click on the exe file several times to get several windows open at the same time and start typing in one of them.
You can see the window I have typed in has the message twice and the other clients will have it once.
Now that was easy.
The webclient
It is just as easy to create the weblient.
Just create another Empty ASP.Net web application and create an empty index.html file in that.
Then do the nuget thing again.
And make sure it created a Scripts folder with 5 js files in it.
The important file here is jquery.signalR-1.0.0-alpha1.min.js We will need that soon.
Now copy the following code into the index.html file.
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
- <script src="Scripts/jquery.signalR-1.0.0-alpha1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- var connection = $.connection('http://localhost:50865/echo');
- connection.received(function (data) {
- $('#messages').append('<li>' + data + '</li>');
- });
- connection.start();
- $("#broadcast").click(function () {
- connection.send($('#msg').val());
- });
- });
- </script>
- <input type="text" id="msg" />
- <input type="button" id="broadcast" value="broadcast" />
- <ul id="messages">
- </ul>
- </body>
- </html>
Make sure you reference the right jquery.signalr file and that you change the url to the signalr server. You know, that url I told you to remember earlier.
Now you will get a very boring page like this.
But let's go back to our console app and start typing things in there, and see the magic happen.
And that's not all you can also do this in the webpage.
Simples.
Conclusion
SignalR is very easy to set up although the doc was wrong in some places. But nothing I couldn't figure out on my own.
Chris is awesome.
thanks is very useful ... I have tried to Vb translate this lambda expression:
LTD Social Sitings
Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.