15
Feb
13

Azure websocket server with node.js and socket.io

Peter Daukintis

If you haven’t previously done this download your Azure publish settings file from here https://windows.azure.com/download/publishprofile.aspx

This will contain your management certificate and details for each of your Azure subscriptions.

 

If you have multiple Azure subscriptions ensure that you have set the ‘current’ one to be the one you wish to use:

Select-AzureSubscription –SubscriptionName your_subscription_name

You can confirm this is set by using,

Get-AzureSubscription -Current 

Then, to create the Azure project

New-AzureServiceProject your_project_name

This will create the files needed by the Azure cloud project (including deployment settings, cloud/local configuration files and a service definition file).

Add-AzureNodeWorkerRole

This will add a WorkerRole folder which contains the Node project

ps2

then, from within the WorkRole folder,

npm install azure (optional – enables access to azure services within your node project see https://npmjs.org/package/azure)

npm install socket.io

navigate to the worker role folder and replace the code in server.js with the following:

   1:  var http = require('http'); 
   2:  var io = require('socket.io'); 
   3:  var port = process.env.port || 1337; 
   4:  var server = http.createServer(function (req, res) { 
   5:      res.writeHead(200, { 'Content-Type': 'text/plain' }); 
   6:      res.end('Hello World 2\n'); 
   7:  }).listen(port);
   8:   
   9:  var socket = io.listen(server); 
  10:  socket.on('connection', function (client) { 
  11:      socket.emit('news', { hello: 'world' }); 
  12:      client.on('message', function(){ 
  13:          console.log('message arrive'); 
  14:          client.send('some message'); 
  15:      });
  16:   
  17:      client.on('disconnect', function(){ 
  18:          console.log('connection closed'); 
  19:      }); 
  20:  });
  21:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }


then

Publish-AzureServiceProject

Note that subsequent publish commands will result in an upgrade…

publish

 

Create a .NET client to test the server

Create a new c# console app in visual studio, add SocketIO .NET client Nuget package (Install-Package SocketIO4Net.Client)

SocketIONetClientNuget

Paste the following into the console app…

   1:          static void Main(string[] args)
   2:          {
   3:              Console.WriteLine("Starting TestSocketIOClient Example...");
   4:   
   5:              using (var socket = new Client("http://your_project_name.cloudapp.net/"))
   6:              {
   7:                  socket.Opened += SocketOpened;
   8:                  socket.Message += SocketMessage;
   9:                  socket.SocketConnectionClosed += SocketConnectionClosed;
  10:                  socket.Error += SocketError;
  11:   
  12:                  socket.Connect();
  13:   
  14:                  Console.ReadLine();
  15:              }
  16:          }
  17:   
  18:          private static void SocketConnectionClosed(object sender, EventArgs e)
  19:          {
  20:              Console.WriteLine("CLOSED");
  21:          }
  22:   
  23:          private static void SocketError(object sender, ErrorEventArgs e)
  24:          {
  25:              Console.WriteLine(e.Message);
  26:          }
  27:   
  28:          private static void SocketMessage(object sender, MessageEventArgs e)
  29:          {
  30:              Console.WriteLine(e.Message.MessageType.ToString());
  31:          }
  32:   
  33:          private static void SocketOpened(object sender, EventArgs e)
  34:          {
  35:              Console.WriteLine("OPENED");
  36:          }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

That’s it.

17
Nov
12

wp8 streamsocket

Building on previous StreamSocket-related posts http://babaandthepigman.wordpress.com/2012/04/07/streamsocket-example-c-metro/ and http://babaandthepigman.wordpress.com/2012/10/12/metro-app-and-kinect-voice-control/ which use socket code for Windows Store apps and for Windows 8 desktop I decided to try the code on Windows Phone 8. I have recently bought a Lumia 920 so am now in a position to try it out.

Just to recap the ‘Streamsocket example c# metro’ post contains code to send/receive messages between Windows Store applications. Since these APIs are also available from the Windows 8 desktop the ‘metro app and kinect voice control’ post reused that code to communicate between a Windows Store app and Windows 8 desktop app (WPF).

These APIs are also available on Windows Phone 8 so I decided to try it out with me new lumia. I simply pasted the code from the other project into a c# windows phone xaml application using Visual Studio 2012. I took the xaml and the code behind and the only re-jigging required was as follows:

  • Layed out the content grid on the page to fit on the phone
  • Altered some code referencing the Dispatcher as the interface is slightly different on the phone
  • Changed the Message dialog code.

This worked as expected and I was able to create a session between my windows 8 tablet and the lumia:

wp8_stream socket

 

WP_20121117_001

This was just a quick experiment and I’m feeling bad about not refactoring into a Portable Class library but hopefully will get around to that soon.

Solution is here http://sdrv.ms/T2quLL

12
Oct
12

metro app and kinect voice control

Peter Daukintis

Recently I had a need to reacquaint myself with the latest Kinect SDK. v1.6 has just been released and is downloadable from here Kinect SDK. So I downloaded it and started playing around with some code and it occurred to me that what I would really like was an environment in which I could use the Kinect in a metro application. Using the Kinect SDK from a metro app is not a supported scenario and neither is communication between a metro app and a desktop app. Having said that, I recall reading somewhere that someone may have used a wcf service to carry out this communication so I guessed that a local socket connection would probably work (I believe this is an unsupported mechanism and would likely fail store certification). My goal was not to release an app but just to be able to make use of it for experimental/personal usage.

Now, I had previously written some WinRT code for socket communication using StreamSocket (see StreamSocket Example) and I saw a few blog posts about using WinRT libraries on the Windows 8 desktop so I though I’d give it a try…

The first thing was to get a communication path between a metro app and windows 8 desktop app. I followed the instructions here to enable WinRT in a desktop app. Then, I copied the server side of the socket code and the xaml into a WPF app. With a few minor adjustments (replacing OnNavigatedTo event handler and MessageDialog) it was good to go..

 

wpfapp

To test that everything worked ok, I

  • Ran the wpf application in the debugger…
  • Ran the store ui app in the debugger
  • Listen from the desktop
  • Connect from the store ui app

And….

It worked!

(side by side apps screenshot…)

So, the next step is to configure the wpf application to respond to Kinect voice commands and ship them over the socket.

First I added references to Kinect SDK and toolkit assemblies, which on my machine were located as follows:

C:\Program Files\Microsoft SDKs\Kinect\Developer Toolkit v1.6.0\Samples\bin\Microsoft.Speech.dll

And

C:\Program Files\Microsoft SDKs\Kinect\v1.6\Assemblies\Microsoft.Kinect.dll

Add code to carry out speech recognition using the Kinect with a very simple grammar.

_sre = new SpeechRecognitionEngine(recognizer);

var gb = new GrammarBuilder { Culture = recognizer.Culture };

var choices = new Choices();
choices.Add(new SemanticResultValue("go", "NEXT"));
choices.Add(new SemanticResultValue("back", "PREV"));

gb.Append(choices);
var g = new Grammar(gb);

_sre.LoadGrammar(g);
_sre.SpeechRecognized += sre_SpeechRecognized;

_sre.SetInputToAudioStream(_kinect.AudioSource.Start(),
    new Microsoft.Speech.AudioFormat.SpeechAudioFormatInfo(EncodingFormat.Pcm, 16000, 16, 1, 32000, 2, null));

_sre.RecognizeAsync(RecognizeMode.Multiple);

When the speech recognizer recognises the next (go) and previous (back) words I will transmit that text over the socket to the waiting metro app whereupon I will use them to activate commands.

To make a useful (sort of) example I will create a Metro app which loads images from your pictures library into a flip view and use the voice commands to allow navigation of the pictures using ‘next’/"previous".

WP_000036

 

Disclaimer: Please note that I haven’t tested this code beyond trying it in my development environment and it was not written to be robust in any way.

Download the solutions here.

KinectSocketServer

KinectPictureViewer

12
Aug
12

metro background audio c# (release preview)

Peter Daukintis

I have just updated the sample I created for this previous post metro background audio c# (consumer preview). I have re-jigged the code to work with Win 8 Release Preview and have spruced the ui up a little bit.

I also added functionality to retrieve some audio-related metadata from an audio file and displayed it in the user interface. When you select an audio file the code will retrieve a thumbnail from the system, store it in a local folder and display it using its local uri to reference it. Here’s a snippet of code to illustrate this:

using (StorageItemThumbnail storageItemThumbnail =
    await file.GetThumbnailAsync(ThumbnailMode.SingleItem, 500, ThumbnailOptions.ResizeThumbnail))
using (IInputStream inputStreamAt = storageItemThumbnail.GetInputStreamAt(0))
using (var dataReader = new DataReader(inputStreamAt))
{
    uint u = await dataReader.LoadAsync((uint)storageItemThumbnail.Size);
    IBuffer readBuffer = dataReader.ReadBuffer(u);

    var tempFolder = ApplicationData.Current.LocalFolder;
    var imageFile = await tempFolder.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);

    using (IRandomAccessStream randomAccessStream = await imageFile.OpenAsync(FileAccessMode.ReadWrite))
    using (IOutputStream outputStreamAt = randomAccessStream.GetOutputStreamAt(0))
    {
        await outputStreamAt.WriteAsync(readBuffer);
        await outputStreamAt.FlushAsync();
    }
}

// Finally, set up the Media Control
MediaControl.TrackName = audioTrack.Properties.Title;
MediaControl.ArtistName = audioTrack.Properties.Artist;
MediaControl.AlbumArt = audioTrack.ThumbUri;

Here are a few screenshots

nofile

 

After selecting a file the image and metadata are populated.

 

bgaudio_small

 

Navigating away from the app and accessing the System Media Controls.

 

mediacontroldesktopsmall

 

Finally, a screen shot showing the design-time data in visual studio.

 

designtimedataaudio

 

The project can be downloaded from here http://sdrv.ms/NiW22g.

07
Apr
12

Streamsocket example c# metro

Peter Daukintis

This is a very basic example of socket communication in a c# metro-style application using StreamSocket and StreamSocketListener. It mirrors the Simple StreamSocket example in msdn here http://code.msdn.microsoft.com/windowsapps/StreamSocket-Sample-8c573931 which is coded in c++ and javascript but no c#. I decided to roughly convert it as a learning exercise – please note I haven’t tested the code in that many scenarios and haven’t handled failure cases and errors much.

A socket provides send and receive over TCP and a StreamSocketListener will listen for incoming TCP connections.

The sample will act as a server or client depending on which buttons you press, i.e. press listen to be a server and connect to be a client. Also, you can set the same program as client and server ad have it communicate with itself.

To start the listener wire up a connection received event handler and bind the service name…

_listener.ConnectionReceived += listenerConnectionReceived;
await _listener.BindServiceNameAsync("3011");

The event handler stores the incoming socket in a list (so it can use it to reply), and waits for incoming data from it. The ‘waiting for incoming data’ bit looks like this…

async private void WaitForData(StreamSocket socket)
{
    var dr = new DataReader(socket.InputStream);
    //dr.InputStreamOptions = InputStreamOptions.Partial;
    var stringHeader = await dr.LoadAsync(4);

    if (stringHeader == 0)
    {
        // disconnected
        return;
    }

    int strLength = dr.ReadInt32();
    uint numStrBytes = await dr.LoadAsync((uint)strLength);
    string msg = dr.ReadString(numStrBytes);
    WaitForData(socket);
}

It uses a DataReader to read from the incoming socket and then calls itself to wait for subsequent incoming message data.

Note that the samples use a protocol which sends the length (number of bytes) of the message first followed by the message data itself. If you want to use a different strategy, for example characters to delimit the start and end of a message then the code will change a little bit. The difference being that you won’t always know how much data to read. You can modify the code like this to accommodate this:

async private void WaitForData(StreamSocket socket)
        {
            var dr = new DataReader(socket.InputStream);
            dr.InputStreamOptions = InputStreamOptions.Partial;
            var stringHeader = await dr.LoadAsync(512);

            // change the rest acccordingly….

Note that setting the InputStreamOptions to Partial will allow you to specify a larger buffer but also the async load operation will complete when a smaller sized buffer comes in. This enables you to read the data coming in and respond to it accordingly.

The pictures show a session between a socket server running on a build slate and a win8 vm both on my local network..

socketexampleservertablet

socketexampleclientvm

The project can be downloaded from here.

https://skydrive.live.com/redir.aspx?cid=4f1b7368284539e5&resid=4F1B7368284539E5!445&parid=4F1B7368284539E5!123

UPDATE: This project has been updated for the Release Preview

http://sdrv.ms/Nema94

04
Apr
12

metro c#–simple transform using touch

Well, this turned out to be pretty easy Smile……

The aim was to carry out a simple image transform with touch; so pinch zoom, translate and rotate. This is how the code turned out.

First, the xaml, which is an Image inside a Canvas…

 

<Canvas>
    <Image x:Name="myImage"
           ManipulationMode="All"
           ManipulationDelta="Image_ManipulationDelta_1"
           RenderTransformOrigin="0.5, 0.5">
        <Image.RenderTransform>
            <CompositeTransform></CompositeTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

 

Then the event handler for the ManipulationDelta event

 

private void Image_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var ct = (CompositeTransform)myImage.RenderTransform;
    ct.ScaleX *= e.Delta.Scale;
    ct.ScaleY *= e.Delta.Scale;
    ct.TranslateX += e.Delta.Translation.X;
    ct.TranslateY += e.Delta.Translation.Y;
    ct.Rotation += 180.0 / Math.PI * e.Delta.Rotation;

    UpdateControls(ct);
}

 

And here’s the sample running on my Build slate…

 

PinchZoomSpam

 

The code is available here…

https://skydrive.live.com/redir.aspx?cid=4f1b7368284539e5&resid=4F1B7368284539E5!443&parid=4F1B7368284539E5!123

04
Apr
12

wp7–JSON parsing

Peter Daukintis

I’m writing this mainly as a central place to store this code as I need to use it frequently – hopefully it will help others also.

Supposing I have a web service that I want to call that returns me some JSON data. I want to get that from the service and into a class which I will use as a domain model in my application. The first thing to do is to make sure that we understand the hierarchy that the JSON data represents. So for example,

{ IsSuccess: true }

is an object with a boolean property ‘IsSuccess’ which in this case is true. So we can read the {}’s as enclosing an object.

[{ IsSuccess: true },{ IsSuccess: false }]  

This represents an array of objects; read the []’s as enclosing an array.

Here’s a slightly more complicated example:

// start
{
   "FleetsCollection":[
      {
         "FleetId":2,
         "Nickname":"2007 Ninja ZX6R",
         "PictureFileName":"jvmlfdaq.rkr2.jpg",
         "AverageMpg":43.90925,
         "MaxMpg":47.945
      },
      {
         "FleetId":44,
         "Nickname":"Luminous Neptune",
         "PictureFileName":"ochufm0c.ohm2.png",
         "AverageMpg":29.4285,
         "MaxMpg":30.341
      }
   ]
}

(Note – useful JSON formatter here http://jsonformatter.curiousconcept.com/)

I can interpret this as an object with a property ‘FleetsCollection’ which is a list of objects which have further properties. In fact, if you take your JSON string data you can convert it to a c# class using this online tool http://json2csharp.com/

For our example, the online tool generates,

public class FleetsCollection
{
    public int FleetId { get; set; }
    public string Nickname { get; set; }
    public string PictureFileName { get; set; }
    public double AverageMpg { get; set; }
    public double MaxMpg { get; set; }
}

public class RootObject
{
    public List<FleetsCollection> FleetsCollection { get; set; }
}

Then, we can read the data in using the following code:

var dataContractJsonSerializer = new DataContractJsonSerializer(typeof(RootObject));
RootObject readObject = (RootObject)dataContractJsonSerializer.ReadObject(memoryStream);




Follow

Get every new post delivered to your Inbox.