Friday, May 15, 2009

Geochat for Silverlight

The Prototype Lab at ESRI has just launched a geo-collaboration control for Silverlight.  The control allows users to chat and exchange information such as graphics.  Here is a live sample.

Geochat for Silverlight

Geochat is implemented in two parts.

  1. Server-side
    A Windows Communication Foundation (WCF) duplex service is created to maintain a connection to Silverlight clients.  The geochat implementation acts as broker between Silverlight clients by forwarding messages to individual (or all) clients.
  2. Client-side
    The Silverlight client is using PollingDuplexHttpBinding to maintain a connection with the server using AJAX polling.  The polling occurs every ten seconds.

The client/server implementation effectively allows the server to push information to the browser.  This is also referred to as Comet.  Source code to both of the client and server projects are provided in the download from the ESRI code gallery.

Building the Server

Compiling and publishing the WCF service is straight forward.  The only prerequisite is Microsoft .NET 3.5 SP1.  If you are publishing the service on Microsoft Windows Vista then you may need to register the “svc” MIME type using the following command.

C:\Windows\Microsoft.NET\Framework\v3.0\Windows Communication Foundation>ServiceModelReg.exe –i

Building the Client

The code gallery only includes the source code to the geochat user control rather than the entire web application.  After adding a reference to the geochat assembly, the steps below will discuss how to configure it and send/receive messages.

At the top of your code page add a using statement for the geochat namespace.

using ESRI.ArcGIS.Chat;

In the your page (or user control) constructor use the ChatEnvironment singleton to set the name of the geochat service and begin listening to incoming messages.

public Page() {

// Url to the geochat service ("service.svc" will be automatically
// appended)
ChatEnvironment.Default.Server = "";

// Add event handler to listen for incoming messages
ChatEnvironment.Default.NoteReceived += new EventHandler<NoteEventArgs>

In the snippet below, geometry is converted to JSON and sent to all other Silverlight clients.

if (ChatEnvironment.Default.IsConnected) {
// Create data message and assign geometry
DataMessage dataMessage = new DataMessage() {
Text = this.GeometryToJson(new MapPoint(10,10)),
Type = typeof(MapPoint).ToString()

// Send data message to all silverlight clients
ChatEnvironment.Default.SendMessage(dataMessage, null);

To send the message to an individual user rather than everyone, replace “null” with a user object.  Use the following property to return a collection of all available users.


The snippet above referenced a method to convert ESRI’s Silverlight geometry into JSON.  Since the message will be ultimately sent down the wire as a SOAP 1.1 message, the JSON string must be enclosed in a CDATA block.

private string GeometryToJson(Geometry geometry) {
MemoryStream memoryStream = new MemoryStream();
DataContractJsonSerializer serializer =
new DataContractJsonSerializer(geometry.GetType());
serializer.WriteObject(memoryStream, geometry);
memoryStream.Position = 0;
StreamReader streamReader = new StreamReader(memoryStream);
string json = streamReader.ReadToEnd();
return string.Format("CDATA[{0}]", json);

Now, let’s add code to receive incoming geometry messages.  Firstly we only want to process DataMessages and ignore other messages types (eg connection, disconnection and text).  The snippet below extracts the geometry from the message as well as the name of the sender.

private void ChatEnvironment_NoteReceived(object sender, NoteEventArgs e) {
if (e.Note.Payload.GetType() == typeof(DataMessage)) {
// Get DataMessage
DataMessage dataMessage = (DataMessage)e.Note.Payload;

// Get Geometry
Geometry geometry = this.JsonToGeometry(dataMessage.Text,

// Who sent this message?
string from = e.Note.From.FriendlyName;

Here is the code for the JsonToGeometry method referenced above.  The code assumes that the incoming message is some sort of ESRI Silverlight geometry and that the JSON string is enclosed in a CDATA block.

private Geometry JsonToGeometry(string json, string type) {
Type t = null;
if (type == typeof(MapPoint).ToString()) { t = typeof(MapPoint); }
else if (type == typeof(Polyline).ToString()) { t = typeof(Polyline); }
else if (type == typeof(Envelope).ToString()) { t = typeof(Envelope); }
else if (type == typeof(Polygon).ToString()) { t = typeof(Polygon); }
else { return null; }

// JSON to Geometry
string json2 = json.Substring(6, json.Length - 7);
Byte[] bytes = Encoding.Unicode.GetBytes(json2);
MemoryStream memoryStream = new MemoryStream(bytes);
DataContractJsonSerializer dataContractJsonSerializer =
new DataContractJsonSerializer(t);
Geometry geometry = dataContractJsonSerializer.ReadObject(memoryStream)
as Geometry;
return geometry;

That concludes the introduction to the geochat user control for Silverlight.  Enjoy!

No comments:

Post a Comment