Configure Automatic Connection
In this procedure, you will learn how to configure your Microsoft .NET and Silverlight clients to connect at startup automatically.
Before You Begin
This procedure is part of Checklist: Build Microsoft .NET and Silverlight Clients Using Kaazing WebSocket Gateway:
- Set Up Your Development Environment
- Interact with Kaazing WebSocket Gateway Using the WebSocket API
- Interact with Kaazing WebSocket Gateway Using the EventSource API
- Interact with Kaazing WebSocket Gateway Using the ByteSocket API
- Configure Automatic Connection
- Secure Your Microsoft .NET and Silverlight Client
- Display Logs for .NET and Silverlight Clients
- Troubleshoot Your Microsoft .NET and Silverlight Clients
Note: Learn about supported browsers, operating systems, and platform versions in the Release Notes.
To Configure Automatic Connection
The following steps show what you must do to connect automatically during startup.
Let's say you have a simple layout like this:
<UserControl x:Class="Test1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Margin="12,12,0,0"> <Grid x:Name="LayoutRoot"> <Button Width="126.498" Height="30" Content="Send" Name="Send" Click="OnButtonClick" Margin="8,36,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"/> <TextBox Foreground="Blue" Background="AntiqueWhite" BorderBrush="Black" BorderThickness="1" Height="24" Width="200" Margin="8,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Test Message" x:Name="Input" TextWrapping="Wrap"/> <TextBlock Height="100.5" HorizontalAlignment="Left" Margin="8,117,0,0" VerticalAlignment="Top" Width="293" Text="" TextWrapping="Wrap" x:Name="Console"/> <Button Height="30" HorizontalAlignment="Left" Margin="160,36,0,0" VerticalAlignment="Top" Width="126" Content="Disconnect" Click="Disconnect_Click" x:Name="Disconnect"/> </Grid> </UserControl>
This basic layout contains a text field and Send and Disconnect buttons.

Your page code may look like this:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Kaazing.HTML5; namespace Test1 { public partial class MainPage : UserControl { #region Private Fields private WebSocket _socket; #endregion Private Fields #region Ctor public MainPage() { InitializeComponent(); Send.IsEnabled = true; Disconnect.IsEnabled = true; _socket = new WebSocket(); _socket.OpenEvent += new OpenEventHandler(OnSocketOpen); _socket.MessageEvent += new MessageEventHandler(OnSocketMessage); _socket.CloseEvent += new CloseEventHandler(OnSocketClose); string location = @"ws://localhost:8001/echo"; _socket.Connect(location); } #endregion Ctor #region Private Methods private void OnSocketMessage(object sender, MessageEventArgs args) { Logger.log("OnSocketMessage"); Console.Text = "Message Received: " + args.Data; } private void OnSocketClose(object sender, CloseEventArgs e) { Logger.log("OnSocketClose"); Console.Text = "Connection Closed"; } private void OnSocketOpen(object sender, OpenEventArgs e) { // This never gets called Logger.log("OnSocketOpen"); Console.Text = "Connection Opened"; Send.IsEnabled = true; Disconnect.IsEnabled = true; } private void OnButtonClick(object sender, RoutedEventArgs e) { try { Console.Text = "Sending Message"; _socket.Send(Input.Text); } catch (Exception ex) { Logger.log(ex.Message); } } private void Disconnect_Click(object sender, RoutedEventArgs e) { _socket.Close(); } #endregion Private Methods } }
You initialize the socket, assign event handlers to the important events, and issue the connect function on _socket. Running this code, you will see that the onSocketMessage function is never called; instead, the onSocketClose is called right away. This call occurs because the client .DLL is not loaded when the code executes.
To solve this, you can add an event handler for the Loaded system event.
- Add the Loaded event and a reference to the eventhandler (UserControlLoaded in this case) to the UserControl, as shown in this example:
<UserControl x:Class="Test1.MainPage" . . . mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Margin="12,12,0,0" Loaded="UserControlLoaded"> . . . </UserControl>
- Remove or comment out the following code:
public MainPage() { InitializeComponent(); Send.IsEnabled = true; Disconnect.IsEnabled = true; /* _socket = new WebSocket(); _socket.OpenEvent += new OpenEventHandler(OnSocketOpen); _socket.MessageEvent += new MessageEventHandler(OnSocketMessage); _socket.CloseEvent += new CloseEventHandler(OnSocketClose); string location = @"ws://localhost:8001/echo"; _socket.Connect(location); */ }
- Add the Loaded eventhandler before the Disconnect_Click, as shown in this example:
private void UserControlLoaded(object sender, RoutedEventArgs e) { _socket = new WebSocket(); _socket.OpenEvent += new OpenEventHandler(OnSocketOpen); _socket.MessageEvent += new MessageEventHandler(OnSocketMessage); _socket.CloseEvent += new CloseEventHandler(OnSocketClose); string location = @"ws://localhost:8001/echo"; _socket.Connect(location); }
Now, the code will instantiate the client socket object and connect automatically at the correct moment in the startup process.
Running from a Local Development Server
By default, Visual Studio runs a Silverlight XAML from the file system, which doesn't currently work with a local Gateway install. You must run it from Visual Studio's localhost. Visual Studio includes a development server that you can run from: http://localhost:54265/ (or an arbitrary port chosen by Visual Studio). Entering this URL into the address bar of a supported browser after you have pressed the start button in the IDE will make this example work as you would expect. You can also specify that the .Web project is your start up project. If you do that, the XAML will automatically start via the server instead of from file://.
In this example, you would right-click on the Test1.Web project in the Solution Explorer window and select Set as Start-up Project, which enables you to debug the project normally. If you don't set the project as start-up and enter the URI manually, you must attach the debugger to a running browser to debug the project.
Next Step
Secure Your Microsoft .NET and Silverlight Client