Note: This tutorial is fairly extensive, if you are after something shorter please also see our Getting Started and How To Create a Client Server Application In Minutes tutorials.

Note2: This example is included, and has been significantly extended to demonstrate further features, in the examples bundle included in the package downloads.

Before we get started ensure you have Visual Studio 2010 Express or later installed, which should come with .Net 4 or later.

1. Create Visual Studio Project

  • Create a new visual studio solution containing a Visual C# ‘WPF Application‘ project naming it ‘WPFChatExample
  • Right click on the project just created and select ‘Properties‘. Ensure the ‘Target Framework‘ is ‘.NET Framework 4‘ and not ‘.NET Framework 4 Client Profile‘. You should now have something that looks like this.
Freshly created visual studio application named 'WPFChatExample'

Freshly created visual studio application named ‘WPFChatExample’

2. Add NetworkComms .Net DLL to Project

  • The NetworkComms.Net download package contains DLLs for all supported platforms but we are only interested in the Net40 > Release > Complete DLL. Copy this DLL to the same location as the solution we created in step 1.
  • We now need to add a project reference to the NetworkComms .Net DLL we just added. Right click on the ‘WPFChatExample‘ project and select ‘Add Reference…‘. Within the window that opens select the Browse tab and select the DLL we just added.
  • If you expand the ‘References‘ folder within the project you should now see the NetworkComms .Net reference you just added like this:
'WPFChatExample' WPF application containing a reference to the complete NetworkComms .Net DLL.

‘WPFChatExample’ WPF application containing a reference to the complete NetworkComms .Net DLL.

3. Add WPF Elements

  • We need to add the text boxes and buttons that we intend to interact with to the WPF layout. To get started double click the ‘MainWindow.xaml‘ file so that it opens in the main viewer:
The open 'MainWindow.xaml' file showing both 'Design' and 'XAML'.

The open ‘MainWindow.xaml’ file showing both ‘Design’ and ‘XAML’.

  • If you wanted to you could now add each individual text box and button by hand. To save a little time however we have provided a base layout that you can copy and paste. Copy and paste the following code to replace ALL EXISTING code in the XAML view of ‘MainWindow.xaml‘:

  • The design window should now show the equivalent of the XAML you have just pasted from above. This gives us the very basic layout of the chat application:
After Copy and Paste of the example xaml code the design window should now show the basic layout.

After Copy and Paste of the example xaml code the design window should now show the basic layout.

  • Press ‘F5′ on your keyboard to ensure that the project builds successfully (i.e. the Errors List window in Visual studio remains empty). If the project does not build at this point please go back over this tutorial and make sure you have completed all of the necessary steps. If the project does build you should now see the WPF application, although of course, we still need to add all of the functionality.
The WPF chat application example. All of the layout elements have been added but lack any functionality.

The WPF chat application example. All of the layout elements have been added but lack any functionality.

4. Add ChatMessage Wrapper Class

  • The next step is to create a wrapper class for the messages we will be sending and receiving, i.e. a single object we send and receive that contains all necessary information. Right click on the project and select ‘Add‘ > ‘New Item…‘. This should bring up the ‘Add New Item‘ window, a list of options that you can add to the project. Ensure that ‘Class‘ item is selected, and at the bottom of the window enter the name ‘ChatMessage.cs‘. Now click ‘Add‘. The new class file should open automatically and you should now have something like this:
The new class, named 'ChatMessage.cs'. This will be used as the wrapper for the chat messages.

The new class, named ‘ChatMessage.cs’. This will be used as the wrapper for the chat messages.

  • Copy and paste the following code, replacing ALL EXISTING code in the class we just created, ‘ChatMessage.cs‘:

5. Adding Functionality To Code Element of MainWindow.xaml

  • We now turn our attention to the code element of ‘MainWindow.xaml‘. To access the code element right click on ‘MainWindow.xaml‘ and select ‘View Code‘ from the context menu. You should see a code file that contains something like follows, all of the code we are subsequently going to add will be within the ‘MainWindow‘ class:

  • Since we are going to be performing network tasks within this class we need to add the relevant namespace references first. Underneath all of the ‘using System…‘ namespaces references you want to add:

  • Next we are going to add some class variables to help us keep track of the current application state. We want to keep track of:
  1. The most recent messages we have received.
  2. The maximum number of times we will relay a message.
  3. An optional encryption key.
  4. A local index we will use when sending new messages.
  • To track these items add the following code at the start of the class:

  • Next we add the methods which will be used by the WPF GUI. The first two methods can be used to update the Chat and MessageFrom text boxes from any thread:

  • What follows next are five methods that will be attached to elements on the WPF layout in Step 6. They will be used to send our messages, toggle encryption, toggle local server mode and correctly shut everything down when we are finished with the application:

  • Next we add the method that can be used to toggle the local server mode of the application:

  • Next we will create a method that can be executed by NetworkComms .Net when a chat message has been received. We could put whatever we wanted in this method but since we are making a chat application we probably want the method to:
  1. Print the message to the ChatBox text box.
  2. Update the Messages From text box.
  3. Relay the message to other peers.
  • The method that can perform these functions is as follows:

  • NetworkComms .Net has a vast range of features and usage cases. One of those allows you to execute code every time a connection is disconnected. For this example we will create a method that writes a disconnection message to the ChatBox. The method is as follows:

  • The next method  will be used to send any message that we create:

  • The last thing we need to add within the Code Element of ‘MainWindow.xaml‘ is the correct initialisation of NetworkComms .Net. In order to correctly initialise NetworkComms .Net we need to:
  1. Set the default Local Name to our machines hostname.
  2. Trigger the method ‘HandleIncomingMessage‘ when we receive a packet of type ‘ChatMessage‘.
  3. Trigger the method ‘HandleConnectionClosed‘ when an existing connection is closed.
  • We perform these initialisation tasks in the MainWindow class constructor by replacing it with the following code:

6. Add Events To WPF Layout

  • The final step in the application is to add the necessary events so that the buttons and text boxes in the layout can be used to send messages. This is done by editing the XAML of the MainWindow. This is the same XAML edited in step 3 of this tutorial, but to recap, access the XAML by double clicking ‘MainWindow.xaml‘ in the Solution Explorer window.
  • When the application closes we want to run the method Window_Closing. Replace the top section of the XAML which currently looks like this:

with this (note the addition of Closing=”Window_Closing” at the end):

  • We want a message to be sent when we click the ‘Send‘ button. We do this by replacing the line:

with

  • We want the user to be able to press Enter or Return to send a message after typing something in the message box. We do this by replacing the line:

with

  • Next we need to add the event for checking and unchecking the ‘Enable Server’ tick box. We do this by replacing the line:

with

  • Finally we need to add the events for checking and unchecking the ‘Use Encryption‘ tick box. We do this by replacing the line:

with

  • That’s it. We are now ready to see our hard work in action.

7. Test Your WPF Chat Application

  • We’ve finally arrived at the testing phase. We now want to open at least two instances of the WPF Chat Application. To do that we first need to build the project in debug mode (make sure Visual Studio shows ‘Debug‘ in the top menu), either by right clicking on the solution and selecting ‘Build Solution‘ or pressing ‘F6‘ on the keyboard.
  • Now browse to the build location of the application. One way is to right click on the project in Visual Studio and select ‘Open Folder in Windows Explorer‘. Look for a folder called ‘bin‘ and within that ‘Debug‘.
  • You should now see an executable named ‘WPFChatExample.exe‘, double click on this twice to open two instances of the example. Note: When you open the applications you may get a notification from your system firewall. It is important to provide the necessary permissions (see firewall documentation) otherwise the examples will not be able to communicate.
  • Choose which one of the applications will act as a server (designated application A). Check the ‘Enable Server‘ tickbox. That application should now show which IPAddresses and ports are available for connecting:

 

Example output of the completed application after the local server has been enabled.

Example output of the completed application after the local server has been enabled.

 

  • Choose an appropriate server IP address and port (generally 127.0.0.1 or 192.168.*.*) from the output shown in application A and enter this information into the other application (application B).
  • Now enter a message into application B and click send or press enter. The message will now appear on both applications. Once the connection has been established in this fashion a message can now be entered in either application and it will appear on the other.
  • What we have just demonstrated is the most basic connection scenario as follows, here application B selects application A as its server:
The most basic connection configuration. Application B has selected application A as its master.

The most basic connection configuration. Application B has selected application A as its server.

  • We could add another application, labelled C and also specify the server as application A as follows:
The most basic connection configuration. Application B has selected application A as its master. Application C has also selected application A as its master.

Another basic connection configuration. Application B has selected application A as its server. Application C has also selected application A as its server.

  • We could get a little bit more funky because of the relay functionality we added. Instead of application C specifying application A as its server we could set application C to be the server of application A. Once the applications are connected in this fashion entering a message on client C will be relayed via A to B:
A more advanced connection configuration. Application B has selected application A as its master. Application A has selected application C as its master.

A more advanced connection configuration. Application B has selected application A as its server. Application A has selected application C as its server.

  • The last example configuration with three applications is to set them up as a ring. Application B uses application C as its server, application C uses application A as its server and application A uses application B as its server. This configuration works because we have a maximum number of relays per message and use the message history to prevent duplications being written to the chat window:
The most advanced connection configuration using three clients. Application A has selected application B as its master. Application B has selected application C as its master. Application C has selected application A as its master.

The most advanced connection configuration using three clients. Application A has selected application B as its server. Application B has selected application C as its server. Application C has selected application A as its server.

If Everything Worked :-)

  • If you found this article useful or have any ideas as to how we could improve it please leave us a comment below.

If You Have Problems

  1. Ensure you have correctly configured your firewall to allow the necessary traffic.
  2. If you are still have issues please post on our forums and we will be more than happy to help.

For More Information

  1. See our Getting Started or Basic Client Server Application articles.
  2. See our online API Reference which explains what all of the methods do.
  3. Ask any questions on our forums.