Map Collaboration with XSockets and ArcGIS for JavaScript Revisited

Made a blog post approximately two years ago on using XSockets.net and ArcGIS for JavaScript, a lot has happened since my blog post, so I thought it could be interesting to revisit the subject.

Creating a XSockets.net solution is done the same way. What's new is the possibility to create a windows service running the XSockets server using Chocolatey. I will not do this in this post, but I like the idea.

Create New Project. Is done the same way as before:

In VS2012 choose New Project

Create a new ASP.Net MVC 4 Web application

Choose empty web project:

Choose Empty template and Razor view engine

We use Nuget as we did before to import the XSockets.net package:

Install-Package XSockets

Successful installation

The project now have resources added for XSockets.Net

What strikes me is that the need for several projects has disappeared. Everything is neatly in the same project.

For the client side I used the same boilerplate show extent example but with newer ArcGIS for Javascript and XSocket Javascript API to make it easier to follow what changes I needed to do.

Add a new html page in the root of the project:

Add New Item

MapClient.html

Now it's time add the sample code:


Don't forget to set the new page to be the start page of the web application, right click the page in the solution explorer and choose start page.

So with the client side done it's time to setup the server side. Create custom Controller (Controller was called handler before):

We do that by scaffolding a new controller:

Scaffold XSocketController DemoController

 The code that gets created should look like this:

DemoController.cs

Add the following code:

Start the web page by choosing Chrome and start in Visual Studio:

Use the drop down in VS2012 to choose the right browser

This should start the web browser showing a map, start an other chrome instance and copy the adress into that browser. If you did all the steps correct, you will be able to pan the extent in one map and the other browser will follow:

Opened the MapClient.html in two browser windows

CodeCamp, Map collaboration using XSockets with ArcGIS For Javascript

This weekend I've been to the XSockets CodeCamp i Sundsvall Sweden. Listening to Magnus Thor and Ulf Björklund talking about XSockets that is a websocket server that can be used to create real time web applications.

Robert Friberg held an interesting talk about liveDB an in-memory database that can be used to speed up development and handle high load applications. Basically hack away in .Net and you don't need any OR-mapper to work with the data storage.

But we did more then just listening, almost the whole Friday night was used to do hands-on coding with XSockets. My group made stunning demos for a real time soccer result live feeds web application. On Saturday I decided to use my GIS knowledge to try something different, so I hacked away on making a realtime map extent update application using ArcGIS for Javascript API. The result can be seen in this youtube clip. I will update this blog post with the details as soon as can, so stay tuned..


Step by step description on how to set up the project:

First create a project in VS2010. I create a MVC3 web project:

Create using empty template:

Use NuGet to get XSockets package:

>Install-Package XSockets

It adds resources to our project and create two projects for the XSockets server.

Create a html page in the root of the web application project:

I copy some boilerplate code from the show extent sample to the html page replacing the default code and added the web sockets code, so add the code below into your file:






Add a new handler using Scaffolding by writing:

>Scaffold XSocketHandler MyDemoHandler MyDemoClass

This creates a new strongly typed XSocketHandler in the XSocketHandler project:

Add code that returns the extent back to the other clients:


Do rebuild solution and check so there are no build errors.

Start the XMaxiSocketServer by right clicking the project and choose:
Debug | Start new instance

Choose allow when firewall ask this:

Open the MapClient.html page by right clicking the file choosing:
View in browser (should work if you have a web socket enabled browser Crome/Safari)

Answer no on the question:

And yes on the question:

Copy the address and start a new browser, when panning and zooming the maps in one browser it  should follow on the other browser, see youtube clip.