New toy in the house: BealgeBone Black

Recently I purchased a new toy known as BeagleBone Black, a tiny computer worth only $45 which has Linux operating system on it just like Raspberry Pi.  This one has Linux Angstrom distribution on it but you can load Ubuntu on it if you want. BeagleBone was around for a long time and its earlier version BealgeBoard was little bit expensive but $45 is just the right price for me.

And by tiny I mean it is really very small just check out in this image in perspective below.

I also have an Arduino UNO R3 but I haven’t played with it much.  Arduino doesn’t have an operating system on it.  It is just a microcontroller but that is not the reason I haven’t played with it much.

Raspberry Pi is really very popular because of its low cost $25 and some of the cool things people are able to do with it.  For starters Raspberry Pi is really very good and for a lot of reasons. Few things I liked about Raspberry Pi compared to BeagleBone Black are: one you have two usb ports which you can use to connect a keyboard and a mouse, second to connect to an external monitor like your TV you have HDMI output and so you can directly plug into your TV without requiring any external adapter (assuming you have an HDMI cable) and third some of the boards that are available for Raspberry PI. In BeagleBone Black you only have one USB port so you will need a USB hub to plug in a keyboard and a mouse, plus it uses a micro HDMI port so you use some kind of adapter again to hook up to your TV or just buy one of these.  For a full comparison you look this post and this comparing Raspberry Pi, BealgeBone Black and Arduino.

BeagleBone is rock solid in terms of no of I/Os (65) you have available. So if you are interested in robotics applications which require lots of I/O pins then BeagleBone Black is the board you want. And that was my primary motivation to buy BeagleBone Black. Check out expansion connectors section in the image below.

It has Arduino style programming library, and by that I mean you can turn a particular pin High and Low just like you would do in Arduino but in JavaScript.  Did I just said JavaScript?  Yes you heard it right, it does all this magic using JavaScript.  So BeagleBone Black has python, node.js (Ah! I like it) and Cloud9 IDE along with Angstrom Linux distribution.  You can program using either python, node.js or plain C. I chose node.js.  There is BoneScript, a JavaScript file which does all the magic to turn a pin High or Low on BeagleBone Black. I will go into basics of programming BealgeBone in next couple of blog posts where I show you my little experiment with BealgeBone Black.  BBB uses 5V power supply and you can use USB cable to power it.  If you are interfacing multiple sensors then I recommend using an external power supply.  Typical voltage on the I/O pins of BealgeBone has 3.3 volts.  Once you plug BBB into your computer then getting started is really easy.  This link has all the details but just visit http://192.168.7.2 and you are in business in your browser (don’t use IE).

I had a spare old Sony Vaio sitting around which I wasn't using anymore so I loaded Ubuntu on it to play with BBB.  It is really very cool once you figure out the basics.   Below are few things I learned on the way to playing with Linux and electronics.

1. Electronics: Research first about what you are buying.  There are components that you will end up buying that you might not need or they might not be of different specifications. Ask somebody on the forums and there are really awesome people hanging out in these forums who will help you with it.

2. Don't update operating system on BeagleBone Black before checking what it does for you.  I tried updating OS and it blew up on me and I had to reload using a 4GB microSD card.  So another tip is keep one microSD card handy.  You will need it.

3. Learn some quick Linux OS commands to work in the terminal.  Being able to navigate into the OS will help you are lot.

4. Create a plan, sketch it out and make a list of components you will be needing to complete a project.  So this one I learned it the hard way. If you don't make a list of components and you start playing around and when you think you will need something then you will end up making multiple trips to RadioShack paying more or end up waiting for components to arrive in the mail.  And waiting for stuff is really annoying because you are so excited to hack into different project but you can't until it comes.

5. Buying the board is not the only thing you will do in an electronics project.  You will need a soldering iron, wires, resistors, transistors, de-soldering wire, multimeter, capacitors, leds, batteries, breadboard, boards and sensors.  So have some budget and buy everything at once so you don't end up wasting time and money buying them separately.

6. Safety: This has to be number one thing but please be careful with electronics and understand what you are doing. If you are young then have your parents by your side or someone who knows what you are doing.     Be safe and if you aren't not sure then please ask.

Electronics is a lot fun and don't get intimidated by it.  I have a bachelors degree in electronics and communication but trust me I am just like any new person trying to learn it first time.  I didn't liked electronics initially and was turned away by it because the way I was introduced to some of the concepts in electronics by the education system.  However, six years later I am digging deeper into the open web and YouTube to discover my lost passion into electronics once again. So don't give up.  Play with it.  If you get stuck then just ask somebody in person or on online forums, read online, watch YouTube videos and play again.

Visual Studio Trick - Convert Find Box into Command Box

In this blog post, I am going to show you how you can easily accomplish certain tasks within Visual Studio using Visual Studio commands from the Find Box that is provided at the top[see image below]. The Find Box is not enabled by default to appear in the toolbar, as a result few developers know about it.  The trick is that Find Box can be converted into a command box when you place a greater than < symbol in it and execute Visual Studio commands.  When I found about this I was totally psyched.  To get started lets see if you have the Find Box in the toolbar above like me.  See the image below.

If not then here is how you can enable it.  By default this will not be enabled in a fresh install of visual studio.  First click on the Add or Remove Buttons option to enable it.  Then below the Find in Files option there is just a Find option as highlighted in red box.  Click in front of it to enable it.

Once you have enabled it you can use Ctrl+D to quickly search something.  Pretty cool right but we are not there just yet. In the Find Box put a > character then start typing like File.Open or Edit.Replace something like that.  Did you just see what happened!!!

Find Box has now become a command box.  It shows all Visual Studio commands which you can use to do certain tasks without leaving your keyboard.  You might be tempted to ask me, "So Mitul is there a shortcut to insert > sign into the Find [or sorry command] Box so I can directly start typing Visual Studio commands?".  Yes there is.  Ctrl + / and it will insert > sign in the Find Box to convert it into a command box.

"So how is this useful?" and "How is this going to save me time?"

In this case you have to constantly think which tasks you do most frequently with mouse in visual studio and you can perhaps find a command for that action.  Then you can take advantage of this feature to save time.  There are predefined aliases for some of these commands.

So one of my favorite uses of command box is to open up Pending Changes window and TFS SourceControl Explorer window.  Go ahead and try to find TFS SourceControl Explorer window from the Menu and see how much time it takes.  Or even from the Team Explorer because I don’t have it always opened in visual studio.

But Ctrl + / and type View.TfsSourceExplorer and hit enter. Its opens up TFS SourceControl Explorer window for you. Again for the PendingChanges window use TFSDynamicSlientCheckin.  Opens up Pending Changes and there you are.  It is very quick and easy.  It depends on person to person how they might find this feature useful.

Pretty cool feature and yet unexplored by many Visual Studio developers out there. Check it out yourself and enjoy the productivity.  And please don't forget to share how you use this command feature in Visual Studio in the comments below.

How to do Ajax in Asp.Net MVC4 Application?

In this post, I am going to show you how to do Ajax in an Asp.net MVC4 Application using C#.  It is very easy to create a very simple Ajax demo up and running.  Here are few things you need in order to get basic Ajax demo running in your application.  The complete source code for this application is available on my gitHub account.

0. Create basic Asp.net MVC4 application using VS2012
1. You need an Ajax.ActionLink in one of your views
2. Public Method that will return a Partial View
3. PartialView with some content

Open Index.cshtml and remove all the content and paste Ajax.ActionLink as below.  Ajax.ActionLink has 12 overloads (msdn link) to do Ajax and all of them are very self explanatory.  In the code below, I am passing in the text to display as link text, the controller action to hit, and Ajax Options that’s it. 
We need a div whose content we wish to replace or the target location where we wish to replace the contents.
Then we need a public method inside our home controller that will return a partial view with some data in it.  You can pass data to the Partial View using a ViewBag.  As in our case I am using ViewBag.Tiffin variable to hold that data and retrieve inside Partial View. Next in our Partial View we retrieve it.
Hit F5 and click on the link to see what happens.  All of the text will be replaced if you created a default Asp.net MVC4 Internet application.  Because by default Asp.net Template for MVC4 Internet Application doesn’t load the Jquery Validation bundle to do Unobtrusive JavaScript.  Include this line @Scripts.Render("~/bundles/jqueryval") in your _layout.cshtml page and you are all good to go.  Run again and you should see the output.

You might be curious to ask why are you using a POST instead of GET inside Ajax.ActionLink? Because depending on which browser you are running it will cache the response and will not trigger an ajax request every time you wish to do Ajax.  To overcome this problem you can disable cache for just that method use GET in Ajax.ActionLink. 

I have recorded a screencast video to show upto this point. Check it out and if you have any feedback let me know.
Now moving on to some more stuff like how can we put animated gifs showing that something is running.  That is actually even more easy.  For this purpose we are going to use few more attributes of AjaxOptions object.  This object has some events like OnCompleted, OnBegin, OnSuccess, OnFailure and we will assign javascript functions to them.  So when we trigger a ajax request then OnBegin function we will load the gif and OnCompleted we will hide the image. 
What about passing Parameters? For this we will use another overloaded method of Ajax.ActionLink which will pass routeparameters to our public method.  We are going to change our public method and Ajax.ActionLink as shown in the code below.
Ok I get it but what about some HtmlAttributes?  Actually there is very easy you use another overload of Ajax.ActionLink and you can pass in an anonymous object with values to it.  There are different options you can consider for HtmlAttributes. And also what about jQuery mobile data-role attribtues? For jQuery data attributes you will have to use _ instead of - as shown below.  Alright but now I want to implement Async and Await into this mix how can I do that?  Hmmm. For this we will have to modify our public method inside our controller to return Task of type PartialViewResult.  That is pretty easy too.
Oh! But I am told to just use jQuery to do Ajax then you have be a little bit careful. Please check your jQuery version. If you have jQuery 1.7 then Ajax is done differently and jQuery 1.9 does little bit differently. I am using 1.9 for this demo. There is a difference where you detect start and success events. You attach these events to the document object (see upgrade guide).


What-If Error
Why Ajax is still not working out for me? Here are some very common issues which I ran into while learning Ajax in MVC4 application. 

1. Always debug using Internet Explorer.  If you run your application then Chrome will show you red error count only if you inspect the page but will happily show you the page.  Compare this to Internet Explorer it will give you Microsoft JavaScript Runtime Error.  Doing a quick StackOverflow search will give you most of the common problems’ solutions.

2. Check if you have loaded Jquery Validation bundle

3. Check if you are even loading jQuery or not. Actually this should be number 0.

4. Check if you are loading multiple versions of Jquery or validation, if yes then deletes older ones.

5. Open up fiddler to see what is going on. If I am working with web then I have fiddler open by default most of the times. And it has affected my debugging skills.

6. Put breakpoints as this is very basic debugging skill.

7. Try deleting packages for jQuery and delete related entry in packages.config and again install those packages using Nuget.

8.  The complete source code for this application and demo is at gitHub.  Check this link

Visual Studio Trick - Block Edit Code

I love Visual Studio 2012 and the improvements made in it.  You can check out my post on Visual Studio 2012 goes search first here.  However there are some features which are hidden and aren't much talked about.  And these features were there even before Visual Studio 2012.  My favorite one it how you can block edit your code using this trick.  I have always been a fan of this trick.  It has saved me a lot of typing.  Find and Replace is not always useful and quick.  I have recorded my first video demonstrating this trick which is embedded below.  

This trick can be very helpful when you have to edit a block of text at once.  You can select a block of text by pressing the Alt key and select a piece of code with your mouse. Once you have selected the text you can type or delete that piece of text.  You can also use your keyboard to select a block of code and edit.  Just press Shift + Alt + Down Arrow to select number of lines and keep Shift + Alt pressed and then press Right Arrow to select the number of characters in those lines and then simply edit.  Check out this video below.

Web Deploy Check list for deploying website to IIS7 from Visual Studio and TFS

Web Deploy is one of the mechanisms to publish websites to IIS from Visual Studio.  You can utilize this mechanism to publish from Visual Studio, TFS or manually if you have existing website packaged as a zip file.  If you haven’t checked this gem of resources (Vishal Joshi's Blog) on web deploying and publishing then please do yourself a favor.  In this post I am going to talk about a checklist to make sure before you wish to publish site to IIS.  Here is the list:

• Installed the latest Web Deploy on windows server (Check this IIS website).  
• Web Management Service is started and running
• Web Deployment Agent Service started and running
• Created a website inside IIS and created application pool for it  
• Given the user IIS Manager Permissions at the site level inside IIS
• Configured website for Web Deploy publishing
• Saved Web publish settings on a local desktop
• Import Web publish settings from the local desktop from Visual Studio publish dialog
• Publish url is over Https 
• Checked connectivity to the site from the Visual Studio publish dialog 

Now before you jump on to the TFS side of things to publish, please make sure that you have done following things:

• Team Foundation Server Build service account is added to IIS Manager Permission section for the website inside IIS
• Able to publish successfully from visual studio using web deploy?
• Check the MSBuild parameters for web deploy (I have provided what works for me below).

If you have some more checklist you have formed over the years then let me know I will add to this list.

What-If-Error
When you click publish from visual studio you will have to select a publish method and at that point select Web Deploy.  You have the option to import the profile you have created from that publish dialog.  This will pre-populate all the details.  You will have to provide the user name and password for the user who has the permission in IIS Manager Permissions as described in earlier.  At this point if you see any errors then this is a nice website where all the errors are listed.  I think you will see these errors only if you do some mistake while manually typing out the details in the publish dialog.  I haven’t found any issues if you import site details through import mechanism.

Here are TFS MSBuild parameters I use to publish a website from TFS to IIS7.

/p:DeployOnBuild=True
/p:DeployTarget=MsDeployPublish
/p:CreatePackageOnPublish=True
/p:MSDeployPublishMethod=WMSVC
/p:MSDeployServiceUrl=https://ServerName:8172/MSDeploy.axd /p:DeployIisAppPath="NameofWebsiteOnIISServer"
/p:AllowUntrustedCertificate=True
/p:UserName="domain\serviceaccount"
/p:Password="AwesomeSecurePassword"

If you are still unsuccessful in publishing the website from TFS Build then it could be that your TFS Build server is 2010 and you are using Visual Studio 2012 and it might be missing some binaries.  If you install Visual Studio 2012 on the build server then this issue could be resolved.

SignalR in Web, WPF, Console and Windows Services App in VB

Update: I have updated this post to reflect the latest SignalR (1.0.1) release.  This is some testing I did with SignalR in VB for different kinds of .Net projects like Windows Service, console and WPF application.  This post has different sections and each section has its own .Net solution so you can run them individually.  All the sourcecode for this blog post is available on my github page.  There are two SignalR Owin Host applications, a Console application and a Windows Services Application written in Vb.NET and it will be consumed by various .NET client applications such as Console Application, Web Application using Javascript, WPF Application using VB.Net.

SignalR Owin Hosts

    Console Application

    Windows Services Application

SignalR Owin Clients

    Console Application

       Web Application

       WPF Application

So let’s get started by first creating our SignalR Owin Host Console Application. 

SignalR Server Console Application in VB

Create a console application in VB and Install following nuget packages using Package Manager Console to create SignalR Hub.

>Install-Package Microsoft.Aspnet. Owin.Hosting -pre

>Install-Package Microsoft.Aspnet. Owin.Host.HttpListener -pre

>Install-Package Microsoft.Aspnet.Signalr.Owin

Without further due here is the code to start the server and create a hub which will start sending messages to clients upon arrival.

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

Imports Microsoft.AspNet.SignalR

Imports Microsoft.AspNet.SignalR.Hubs

Imports Microsoft.Owin.Hosting

Imports Owin

Module Module1

    Sub Main()

        Dim url As String = "http://localhost:8080/"

        Using WebApplication.Start(Of Startup)(url)

            Console.ForegroundColor = ConsoleColor.Green

            Console.WriteLine("Server running on {0}", url)

            Console.WriteLine("Press any key to start sending events to connected clients")

            Console.ReadLine()

            Dim context As IHubContext = GlobalHost.ConnectionManager.GetHubContext(Of MyHub)()

            For x As Integer = 0 To 100

                System.Threading.Thread.Sleep(3000)

                Console.WriteLine("Server Sending Value to Client X: " + x.ToString())

                context.Clients.All.addMessage(x.ToString())

            Next

            Console.ReadLine()

        End Using

    End Sub

    Public Class Startup

        Public Sub Configuration(ByVal app As IAppBuilder)

            Dim config = New HubConfiguration With {.EnableCrossDomain = True}

            app.MapHubs(config)

        End Sub

    End Class

    <HubName("myHub")> _

    Public Class MyHub

        Inherits Hub

        Public Sub Chatter(param As String)

            Console.WriteLine(param)

            Clients.All.addMessage(param)

        End Sub

    End Class

End Module

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

 IHubContext will give you access to all the clients and then you can communicate to all the clients. When you run this application you will see the following screenshot.  Once you have your client code written then you can press any key and it will start sending values to connected clients. 

Now lets consume this Self Host in a Client Console Application. 

SignalR Client Console Application in VB.  

Create a Console Application in VB and install nuget package using Package Manager Console. 

>Install-Package Microsoft.Aspnet.Signalr.Client

Then paste the following code into your Module1.vb page.  And run the application assuming you have already started the host application.

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

Imports Microsoft.AspNet.SignalR.Client.Hubs

Imports Microsoft.AspNet.SignalR

Module Module1

    Sub Main()

        Dim connection = New HubConnection("http://localhost:8080")

        Dim myHub = connection.CreateHubProxy("myHub")

        connection.Start().Wait()

        Console.ForegroundColor = ConsoleColor.Yellow

        myHub.Invoke(Of String)("chatter", "Hi!! Server") _

        .ContinueWith(

            Sub(task)

                If task.IsFaulted Then

                    Console.WriteLine("Could not Invoke the server method Chatter: {0}", _

                                      task.Exception.GetBaseException())

                Else

                    Console.WriteLine("Success calling chatter method")

                End If

            End Sub)

        myHub.On(Of String)("addMessage", _

            Sub(param)

                Console.WriteLine("Client receiving value from server: {0}", param.ToString())

            End Sub)

        Console.ReadLine()

    End Sub

End Module

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

Now it is time to test our application.  Run our application side by side.  I have server or host running on the left hand side with green color text and client running on the right with yellow color text.

When the client application is started, it invokes the chatter method on the server. 

  

      myHub.Invoke(Of String)("chatter", "Hi!! Server") _

        .ContinueWith(

            Sub(task)

                If task.IsFaulted Then

                    Console.WriteLine("Could not Invoke the server method Chatter: {0}", _

                                      task.Exception.GetBaseException())

                Else

                    Console.WriteLine("Success calling chatter method")

                End If

            End Sub)

You will see “Hi!! Server” value received by the server on the left.  That value is again round tripped to the client and you can see it displayed by the client on the right hand side. 

  myHub.On(Of String)("addMessage", _

            Sub(param)

                Console.WriteLine("Client receiving value from server: {0}", param.ToString())

            End Sub)

Now click on the server console window and press any key.  It will start sending value to the client in real time.  We do this by first getting IHubContext object which knows about all the clients.

            Dim context As IHubContext = GlobalHost.ConnectionManager.GetHubContext(Of MyHub)()

            For x As Integer = 0 To 100

                System.Threading.Thread.Sleep(3000)

                Console.WriteLine("Server Sending Value to Client X: " + x.ToString())

                context.Clients.All.addMessage(x.ToString())

            Next

Now let’s create some more clients that will work with our SignalR Owin Host Console Application. 

SignalR Client WPF Application in VB 

Create a WPF Application in VB and install the following package using Package Manager Console.

>Install-Package Microsoft.AspNet.SignalR.Client.

XAML Side

When you create a WPF application by default MainWindow.xaml file is opened and there paste the following code.  There is a button which will invoke Chatter method on the server. 

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525" Loaded="MainWindow_Loaded" >

    <ScrollViewer>

        <StackPanel>

            <Button x:Name="btnShowSignal" Content="Invoke Chatter Method"  Click="btnShowSignal_Click"></Button>

            <TextBlock Name="txtblock_message" Text="{Binding UpdateText}"></TextBlock>

        </StackPanel>

    </ScrollViewer>

</Window>

Codebehind side

On the codebehind side in the MainWindow.xaml.vb we will create a property named UpdateText which will be set everytime our client receives a new text.  In the XAML side, we bind our TextBlock to this UpdateText property so whenever this property is changed it will be shown in the UI.  For all this to happen we have to implement INotifyPropertyChanged Interface. 

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

Imports Microsoft.AspNet.SignalR.Client

Imports System.ComponentModel

Imports Microsoft.AspNet.SignalR.Client.Hubs

Partial Public Class MainWindow

    Inherits Window

    Implements INotifyPropertyChanged

    Public connection As HubConnection = New HubConnection("http://localhost:8080")

    Public myHub As IHubProxy = connection.CreateHubProxy("myHub")

    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded

        DataContext = Me

        connection = New HubConnection("http://localhost:8080")

        myHub = connection.CreateHubProxy("myHub")

        myHub.On(Of String)("addMessage", AddressOf addMessage)

    End Sub

    Async Sub btnShowSignal_Click(sender As Object, e As RoutedEventArgs)

        Await connection.Start()

        Await myHub.Invoke("Chatter", "Hello Server")

    End Sub

    Private m_updatetext As String

    Public Property UpdateText() As String

        Get

            Return m_updatetext

        End Get

        Set(ByVal value As String)

            m_updatetext = value

            RaisePropertyChanged("UpdateText")

        End Set

    End Property

    Private Sub addMessage(ByVal sValue As String)

        UpdateText += Environment.NewLine

        UpdateText += sValue

    End Sub

    Private Sub RaisePropertyChanged(prop As String)

        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(prop))

    End Sub

    Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged

End Class

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

Let’s run both of our applications side by side. First Run the Host application and then run the WPF application and put them side by side.  In the screenshot below I have SignalR Owin Host Console Application on the left and WPF application on the right hand side.  Click on the button Invoke Chatter Method which will invoke the server’s Chatter method. 

 As soon as you click on the button it passes the value “Hello Server” to the server and server sends that value back to all the connected clients.  If you want to give it a try then fire up all the SignalR Client Console application too and press any key on the server console window.

After you press any key on the Host application it will send values to two clients as shown below.

And you might be tempted to ask me what about a web application which is the most used application by all of us right. 

SignalR Client Hub Web App consuming Owin Host

Let’s create an empty web application and install Nuget packages as shown below.

>Install-Package Jquery

>Install-Package Microsoft.AspNet.SignalR.JS

Create a simple html page, I have named it as SignalRClientNoProxy.html. You can run the application now to see the output.
-------------------------------------------------
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-2.0.0.min.js"></script>

    <script src="Scripts/jquery.signalR-1.0.1.min.js"></script>    

    <script src="/signalr/hubs" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var connection = $.hubConnection('http://localhost:8080');

            connection.start();

            var myHub = connection.createHubProxy("myHub");

            $("#broadcast").click(function () {

                myHub.invoke('chatter', $("#msg").val());

            });

            myHub.on('addMessage',function (message) {

                $("#message").append('<li>' + message + '</li>');

            });

        });

    </script>

</head>

<body>

    <div>

        <input id="msg" type="text"/>

        <input type="button" id="broadcast" value="broadcast" />

        <ul id="message">

        </ul>

    </div>

</body>

</html>

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

As a pre-requisite to running our client application on the right we run our server application on the left.

Type something in the textbox on the right window and post something to the server. 

Lets’ run all the applications so far and see how this works.  So one Host and three clients right.

Let now move on to some real world application like Windows Service Application running SignalR Owin Host sending messages to all clients.

SignalR Server Windows Services Application

Now porting this SignalR Owin Host code to window service is easy. Here is the code to do a simple service with signalR. You can check out the code to do a simple windows service from the All-In-One code framework from micrsoft.

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

Imports System.Threading

Imports Microsoft.AspNet.SignalR

Imports Microsoft.AspNet.SignalR.Hubs

Imports Microsoft.Owin.Hosting

Imports Owin

Public Class Service1

    Private stopping As Boolean

    Private stoppedEvent As ManualResetEvent

    'global variable context to update clients from everywhere in the service.

    Dim context As IHubContext = GlobalHost.ConnectionManager.GetHubContext(Of MyHub)()

    Dim url As String = "http://localhost:8080"

    Public Sub New()

        InitializeComponent()

        Me.stopping = False

        Me.stoppedEvent = New ManualResetEvent(False)

    End Sub

    Protected Overrides Sub OnStart(ByVal args() As String)

        ' Log a service start message to the Application log.

        Me.EventLog1.WriteEntry("Service is in OnStart.")

        Dim url As String = "http://localhost:8080/"

        Using WebApplication.Start(Of Startup)(url)

            

        End Using

        ' Queue the main service function for execution in a worker thread.

        ThreadPool.QueueUserWorkItem(New WaitCallback(AddressOf ServiceWorkerThread))

    End Sub

    ''' <summary>

    ''' The method performs the main function of the service. It runs on a 

    ''' thread pool worker thread.

    ''' </summary>

    ''' <param name="state"></param>

    Private Sub ServiceWorkerThread(ByVal state As Object)

        ' Periodically check if the service is stopping.

        Do While Not Me.stopping

            ' Perform main service function here...

            Dim context As IHubContext = GlobalHost.ConnectionManager.GetHubContext(Of MyHub)()

            For x As Integer = 0 To 100

                System.Threading.Thread.Sleep(3000)

                context.Clients.All.addMessage(x.ToString())

            Next

            Thread.Sleep(2000)  ' Simulate some lengthy operations.

        Loop

        ' Signal the stopped event.

        Me.stoppedEvent.Set()

    End Sub

    Protected Overrides Sub OnStop()

        ' Log a service stop message to the Application log.

        Me.EventLog1.WriteEntry("Service is in OnStop.")

        ' Indicate that the service is stopping and wait for the finish of 

        ' the main service function (ServiceWorkerThread).

        Me.stopping = True

        Me.stoppedEvent.WaitOne()

    End Sub

End Class

Public Class Startup

    Public Sub Configuration(ByVal app As IAppBuilder)

        Dim config = New HubConfiguration With {.EnableCrossDomain = True}

        app.MapHubs(config)

    End Sub

End Class

<HubName("myHub")> _

Public Class MyHub

    Inherits Hub

    Public Sub Chatter(param As String)

        Console.WriteLine(param)

        Clients.All.addMessage(param)

    End Sub

End Class

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

You won’t be able to just hit F5 with a windows service, first you will have to install the windows service then you can run your WPF application and then you could see real time output from the windows service.  As I said before the entire source code for all these apps is on my GitHub page.