Creating a chat application using Socket in Silverlight

Gaurav — Thu, 17 Apr 2008 21:12:52 +0000

Here I will explain how to communicate with the server using the Socket class. The socket class allows Asynchronous communication between the client and server. This application will show how to share data in real-time in two different browser windows using Silverlight.

This application will contain two parts:

Server application using Ruby.
Client application using C# in Silverlight.

Creating the server application:

Making a multi-threaded server application in ruby is really easy and that is the reason I chose Ruby to create the server in least amount of time possible.

require 'socket'
  
HOST = 'localhost'
PORT = 4505
  
server = TCPServer.new(HOST, PORT)
  
# array to store all the active connections
sessions = []
while (session = server.accept)
  # push the current session(socket) in the array
  sessions << session
  # initialize a new thead for each connection
  Thread.new(session) do |local_session|
    # each time a client sends some data send it to all the connections
    while(true)
      data = local_session.gets
      sessions.each do |s| 
        begin
          s.puts data
        rescue Errno::ECONNRESET
          # an exception is raised, that means the connection to the client is broken
          sessions.delete(s)
        end
      end
    end
  end
end

Here is the pastie.

Save this file as chat_server.rb

This code is really quite simple and all it is doing is creating a new thread for each client connection and rejecting the invalid ones. Whenever a client sends some data it is propagated to all the clients.

Creating the client application:

This is the difficult part among the two. As I mentioned earlier I will be using the Socket class. The important instance methods of this class are:

ConnectAsync
SendAyns
ReceiveAync

As their names suggest all of them are asynchronous. I am not sure of the reason. May be its because the communication does not block the UI thread and making it a bad experience for the client or may be its because of browser’s limitations.

Also in the beta-1 implementation the Silverlight Socket class only allows connection to 4502 – 4532 port range. I guess this limitation will be removed in the later versions.

Open up Visual Studio 2008 (with Silverlight tools installed. You can also download a trial version of Visual Studio 2008 from here). And create a new project:

Name the application ChatClient and select rest of the default options.

Run the application. Visual Studio will prompt you to enable debugging, click OK to enable debugging and continue.

Add the System.net assembly to add the Socket class to solution.

Now to make a connection to the server we can use the Socket class:

socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
SocketAsyncEventArgs connectEventArgs = new SocketAsyncEventArgs();
connectEventArgs.RemoteEndPoint = IP_END_POINT;
connectEventArgs.Completed += new EventHandler(connectEventArgs_Completed);
socket.ConnectAsync(connectEventArgs);

Here IP_END_POINT is an object of DnsEndPoint class and basically points to the server. I will be showing the code for it later for simplicity.

In the above code I created an instances of Socket class and SocketAsyncEventArgs class. The latter does the event handling for the former. So when the connection is complete it will just ca a event handler and then we can start sending/receiving data to server.

Code for sending data to the server:

sendEventArgs = new SocketAsyncEventArgs();
sendEventArgs.RemoteEndPoint = IP_END_POINT;
  
Listbyte>> l = new Listbyte>>();
l.Add(new ArraySegment<byte>(Encoding.UTF8.GetBytes(sendBox.Text + "\n")));
  
sendEventArgs.BufferList = l;
socket.SendAsync(sendEventArgs);

Socket uses a List to fill the data buffer. I have appended a “\n” in the data so that it is handled properly at the server.

Code to receive data from the server:

void connectEventArgs_Completed(object sender, SocketAsyncEventArgs e)
{
    e.Completed -= new EventHandler(connectEventArgs_Completed);
    e.Completed += new EventHandler(receiveEventArgs_Completed);
    transferBuffer = new byte[BUFFER_SIZE];
    e.SetBuffer(transferBuffer, 0, transferBuffer.Length);
    socket.ReceiveAsync(e);
}
  
void receiveEventArgs_Completed(object sender, SocketAsyncEventArgs e)
{
    String a = Encoding.UTF8.GetString(transferBuffer, e.Offset, e.BytesTransferred);
    SetText(a);
    socket.ReceiveAsync(e);
}

When the connection to the server is complete the client begins to wait for the server to send data. This is done by removing the old event handler an creating a new one to receive the data. Also we need to initialise buffer so that incoming data can be received in it.

That is the basic structure you need to make for Asynchronous data transfer using Socket class.

The full code:

Page.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
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 System.Net.Sockets;
using System.Net;
using System.Text;
  
namespace DeleetThis
{
    public partial class Page : UserControl
    {
        private Socket socket;
        private byte[] transferBuffer;
        private SocketAsyncEventArgs sendEventArgs;
  
        // contants
        private static int BUFFER_SIZE = 500;
        private static int PORT = 4505;
        private static DnsEndPoint IP_END_POINT = new DnsEndPoint(Application.Current.Host.Source.DnsSafeHost, PORT);
  
        public delegate void SetTextCallback(String _text);
  
        // initialize stuff
        public Page()
        {
            InitializeComponent();
            socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
            SocketAsyncEventArgs connectEventArgs = new SocketAsyncEventArgs();
            connectEventArgs.RemoteEndPoint = IP_END_POINT;
            connectEventArgs.Completed += new EventHandler(connectEventArgs_Completed);
            socket.ConnectAsync(connectEventArgs);
        }
  
        // connection complete
        void connectEventArgs_Completed(object sender, SocketAsyncEventArgs e)
        {
            sendEventArgs = new SocketAsyncEventArgs();
            sendEventArgs.RemoteEndPoint = IP_END_POINT;
  
            e.Completed -= new EventHandler(connectEventArgs_Completed);
            e.Completed += new EventHandler(receiveEventArgs_Completed);
            transferBuffer = new byte[BUFFER_SIZE];
            e.SetBuffer(transferBuffer, 0, transferBuffer.Length);
            socket.ReceiveAsync(e);
        }
  
        // incoming data
        void receiveEventArgs_Completed(object sender, SocketAsyncEventArgs e)
        {
            String a = Encoding.UTF8.GetString(transferBuffer, e.Offset, e.BytesTransferred);
            SetText(a);
            socket.ReceiveAsync(e);
        }
  
        // this process is asynchronous so we need to invoke the ui thread to set the received text
        private void SetText(String text)
        {
            if (this.Dispatcher.CheckAccess())
                receiveBox.Text += text;
            else
                this.Dispatcher.BeginInvoke(new SetTextCallback(SetText), text);
        }
  
        // data sending
        private void sendButton_Click(object sender, RoutedEventArgs e)
        {
            Listbyte>> l = new Listbyte>>();
            l.Add(new ArraySegment<byte>(Encoding.UTF8.GetBytes(sendBox.Text + "\n")));
  
            sendEventArgs.BufferList = l;
            socket.SendAsync(sendEventArgs);
        }
    }
}

Here is the pastie.

Page.xaml:

<UserControl x:Class="ChatClient.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="230">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <ScrollViewer Height="200" >
                <TextBlock x:Name="receiveBox"/>
            ScrollViewer>
            <StackPanel Orientation="Horizontal">
                <TextBox x:Name="sendBox" Height="30" Width="365"/>
                <Button x:Name="sendButton" Content="Send" Click="sendButton_Click"/>
            StackPanel>
  
        StackPanel>
    Grid>
UserControl>

Here is the pastie.

Running the application:

Now run this application in two different browser windows and whenever you type in one window the content of both windows should be updated :)

Download the source code:

del.icio.us Tags: C#,ruby,silverlight,socket,visual studio 2008,chat application

Gaurav » chat application

Creating a chat application using Socket in Silverlight

Creating the server application:

Creating the client application:

The full code:

Running the application: