iNetwork Workshop

This page contains information that will quickly help you get started using iNetwork. It has been designed as a 30 minute workshop taught October 15th and October 17th, 2012 by David Ledo.

Slides and Skeletons

  • Download Workshop Slides Here
  • Download Workshop Skeleton Files Here
  • An iNetwork Relay Server (that resends all messages to every client) can be downloaded Here
back to top

Code Templates:

Visual Studio provides several features for code reuse, one very useful one is code templates. Libraries contain a set of lines of code that will always repeat (such as when initializing). Our installer provides a template for both clients and servers. For more information, read here.

The templates can be run, and you will notice that once you run the server, all clients connected will appear on the client list. The server will also display the messages sent or received. This will provide you and anyone a quick start on your networking project!

Code Sample #1: Basic Chat Application

What's in the skeleton solution?

The solution contains 2 Projects:

  • Chat Server: The chat server is the exact same as a template file.
  • Chat Client: The client code. It has a few additions from the template:
    • A textbox to enter the user name
    • A textbox will all chat messages received
    • A textbox to enter the message you wish to send (and also an event handler corresponding to pressing enter)
    • A send button (and also an event handler corresponding to clicking the button)

Server Code:

There is only one piece to change in the server code. Go to the function OnMessageReceived. we will check to see if we receive a message with the name "ChatMessage", if so, we broadcast it to all the clients.

case "ChatMessage":
this._server.BroadcastMessage(msg);
break;

Client Code

There is a blank function called SendMessage. This function is called whenever the user presses enter while typing a chat message or when the send button is pressed. In this function we will add a message to send.

Message message = new Message("ChatMessage");
message.AddField("UserName", this.userNameTextbox.Text);
message.AddField("Content", this.currentMessage.Text);
this._connection.SendMessage(message);
// clear textbox
this.currentMessage.Text = "";

Note that the last line is exclusively to clear the text box.

Now we want to look at OnMessageReceived. Again, the function is very similar to the server, we will add a case for chat messages.

case "ChatMessage":
    string user = msg.GetStringField("UserName");
    string content = msg.GetStringField("Content");
    string message = user + ": " + content + "\n";
    this.Dispatcher.Invoke(
        new Action(
            delegate()
            {
                this.chatMessages.Text += message;
            }));

    break;

Be aware of the invocation to the dispatcher. It is necessary to make changes to the UI thread (i.e. modifying the textbox).

back to top

Code Sample #2: Synchronized Slider

What this solution does:

This example has two sliders, one that can be controlled only by the client and one that can be controlled only by the server. This is used to exemplify communications between both client and server, and can be easily extended to a more complex application.

What's in the skeleton solution?

The solution contains 2 Projects:

  • Chat Server: The chat server is the for the most part, the same as a template file. It only adds:
    • A slider that belongs to the server (enabled)
    • A slider that belongs to the client (disabled)
  • Chat Client: The client code. It has a few additions from the template:
    • A slider that belongs to the server (disabled)
    • A slider that belongs to the client (enabled)

Server Code:

The first thing we want to fill in is the event handler when our server slider changes:

void OnSliderChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    Message message = new Message("ServerSlider");
    message.AddField("Value", this.serverSlider.Value);
    this._server.BroadcastMessage(message);
}

Here, we broadcast to the client that the slider has changed position.

The next thing we want to do is know when we receive information from the client, so we go to OnMessageReceived retrieve the message and get the value of the slider:

case "ClientSlider":
    double value = msg.GetDoubleField("Value");
    this.Dispatcher.Invoke(
        new Action(
            delegate()
            {
                this.clientSlider.Value = value;
            }));
    break;

Client Code:

The Client is almost the exact same, just remember that we are working with the opposite slider, and that instead of broadcasting, we send messages to the server.

First, check when the client slider changes value and send the message to the server:

void OnSliderChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    Message message = new Message("ClientSlider");
    message.AddField("Value", this.clientSlider.Value);
    this._connection.SendMessage(message);
}

Next, we go to our event: OnMessageReceived and add the case for the server slider having been modified:

case "ServerSlider":
    double value = msg.GetDoubleField("Value");
    this.Dispatcher.Invoke(
        new Action(
            delegate()
            {
                this.serverSlider.Value = value;
            }));
    break;

At first glance it looks like this example doesn't illustrate much, however it shows a communication that happened on both client and server.

back to top

Full Samples

Download full samples here