Feb 20

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

 

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: http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr.

According to www.ASP.net:

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: http://signalr.net/.

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 www.ASP.net 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
        $.connection.hub.start()
            .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
        MessageDisplay.appendTo($(itemTemplate));
        // Add to the element on the page
        itemTemplate.appendTo($(element));
    });
};

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 http://lightswitchhelpwebsite.com/Downloads.aspx

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