You are here:   Blog
Register   |  Login

 

Feb 20

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

image

 

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/.

image7

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

image10

You then enter your messages and click the Send button.

image13

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

image17

SignalR keeps the chat session in sync.

The SignalR Application

image211

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.

image51

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

The LightSwitch Application

image9

We create a LightSwitch HTML Application.

image12

We switch to File View.

image171

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

image20

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

image26

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).

image29

We switch back to Logical View.

image32

We add a new Screen.

image40

We use Add Data Item to add properties.

image35

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

image43

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");
            });
    });
};

image47

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));
    });
};

image53

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)

Tags:
Categories:

2 comment(s) so far...


Gravatar

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
Gravatar

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

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation