Lightswitch SignalR in vb.net

So lately I have been trying to get SignalR to work with my Lightswitch App (vb.net) so that I could use the Pixata Toast message to notify users when certain data has been added/deleted etc.

So after a lot of forums, googling and trial & error I got it working. So here is the steps to get it working and a sample project for download.

PLEASE NOTE THAT I AM USING VISUAL STUDIO 2013 FOR THIS, BUT THE TUTORIAL SHOULD BE WORKING FOR 2012 & 2010.

Here is the steps we are going to go through:

1. Create LS Application & Tables

2. Create LS Customer Add & List Screen

3. Add SignalR Server Components & Client

4. Add SignalR Startup.vb & ContactHub.vb

5. Add Pixata Custom Controls

6. Add Code to LS table events

7. Add code to LS Client

8. Test the App

1. Create LS Application & Tables

• Open Visual Studio, Create a new Lightswitch Desktop Application (VB.net) and name it SignalRTest.
• Click on 'Create New Table', and name it tbl_Customer
• Add the following fields: CustomerName (String | Required) ; Phone (Phone Number | Not Required) ; Email (Email Address | Not Required). It should look something like this:

• Close the Table screen.
• Thats it for this part. Now we are going to add the List & Add Screen for the Customer Table.

2. Create LS Customer Add & List Screen

• In the LS Client Directory Tree right-click 'Screen', select 'Add Screen', choose the 'New Data Screen' type, name it "Customers_Add" and select 'tbl_Customer' as the screen data. Click OK.

• Our Add screen is created. So save and close the screen designer.
• Again, in the LS Client Directory Tree right-click 'Screen', select 'Add Screen', but this time choose 'Search Data' as the type, name it "Customers_List", and set the screen data to 'tbl_Customer'.

• Save the screen, and close the screen designer.
• Now we have the screen we need.
• Next we are goint to add the SignalR components.

3. Add SignalR Server Components & Client

So now we get to the part where we are going to start using SignalR, but first we need to add all the necessary components.

• First, right-click SignalRTest.Server, and select 'Manage NuGet Packages'.
• If you dont see this option please download and install the package manager for Visual Studio 2013 from here: Package Download & Install
• In the Package Manager window search for SignalR.
• The results will display a couple of packages but we are only interested in the 'MICROSOFT ASP.NET SIGNALR' package. Highlight it and click install. Follow the prompts and let it finish the installation, and close the package manager and the readme.txt that has opened up.
• Thats it for the server. Now on to the client.
• This time, right-click 'SignalR.DesktopClient', select 'Manage NuGet Packages'.
• Again search for SignalR, but this time select the 'MICROSOFT ASP.NET SIGNALR .NET CLIENT' package and install. Follow the promtps. After installation close the package manager and any other screens that might be open.
• So now we have our Table, Screens and SignalR compoents. On to some coding.

4. Add SignalR Startup.vb & ContactHub.vb

We are going to add 2 vb.net class files so that we can use SignalR in our app.

• Right-click SignalRTest.Server, Add -> Class..., name it "Startup.vb" and click 'Add'.
• Copy and paste the code below into the 'Startup.vb' class.

'--------------------------------------------------------------------------------------

Imports Microsoft.Owin

Imports Owin

Imports SignalRTest

<Assembly: OwinStartup(GetType(SignalRTest.Startup))> 

Namespace SignalRTest

    Public Class Startup

        Public Sub Configuration(app As IAppBuilder)

            app.MapSignalR()

        End Sub

    End Class

End Namespace

'--------------------------------------------------------------------------------------

• Save & close the class file.
• Create yet another class file but this time name it "ContactHub.vb"
• Copy and paste the code below into your 'ContactHub.vb' class file.

'--------------------------------------------------------------------------------------

Imports Microsoft.AspNet.SignalR

Namespace LightSwitchApplication

    Public Class ContactHub

        Inherits Hub

        Public Sub Hello(message As String)

            Clients.All.GlobalMessage(message)

        End Sub

    End Class

End Namespace

'--------------------------------------------------------------------------------------

• Now we have what we need to send/receive messages to all connected clients and the server.
• Next we are goint to add the Pixata Custom Controls so that we can use the Toast message function. (Those of you who dont know what a toast message is, its that small notification in the corner that pops up when say you receive a new email in outlook)
• Save & Close any open screens.

5. Add Pixata Custom Controls

Lets add the Pixata Custom Controls to our Application.

• In Visual Studio click 'Tools' and select 'Extensions & Updates'
• Click 'Online' in the left-hand side navbar.
• Then search for "Pixata".
• You should get only one result, the "Pixata custom controls for Lightswitch".
• Install the package.
• Then close all screens.

Thats it for pixata custom controls. Now we can start sending messages and have them popup in the client screens. But first we need to add some code to our Table events and Client screens.

6. Setup Client Connection to Hub & Show Pixata Toast

First we need to establish a conneciton to our hub, we add the following code in the 'Application.vb' class file inside the 'Public Class Application'. (Located under SignalRTest.DesktopClient/UserCode)

IF YOU DONT SEE THE APPLICATION.VB CLASS FILE UNDER THAT LOCATION, OPEN THE CUSTOMER_ADD SCREEN, CLICK ON THE 'WRITE CODE' BUTTON AND SELECT 'CUSTOMER_ADD_CANRUN'. THIS SHOULD GENERATE THE APPLICATION.VB FILE, AND YOU SHOULD BE ABLE TO SEE IT UNDER THE LOCATION MENTIONED.

'--------------------------------------------------------------------------------------
Private Sub Application_Initialize()

            ' Connect to ContactHub
            Dim connection = New HubConnection("http://localhost:1315/")
            Dim HubConnection As IHubProxy = connection.CreateHubProxy("ContactHub")

            ' ContactHub Messages
            HubConnection.On(Of String)("GlobalMessage", Sub(message) PixataToastHelper.ShowToast("Data Added", message, PixataToastHelper.PixataToastStyles.Alert, 10000))

            ' Start Connection
            connection.Start().Wait()

        End Sub
'--------------------------------------------------------------------------------------

Remember to add the following imports at the very top of the 'Application.vb' class.

'--------------------------------------------------------------------------------------
Imports PixataCustomControls.Presentation.Controls
Imports System.Threading
Imports Microsoft.LightSwitch.Threading
Imports Microsoft.AspNet.SignalR.Client.Hubs
Imports Microsoft.AspNet.SignalR.Client
'--------------------------------------------------------------------------------------

In the code above we also made a Pixata Toast message that will fire when we trigger the hub that will be displayed on all clients.
Also you will see my hubconnection url uses port 1315, but you will have to change it to whatever you are using. If you are using it on a development machine you can see the port as follows:

7. Add Table event message

Ok so now we need to send a message to try out our new toast message and SignalR compoents.
So in the 'tbl_Customer' table's Inserted event put the following code:

'--------------------------------------------------------------------------------------
Dim myHub = GlobalHost.ConnectionManager.GetHubContext(Of ContactHub)()
            Dim result = myHub.Clients.All.GlobalMessage("New customer *" & entity.CustomerName & "* has been added by " & entity.CreatedBy)

'--------------------------------------------------------------------------------------

And remember to import the following:
'--------------------------------------------------------------------------------------
Imports Microsoft.AspNet.SignalR
'--------------------------------------------------------------------------------------

8. Test the App

Run your newly created application, add a new customer and save.
When done saving you should see a little toast messag epop up notifying you of the newly created record.

-----------------------------------------------------------------------------------

And that is it. SignalR working under vb.net & LS Desktop Client.

You can download the sample here.