05/06/2015

hello world!

Hello there!

The classic way to get started in a new development Framework is to create an "Hello world". This is a tradition I would like to oblige.

What does it do?

The sample will perform the following steps:

  1. The client app connects to a Stormancer server application.
  2. When the connection process is successful, the server app pushes a message to the client app containing the "hello world!" string.
  3. The client application displays the message.

Creating the server application

You can get the full server application on github

Metadata

First, create a new folder on your development computer that will contain the application code.

With your favorite code editor, create a text file named _app.json in the folder that will contain the metadata required for Stormancer to run your app. Put the following json content in the file:

{
    "host": {
        "version": "1.*",
        "type": "NET45"
    }
}

By doing that, you tell Stormancer that your server application should be started using the latest available NET45 hosting runtime that matches the pattern "1.*".

Remark: If you forget to add an _app.json file to your application, the Platform will select the latest availbe NET45 runtime. You app may work at first, but could break later if a new major version were to introduce breaking changes.

plz give me teh codez!

Now add a new file named "app.cs" to the folder and open it. Paste the following C# code in it:

using Stormancer;
using Stormancer.Core;
using System.Collections.Generic;

namespace Helloworld
{
    public class Startup
    {
        //The runtime calls this method on startup to initialize the server. That's the good place to declare your scene templates.
        public void Run(IAppBuilder builder)
        {
            //Declares a scene template called "hello"
            builder.SceneTemplate("hello", scene =>
            {
                //Adds an handler executed whenever a peer connects to the scene.
                scene.Connected.Add(async peer=>{
                  //Sends the string "hello world!" to the peer that just connected.
                  peer.Send("msg",s=> peer.Serializer().Serialize("hello world!",s), PacketPriority.MEDIUM_PRIORITY, PacketReliability.RELIABLE);
                });
            });
        }
    }
}

Save the file, you are done. This code tells the runtime to add a Scene template called hello that sends to any client that connects to the scene the string "hello world!" on the route msg.

Now, it's time to deploy the application:

To the cloud and beyond!

Go to the Stormancer management portal and create an application named helloworld. Go to the application's détails page by clicking on the app name, and get the git repository url.

Follow now these instructions to deploy the application you just created.

If everything wen well, you should now see a deployment selected in the deployment tab on the application page.

Creating the scene

In the management portal, go to the scene tab of the application page. If the deployment was successful, you should see Something like that:

Scene types : hello 

It means that the Platform recognized your scene Template.

Click now on the Create scene button to create a scene using the hello template. Set the scene as public to allow non authenticated connections to it and name it main.

javascript client

A demonstration client app is available on jsfiddle. It connects to my Stormancer account using the javascript Library available on the download page. Remember that it has a dependency to jQuery for the promise & ajax implémentations.

The code starts by creating a client object from a configuration that targets the helloworld application. Replace the informations provided here by the one displayed in your own application page.

Next it obtains a proxy to the mainpublic scene using the getPublicScene function. The second parameter should be a json object containing custom data that will be associated with the connection on the server. In the sample, we provide an empty string.

Once the proxy is available, we add an Handler for the route msg on which the server will send the hello world! message.

Finally, we connect to the scene using the connect method, which (when the connection is successful) triggers the server Connected event and sends back the hello world string.

You are done! Feel free to play and experiment with the code and see you next time!


No Comments

Post Reply

You must sign in to comment.