Tag Archives: Node.js

Connecting a node app using socket.io to a Windows Forms .NET client application

In previous posts, I developed a node.js application that could provide temperature updates to clients using socket.io. With renewed interest in .NET, I thought it would be interesting to see if I couldn’t build a Windows Form app client that could connect to socket.io interface and receive the temperature updates.

Construct a .NET App which Supports a Socket.io Connection

While targeting a Universal Windows project has perhaps more contemporary relevance, for this example, we’ll stick to the classic Windows Form application.

You’ll want to start a new Windows Forms Application, as selected from Visual C# – Windows – Classic Desktop template section.

Classic Desktop Windows Form Application

Classic Desktop – Windows Forms Application

After we’ve started a new project, we’ll need to add two nuget extensions: SocketIoClientDotNet and Json.NET by NewtonSoft.

SocketIoClientDotNet provides a .NET-based socket.io implementation, in this case the client-side interface – a server-side interface is also available. Use nuget to search out and install the library.

Nuget SocketIoClient Library

Install SocketIoClientDotNet from nuget

We also need to also nuget Json.NET, which will provide us tools to handle incoming socket.io data delivered in JSON format.

Nuget NewtonSoft Json.NET.jpg

Install NewtonSoft’s Json.NET from nuget

With the two extensions installed, we’ll want to go ahead and build out the basic UI in a Windows Form. For this example, we’ll want to press a button to initiate our socket.io client, find out if we connected (putting the status in a TextBox) and then, if connected, display the temperature our node app will be sending us (within another TextBox):

Our Windows Form Application

The SocketIoClient’s Windows Form

While there are better ways to handle the connection, for the sake of simplicity, I’ve put the grunt work within the socketIoManager method – which aside from instantiating the socket.io connection, provides the basic socket.io On handlers to manage incoming events/data. About the only other thing mentioning is that any UI updates need to be managed by delegates because events received by the socketIoManager method are happening on a different thread than the UI thread, hence the need for the UpdateStatus and UpdateTemp methods:

Initialize and Handle Socket.io

Here’s a short video explaining the project:

 

 

 

 

Using Visual Studio to remote debug a node.js application on a BeagleBone Black

No one can argue that having a top-notch IDE, like Visual Studio, which allows for code management, formatting, context-aware tools (e.g., Intellisense) and debugging is a significant productivity improvement for developing great code. So when I started developing for embedded platforms, like the BeagleBone Black (BBB), and especially using node.js as the application core, I often wished I had the development tool set that is available for desktop and server programmers.

Fortunately, Microsoft has developed and open-sourced a Visual Studio extension for Node.js projects, called unsurprisingly, Node.js Tools for Visual Studio or NTVS, for short. In addition to helping us code in Javascript and node, one of the less documented goodies is a remote debugger, that helps us troubleshoot applications running on embedded targets. In this post, we’ll reuse the bbbTemp application, which reads and displays temperature and demonstrate how we can remote debug it as it runs on a BeagleBone Black.

Installing the NTVS Extension

Obviously, we’ll need to download and install the NTVS tool set. You’ll like want to first make sure that you have Visual Studio Community Edition 2015 installed, but once you do, then install NTVS 1.1.

Install NTVS 1.1

Install NTVS 1.1

Setting up the Project

With NTVS installed, we’ll set up our project. To do this, we’ll start with a fresh clone of the bbbTemp, which is located bitstobrowser bbtemp repo:

Git Clone the bbbTemp source

Git Clone the bbbTemp source

Start up Visual Studio Community Edition 2015 and create a new project based on existing node source:

Create Visual Studio Project

Create Visual Studio Project

Add Node Source to Visual Studio Project

Add Node Source to Visual Studio Project

We now have our project in Visual Studio:

Visual Studio Node Project

Visual Studio Node Project

To debug a remote Node application, we need to add RemoteDebug.js to our project. This file is a part of the NTVS tool set and acts as the remote debugging proxy interface to Visual Studio. While this file is mentioned in the Advanced Debugging section of the NTVS documentation, it wasn’t obvious where to find it. The easiest way to find it is from Visual Studio’s menu system – use Tools / Node.js Tools / Remote Debugging Proxy / Open Containing Folder.

Find and Add the RemoteDebug.js Proxy to Project

Find and Add the RemoteDebug.js Proxy to Project

Preparing the Target Machine for Debugging

While there maybe a way to transfer files from within Visual Studio, I currently do this using WinSCP or via a github repo. For this post, we’ll use WinSCP to transfer the project to our BeagleBone Black target:

Transfer Source Files to Target Using WinSCP

Transfer Source Files to Target Using WinSCP

Using a SSH session, we’ll start our node application, using the RemoteDebug.js proxy to the application. To do this, we simply use the following command format:

$ node RemoteDebug.js (application)

For example:

Start Node Application with RemoteDebug Proxy

Start Node Application with RemoteDebug Proxy

Debugging the Remote Node App from Visual Studio

With the node application running, we will attach to it from Visual Studio and prepare do some debugging. Use the Debug / Attach to Process menu command to bring up the Attach to Process dialog and select Node.js remote debugging as the Transport and use the IP Address with port 5858 as the Qualifier. Use the refresh button to find your target device and then Attach:

Attach to the Remote Node Process

Attach to the Remote Node Process

Once attached, you now set breakpoints and inspect data, all from the comfort of Visual Studio:

Related Topics …

While I’ve shown this for a BeagleBone Black, it’s absolutely conceivable that the very same process could be used for debugging remote Windows IoT embedded targets – I may explore this idea in a subsequent post.

Additionally, there are some manual steps I took to transfer files to our target using WinSCP or a common git repo, but I am investigating how we might publish edits and launch debugging directly from Visual Studio, saving us from dropping out of the IDE.

 

node.js on Windows IoT

Hello World application using node.js on a Windows IoT-capable Raspberry Pi 2

I’m a big fan of node.js on embedded devices and was pleased to hear that Microsoft would be making node available for Windows IoT.

What makes node great for embedded devices is that it is asynchronous, enables tight/small applications, has a rich ecosystem for extensions and offers built-in web services. It’s trivial to set up a RESTful API and web server, which both come in handy for talking to and managing devices.

For Windows on Arm (WoA), like the Raspberry Pi 2 (RP2), Microsoft’s implementation of node.js is based on the Chakra Javascript engine. As a result, there is a different process to get node.js on a Windows IoT device, as compared to downloading and building node for a Linux target device.

In the following steps below, we’ll work towards running a Hello World node app on a Windows IoT-enabled RP2. I’ve used the Microsoft developer guide to run your first node application which in addition showing how to load node on a device, outlines how you might interface to the underlying Windows IoT system via a C++ extension.

Getting node.js on to your Windows IoT device

The first thing that we must do is download the “Node.js Tools for Windows IoT“, which includes the Chakra version of Node.js and tools to help manage node for devices. You may need to scroll down a bit to find the Node.js Tools, but once you do, run the installer to install this to your Windows development machine.

Install Node.js Tools for Windows IoT

Install Node.js Tools for Windows IoT

You’ll also need to download Python 2.7 for your Windows development machine. There are multiple versions available, but to be consistent with Microsoft’s documentation, I pressed the Python 2.7.X button.

With the necessary tools installed, you need to build and copy the Chakra node engine for the RP2. To do this you must first gain access to the device. Use Windows Explorer and enter:

\\<IP Address of the RP2>\C$

You will be prompted for the username (<IP Address of the device>\Administrator) and password (p@ssw0rd). This step is important because it allows your development machine to have access to the necessary target locations on the RP2 where node is to be loaded.

Access Windows IoT device

Access Windows IoT device

With that in place, we’re ready to build and load node.js. To do this, we’ll run a PowerShell script called CopyNodeChakra.ps1, using the following command:

& 'C:\Program Files (x86)\Node.js (chakra)\CopyNodeChakra.ps1' -arch ARM -ip <IP Address of the RP2>

If the security policy limits successful completion of this command, open PowerShell as Admin or run via a PowerShell ByPass. If successful, node will be copied to the C:\Node.js (Chakra) directory. (In the picture below you can see that I used the ByPass to complete the script.)

Copy Chakra to IoT Device

Copy Chakra to IoT Device

To verify that node is properly installed, you can start a PuTTY SSH session to the RP2 and navigate to the install location then issue the familiar node and npm version commands:

Check node and npm versions

Check node and npm versions

Run Hello World on a Windows IoT RP2

With node on the RP2, we’re ready to run our hello world application. I copy-pasta’d a very simple application using a text editor, but if it’s a more complex application, you can use Visual Studio to manage development. Since I had a Windows Explorer session opened, I just copied my hello.js application to the RP2 and put it in the directory in which node was installed – of course, as the node application matures, you’ll want to create a separate deployment directory.

Hello World node application (Hello.js)

Hello World node application (Hello.js)

Before we run the application, we need to ensure that the node.exe can communicate through the firewall. We’ll need to connect to the device, using PowerShell and issue the following commands:

' Start the WinRM service for remote connections
net start WinRM
' Set as trusted host
Set-Item WSMan:\localhost\Client\TrustedHosts -Value <IP Address of the RP2>
' Initiate a session with the RP2
Enter-PSSession -ComputerName  -Credential <IP Address of the RP2>\Administrator
' With the remote session established, allow the firewall exception for node.exe
netsh advfirewall firewall add rule name="Node.js" dir=in action=allow program="C:\Node.js (Chakra)\Node.exe" enable=yes

Finally, we’ll use our PuTTY session to run our node Hello World application and then connect to our Windows IoT device using a browser to see the results:

Hello World on Node for Windows IoT

Hello World on Node for Windows IoT

Connecting a device to Azure IoT Suite

It makes sense to have a cloud-based aggregation system for my embedded “IoT” device(s), so I wanted to explore Microsoft’s Azure IoT suite. There’s a lot of marketing fluff, but I wanted to see how quickly I could get up and running. So let’s try …

What is the Azure IoT Suite?

The Azure IoT Suite includes a host of services, which combined allow for the large-scale collection of data from IoT devices (Microsoft marketing speak: “Cloud-scale telemetry ingestion from website, apps and devices”). Other services allow for the (a) analysis of the incoming data, (b) out-going control messaging to the devices and (c) presentation of the data in real-time.

Azure IoT Services

List of services available as a part of the Azure IoT Suite

Perhaps more important for developers is understanding how the data flows from devices through the gateway to the presentation layer. In our example, we’ll be using an IP-capable device which will send messages directly to the Azure IoT Hub (“Cloud Gateway”) and we’ll view the information in the presentation layer.

Azure IoT Data Flow Architecture

Azure IoT Data Flow Architecture

To help us quickly get up and running, the Azure IoT Suite offers:

  • An Azure IoT SDK toolset which will allow us to quickly integrate the device’s connection to Azure. While there is support for multiple languages and platforms, we’ll use the node.js tool set.
  • Azure offers a set of predefined presentation views which are based on the type of usage they intend to provide. The presentation view is an auto-generated website in the azurewebsites.net domain based on the selected name of the IoT Hub.
Example of a Pre-Defined Azure IoT Presentation Website

Example of a Pre-Defined Azure IoT Presentation Website

Seting up our Azure IoT Suite

The first step that you have to go through is to create an Azure account. I started the process at the Microsoft Azure IoT Suite page’s ‘Try Now’ button. There is a 30-day free trial option, but you still need to give a credit card. The overall procedure is pretty quick and takes about 5 minutes from the time you start to the time you are connected to your Azure portal manager.

Azure IoT Home Page

This next step of the two step procedure creates a presentation website based on the type of business model that best represents your enterprise. At the time of this blog entry, the only option was ‘Remote Monitoring’ though ‘Predictive Maintenance’ is planned for the future.

Azure IoT Pre-Configured Solutions

Azure IoT Pre-Configured Solutions

Once the Azure account is set up, I recommend using the newer management portal, called Azure Preview Portal, to view and manage the Azure iOT services. I favorited the ‘IoT Hub’ to allow me to easily access the various services available as part of the Azure IoT Suite.

Azure Preview Portal with IoT Suite

Azure Preview Portal with IoT Suite

Connecting a Device to Azure IoT

With our IoT suite set up, we are ready to code. While I plan to use an embedded Linux device which will be running a node, I decided to use Visual Studio 2015 Community Edition as my IDE in this project. By default, node.js project templates aren’t included in VS2015, so you need to install them.

Node.js Tools 1.1 RC2 for Visual Studio 2015

Microsoft has provided a bunch of sample code – so you’ll want to clone the repo at https://github.com/Azure/azure-iot-sdks, and then start a Node.js project based on existing code. (Since I’m going to be transferring the JavaScript source to my device from my Windows development environment using WinSCP (which I can’t recommend highly enough – please donate I did), I’m not too particular on the directory structure because the work will happen on the target, I’m mostly focusing on having good access to the provided source from Microsoft.)

VS2015 Node.js Project

VS2015 Node.js Project

I’ll be connecting my device based on the sample code provided in the remote-monitoring.js file. Looking in this source, we’ll see that we need some key pieces of information from our Azure IoT Suite, specifically information on the deviceID, deviceKey, hubName and hubSuffix.

Adding a device to Azure IoT Suite

Adding a device to Azure IoT Suite

To get this information, we’ll need to create a device using the presentation view – at the bottom of the page, select the Add Device icon and follow the wizard to generate the necessary device identification parameters.

Add Device to Azure IoT Suite

Add Device to Azure IoT Suite

After I updated the remote-monitoring.js file, I used WinSCP to move it to my target device.

Transfer Node.js Files to Debian Target

We’ll then SSH into our target, use npm to install the ‘azure-iot-device’ dependency and then start the node application. Within 5 seconds you should see telemetry data coming in from our device. The sample code auto-generates temperature values and we can see them being updated every second.

Azure IoT Ingesting Data from our Node Device

Azure IoT Ingesting Data from our Node Device

So it took me a couple of hours from the time I started to seeing data being reported live on my Azure presentation layer. The fact that I can quickly add disparate IP devices to such a power back end is pretty remarkable. In a future post I’ll investigate more things that we can do now that we’re ingesting data.

Project: BBB Admin Page – Implementing a General Web Server on a BeagleBone Black

So far, we’ve implemented a very simple web page served by the BeagleBone Black (BBB) and setup a development environment. But to build a sophisticated web-based administration application, we need build a framework to support our future work. Our end goal is a Single Page Application (SPA) built using AngularJS. In this post, we’re going prepare for the Angular-izing of our work by adding node.js plumbing on the BBB to allow an infrastructure to server up web components.

As we did in the last post, we’ll use the “Install New npm Packages” tool to add a new module called serve-static. serve-static allows us to serve files from our node.js server on the BBB. Though it works from the root of where our node.js server is running, we can add directory support based on how we decide to organize our code. From Visual Studio 2013 (VS2013), select the npm element in the Solution Explorer tree, then select the “Install New npm Packages …” option. Once the dialog comes up, search for “serve-static” and install.

Since serve-static also needs the finalhandler module, also install it.

Install the serve-static module

Install the serve-static module

Now, let’s modify our HTML file and code to begin using benefits of the serve-static module. We’ll first rename our client.html to be a more generalized name: index.html. Similarly, we’ll rename our server.js file to be a more generalized name: app.js.

We are now ready to full integrate serve-static into our app.js code.

Adding serve-static into app.js

Adding serve-static into app.js

Most of the code here is boilerplate from the serve-static module’s npm page. We essentially define our modules (lines 3-8), setup default files for index (line 10-11) and then fire up the server in lines 13-21).

We can test our changes in VS2013, if we comment out the setInterval timer, which invokes a push of the temperature. If we don’t we’ll see an error because our the file location referenced will not be found and our file server will crash. We’ll remember to uncomment this line before we upload to the BBB. The result of our VS2013 debugging is:

Debugging serve-static using VS2013

Debugging serve-static using VS2013

With it working on the PC, we’re ready to test this infrastructure on our BBB – we’ll fire up our trusty WinSCP and transfer down the changes, making sure that we also include the serve-static and finalhandler modules, in addition to the renamed index.html and app.js files. Again, perhaps the better route is pushing the results to github, then bringing down the results to the BBB, but the WinSCP is a bit of a short cut. Here’s how our updated app looks now – the console below is from a PuTTY connection and the browser is on the PC (note the URL which references the BBB and the port we’ve selected for our server).

BBB Serving Temperature Using serve-static Module

BBB Serving Temperature Using serve-static Module

With a generalized server in place, we’re ready to move towards building a more sophisticated application. Next post, we’ll start adding an AngularJS framework to our project.

The updated project at github is here: https://github.com/bitstobrowser/AdminApp

 

Project: BBB Admin Page – Setting up a Development Environment

To summarize our current location: We’re on the path of building an administration website built using the AngularJS framework, hosted on the BeagleBone Black (BBB). The purpose of the administration site is to allow us to adjust key configuration parameters and launch other applications. Essentially, I want to provide a web interface to the BBB, similar to the one provided for a network router.

Having written a prototype node.js app which provides us near real-time data via the sockets.io module, we are ready to begin building out the application to do more. Because we’re going to do a lot more, we need to better define our development environment.

In this post, I’ll document the development environment I’m using to build out the administration web application then in subsequent posts I’ll delve into discussions on our AngularJS MV* infrastructure and tying Angular to core BBB functions.

Visual Studio: A Most Unconventional Development Environment for BBB

I’m going to use Visual Studio Community Edition 2013 (VS2013) as my development environment. It may seem unconventional because my target platform is the BBB, but since a lot of the code I’m going to be writing is web-oriented and the bulk of the coding is most easily done on my Windows PC, I need a Windows development environment. While text editors (e.g., Notepad++, EditPlus) and newer development tools (e.g., Sublime, JetBrainsBrackets) are possible options, I’m pretty used to the Visual Studio toolset. The new VS2013 is a full-featured professional package, so there’s a ton of functionality available, including Javascript Intellisense and debugging capabilities. Microsoft has put a focus on providing functionality for JavaScript, Bootstrap and AngularJS developers, primarily for websites running on their Azure platforms, but we can leverage these tools for our work on the BBB – we’ll simply publish to BBB instead of Azure. Best of all, Microsoft has made Visual Studio Community Edition free for non-enterprise use.

So let’s start. If you don’t have VS2013 already, head to the the Visual Studio website and download it. It’s not a small piece of software, so allow 15-30 minutes to download and install.

Microsoft Visual Studio Community 2013 Website

Microsoft Visual Studio Community 2013 Website

Before we jump in, I’m also going to add in the Web Essentials 2013 for Visual Studio plugin to give us even more developer friendly tools. Information on Web Essentials is available here, but the download is kept here. Once everything is installed, we’re ready to fire up Visual Studio.

Visual Studio Community Edition

Visual Studio Community Edition

Creating a VS2013 node.js Project

To start, we’ll create a project, but reference our existing work, then we’ll import the relevant files to get to a point where we are ready to work.

Create Visual Studio Node.js Project

Step A – Create Visual Studio Node.js Project

Import Files into Visual Studio 2013

Step B – Import Files into Visual Studio 2013

Up and Running in Visual Studio with node.js Project

Step C – Up and Running in Visual Studio with node.js Project

Preparing the VS2013 for Debugging: Reconciling the Required Server Modules

If we try debugging, by pressing the green arrow, we’ll run into two problems:

  • Visual Studio will ask us to build the project. VS2013 is not really compiling, but it needs to build a framework for it to support our debugging efforts. This is pretty easy to get around, we just tell VS2013 OK, do what you need to do.
  • Our application will fail in the command line, because we’re missing our referenced libraries. To fix this, we need to import the modules into our project.

Specifically, we need the following modules for the server:

  • http, fs – since these are included as part of the base node installation, we do not need to install them
  • socket.io – we will import this module, using VS2013’s npm package installation tool
  • bonescript – we will modify our code to not require this, using node’s fs module instead

We can install socket.io by selecting npm (Node Package Manager) from the Solution Explorer window, right-clicking and selecting the “Install New npm Packages …” option. The first time you do this, it will download all of the available module options (there are a ton), but subsequent times, it will be near instantaneous to get to the window we want.

VS2013 - Install npm Packages

VS2013 – Install npm Packages

As per our first few lines of the app.js file, we can see the list of modules we need to include. Simply search for the relevant modules and add them, Visual Studio will add them to the project and, optionally, to the package.json file. Make sure that you include the right modules, because there are so many of the same name – if you make a mistake, simply remove them from the Solution Explorer tree.

VS2013 - Install npm Module Dialog

VS2013 – Install npm Module Dialog

We will also modify our code to use the fs module, instead of the bonescript module, to have a more generic code base.

Running and Debugging our Application

With this complete, we’re ready to test our project. We can select the Debug menu’s “Start debugging” option, press green arrow button on the menu bar or simply press the F5 function key to launch the application. Of course, we won’t see a temperature, because we’re running the application on a PC for the moment, but it will prove that our application is functioning and ready for debugging. We can even use breakpoints and the watch windows if need be.

VS2013 - Project Debugging

VS2013 – Project Debugging

Adding Some Polish to the Client-Side Presentation Through the Bootstrap.js Module

Bootstrap is a widely-used Javascript module for marking up client-side user interface. It’s popularity is because it is a mobile-first, responsive HTML/CSS/Javascript framework.

To add Bootstrap to our client HTML, we’ll first have to reference it within a script. For simplicity-sake, we’ll use the provided CDN in our HTML header. We can now add some basic commands to make some improvements to our previous gaudy html. Specifically, we’ll throw in a couple of labels to pretty our browser presentation:

Adding Some Basic Bootstrap to App Client

Adding Some Basic Bootstrap to our App Client

Running App and Client (with Bootstrap)

Running App and Client (with Bootstrap)

Final Step – Upload to the BeagleBone Black

There are two way to manage how our code now gets to the BBB:

  • Use GitHub – in this case you’ll add, commit and push the changes to the repository, then pull them down from the BBB. This is the recommended approach
  • Use WinSCP – upload the files to BBB directly. This may be faster and more direct. Furthermore, it is possible to set up a directory synchronization task to manage host and target directories automatically.

For this blog entry we will show the second option, using WinSCP’s synchronization functionality. In this method, you’ll might want to omit synchronizing the VS2013 directories and files, as shown below:

Using WinSCP Synchronize Directories Feature

Using WinSCP Synchronize Directories Feature

We can PuTTY to the BBB and run our application:

Updated App  Running on BBB

Finally, I’ve updated the repository here: https://github.com/bitstobrowser/AdminApp

Project: BBB Admin Page – Connecting a BeagleBone node.js app to a browser using socket.io (Part 2)

So, three things to improve on the last post:

First, I’ve created a github repository which contains the source for our project. It can be found here: https://github.com/bitstobrowser/socketTemp.

To run the code, you can download it either directly to your BeagleBone Black or to your desktop and use a utility, like WinSCP, to transfer it to your BBB. Once on your BBB, navigate to the directory and start the server by executing the following command: node server.js.

Second, let’s quickly review the code to get an understanding of how it works:

BBB Temperature Server

BBB Temperature Server

  • Lines 3-6: Define the set of libraries that we need to use. Importantly, we tell socket.io to listen for any connections on the server’s port.
  • Line 8: Here we listen for any HTTP requests on port 8888.
  • Lines 10-21: Serve up a client.html file to all browser HTTP requests
  • Line 23: Sets a timer to go off every 2500ms or 2.5 seconds. We’ll use this to read and update the attached browsers.
  • Lines 25-26: Is the user file which contains the temperature information
  • Lines 28-32: This is the function that is called every 2500ms and it reads the contents of the temperature file and then calls another function to send the information out to any clients.
  • Lines 34-39: This puts the temperature in a JSON object and then emits (sends) the data to all attached socket connections.

At the client end, it’s even less lines of code:

BBB Socket Temp Client

BBB Socket Temp Client

  • Lines 3-4: We specify the JavaScript libraries that we will need to reference.
  • Line 6: Creates a socket connection, using the same port as the specified in the browser access.
  • Line 7: Defines what we do in case we get a socket message of type ‘temperature’ – we will call the handleTemperature function.
  • Lines 9-14: When we receive a ‘temperature’ function, we unpack the JSON object to get the value sent to us. We convert to Fahrenheit for our display. Then finally on line 13, we update the HTML as marked by the “temp” ID with the latest temperature information.
  • Lines 18-22: This is our basic HTML display – line 22 will be adjusted whenever we receive a message by the handleTemperature function.

Third, I’ve put a better version of the video up – much better resolution: