3
Feb
0

Silverlight – Ressources to create a Chat very easily in Silverlight/C#

All you need to create a TCP/IP chat in Silverlight using socket. If you want more details about the server and the socket client please refer to the previous post.

Security Server

Please refere to this post to download and understand the security server.

Broadcast TCP/IP Server

Download the TCP Server, and unzip it. You will have an .exe that is tcp/ip server. Just execute it and this server will simply broadcast every message it receives to each clients connected.

The connexion port is : 4533

A TCP/IP socket client

I developed a TCP IP Socket Client Library, just inlcude the dll in your project : SocketClient.

Tcp Client in Silverlight

Create a silverlight project. You need to create a Website in the same time or execute the project on a server (apache,IIS) beacause you must have “localhost” or a correct url!!!

We directly put every thing in the MainPage (but you can change that if you want).


<UserControl x:Class="TCPChat.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">
 <Grid x:Name="LayoutRoot">
 <ListBox x:Name="Chat" Margin="8,24,9,38" Background="#7FFFFFFF"/>
 <TextBox x:Name="InputForm" Height="26" Margin="8,0,9,11" VerticalAlignment="Bottom" TextWrapping="Wrap" Cursor="IBeam" Background="#7FFFFFFF"/>
 <TextBlock x:Name="Title" Height="30" Width="262" FontSize="24" TextWrapping="Wrap" Foreground="Black" HorizontalAlignment="Left" Margin="8,-4,0,0" VerticalAlignment="Top"><Run Text="Ch"/><Run Text="at"/><Run Text="BoX"/></TextBlock>
 <TextBlock x:Name="LoginText" Height="20" Width="173" FontSize="13.333" TextWrapping="Wrap" Text="Login : " TextAlignment="Right" Foreground="Black" HorizontalAlignment="Right" Margin="0,6,9,0" VerticalAlignment="Top"/>

 </Grid>
</UserControl>

The MainPage.xaml.cs then is like this :

public partial class MainPage : UserControl
 {
 // create a random login
 string Login = string.Format("guest-{0:000}", (new Random()).Next(999));
 // we need a client
 SocketClient.Client Client;

 public MainPage()
 {
 InitializeComponent();

 Client = new SocketClient.Client();

 this.Loaded += new RoutedEventHandler(MainPage_Loaded);
 }

 void MainPage_Loaded(object sender, RoutedEventArgs e)
 {
 Client.NoticeConnected += new SocketClient.Client.Connected(Client_NoticeConnected);
 Client.NoticeError += new SocketClient.Client.ErrorHappen(Client_NoticeError);

 CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
 KeyDown += new KeyEventHandler(MainPage_KeyDown);

 Chat.Items.Add("Welcome to BoOga Chat V1.2");
 Chat.Items.Add("");

 LoginText.Text += Login;

 Client.Connect(4533);
 }

 void MainPage_KeyDown(object sender, KeyEventArgs e)
 {
 if (e.Key == Key.Enter && InputForm.Text.Length != 0)
 {
 Client.Send_Message(string.Format("[{2}] {0} : {1}", Login, InputForm.Text,DateTime.Now.ToString("HH:mm")));
 InputForm.Text = string.Empty;

 }
 }

 void CompositionTarget_Rendering(object sender, EventArgs e)
 {
 if (Client.PacketManager.IsPacketAvailable())
 {
 Chat.Items.Insert(Chat.Items.Count - 1, Client.PacketManager.DequeuePacket());
 Chat.ScrollIntoView(Chat.Items[Chat.Items.Count - 1]);
 }
 Chat.SelectedIndex = Chat.Items.Count - 2;

 }

 void Client_NoticeError(string error)
 {
 Dispatcher.BeginInvoke(() =>
 {

 Chat.Items.Insert(Chat.Items.Count - 1, error);
 Chat.ScrollIntoView(Chat.Items[Chat.Items.Count - 1]);
 Chat.SelectedIndex = Chat.Items.Count - 2;
 });
 }

 void Client_NoticeConnected()
 {
 Dispatcher.BeginInvoke(() =>
 {

 Chat.Items.Insert(Chat.Items.Count - 1, "You are connected");
 Chat.ScrollIntoView(Chat.Items[Chat.Items.Count - 1]);
 Chat.SelectedIndex = Chat.Items.Count - 2;
 });
 }
 }

You can download the project here : TCPChat.

Execute every things

Execute the two servers (tcp/ip,security) and then launch the silverlight project.

Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.

Comments are closed.

Celadon theme by the Themes Boutique