You are here:   Blog
Register   |  Login


Feb 20

Written by: Michael Washington
2/20/2013 7:09 AM  RssIcon



The Visual Studio LightSwitch HTML Client will connect to any SignalR service, allowing you to create state of the art applications.

The Sample Application

This sample uses the SignalR chat sample application located at:

According to

SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. Examples include social applications, multiuser games, business collaboration, and news, weather, or financial update applications. These are often called real-time applications.

You can find more about SignalR at this link:


When you run the SignalR chat application, a popup asks you for your name.


You then enter your messages and click the Send button.


When you run the LightSwitch application, you enter your name and message and click the Send Message button.


SignalR keeps the chat session in sync.

The SignalR Application


The only difference between the sample application that is covered on and the version used in this sample (on the download page of this site), is that this sample contains extra code in the Global.asax file to permit cross domain communication. This is required because the LightSwitch application will be running on a different web site.


Note: The LightSwitch application, covered in the next section, assumes you have the SignalR application running at http://localhost/SignalR/.

The LightSwitch Application


We create a LightSwitch HTML Application.


We switch to File View.


We right-click on the Client project and select Manage NuGet Packages…


We search for and install the SignalR JavaScript Client library and the Json2 library (needed for compatibility with IE7).


We add references to the libraries in the default.htm page.

Note that we reference a hubs directory that does not actually exist in the SignalR application. This is a virtual directory. If the SignalR application is running in a different place you will need to update this (there is another place in the JavaScript code (covered in the next section) that you would also need to update).


We switch back to Logical View.


We add a new Screen.


We use Add Data Item to add properties.


We add four String properties to the screen and one Method.


We select the created method for the Screen.

We use the following code:

var chat;
myapp.Chat.created = function (screen) {
    // Set the Defaults
    screen.displayname = "LightSwitch User";
    screen.discussion = "";
    $(function () {
        // Declare a proxy to reference the hub.  
        chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.
        chat.client.broadcastMessage = function (name, message) {
            // Html encode display name and message.  
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div />').text(message).html();
            // Set the discussion property
            // This will cause the binding in 
            // discussion_render to fire 
            screen.discussion = '<b>' + encodedName 
                + ':</b>&nbsp;&nbsp;' + encodedMsg;
        // Set the Hub URL to the SignalR site
        $.connection.hub.url = 'http://localhost/SignalR/signalr';
        // Start the Hub
            .done(function () { 
                // enable the chat box  
                screen.findContentItem("message").isVisible = true;
            .fail(function () {
                alert("Could not Connect! - ensure EnableCrossDomain = true");


We select the Discussion Custom Control and select Edit Render Code.

We use the following code:

myapp.Chat.discussion_render = function (element, contentItem) {
    // Create a binding that will fire whenever the value 
    // of the Discussion changes
    contentItem.dataBind("value", function (newValue) {
        // Make a DIV
        var itemTemplate = $("<div></div>");
        // Create the message display
        var MessageDisplay = $("<p>" + newValue + "</p>");
        // Complete the template
        // Add to the element on the page


Finally we right-click on the sendmessage method and select the Edit Execute Code action.

We use the following code:

myapp.Chat.sendmessage_execute = function (screen) {
    // Call the Send method on the hub.  
    chat.server.send(screen.displayname, screen.message);
    // Clear text box for next comment.  
    screen.message = '';

Communicating With The LightSwitch Back-End From SignalR

Now you want to know how to communicate with the LightSwitch back-end services from the SignalR service? OData is your answer. See the articles at this link.

LightSwitch Help Website Articles

An End-To-End Visual Studio LightSwitch HTML5 Application

Full Control LightSwitch (ServerApplicationContext And Generic File Handlers And Ajax Calls)

Saving Data In The Visual Studio LightSwitch HTML Client (Including Automatic Saves)

Creating A Desktop Experience Using Wijmo Grid In LightSwitch HTML Client

Creating ASP.NET Web Forms CRUD Pages Using ServerApplicationContext

Using Promises In Visual Studio LightSwitch

Retrieving The Current User In The LightSwitch HTML Client

Writing JavaScript That Implements The Binding Pattern In Visual Studio LightSwitch

Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

Writing JavaScript In LightSwitch HTML Client Preview

Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Theming Your LightSwitch Website Using JQuery ThemeRoller

Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

LightSwitch Team HTML and JavaScript Articles

Visualizing List Data using a Map Control

Enhancing LightSwitch Controls with jQuery Mobile

Custom Controls and Data Binding in the LightSwitch HTML Client (Joe Binder)

Creating Screens with the LightSwitch HTML Client (Joe Binder)

The LightSwitch HTML Client: An Architectural Overview (Stephen Provine)

Writing JavaScript Code in LightSwitch (Joe Binder)

New LightSwitch HTML Client APIs (Stephen Provine)

A New API for LightSwitch Server Interaction: The ServerApplicationContext

Building a LightSwitch HTML Client: eBay Daily Deals (Andy Kung)

SignalR Links

Using fiddler with Signalr

Download Code

The LightSwitch project is available at

(you must have HTML Client Preview 2 or higher installed to run the code)


4 comment(s) so far...


Re: Connecting To SignalR With LightSwitch HTML Client

I think you mean "We add 2 string Properties" instead of "We add 4 string properties...".
I only see 2 anyway (plus one method and one custom control).

Good stuff. Gonna try this tomorrow hopefully.

By Matt Sampson on   2/26/2013 10:16 AM

Re: Connecting To SignalR With LightSwitch HTML Client

@Matt Sampson - You are correct! Thank you :)

By Michael Washington on   2/26/2013 10:27 AM

Re: Connecting To SignalR With LightSwitch HTML Client

Hello Michael,
i dont know if this is the right place for my Problem...

After a Long time i tried to get signalr and LS HTML to work.
But there is a Problem i cant solve...
When i try to install the Signalr (or Newtonsoft.Json) in the HTML projectvia nuget it Comes to an error:

PM> install-package Newtonsoft.Json
"Newtonsoft.Json 7.0.1" ist bereits installiert.
"Newtonsoft.Json 7.0.1" wird "Application1.HTMLClient" hinzugefügt.
install-package : Failed to add reference to 'Newtonsoft.Json'.
In Zeile:1 Zeichen:1
+ install-package Newtonsoft.Json
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (:) [Install-Package], InvalidOperationException
+ FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

I cant find a hint what happens her. It happens on a freshly installed Machine with WIN 7 64 Pro and VS 2013.5.

Can u help me with that?

Kind Regards

PS: When i try to install Newtonsoft.json in the Server Project it works. No Problem but the wrong proejct.

By DarkSideNRW on   8/2/2015 2:32 AM

Re: Connecting To SignalR With LightSwitch HTML Client

@DarkSideNRW - Please use the official LightSwitch forums for assistance at:

By Michael Washington on   8/2/2015 2:55 AM
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation