source code bean http://sourcecodebean.com thoughts and ideas from a .net developer Fri, 27 Jan 2012 20:36:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Node.js: Callbacks are polluting your code http://sourcecodebean.com/archives/callbacks-are-polluting-your-code/1488 http://sourcecodebean.com/archives/callbacks-are-polluting-your-code/1488#comments Wed, 25 Jan 2012 18:27:05 +0000 Peter http://sourcecodebean.com/?p=1488 I have been hacking on a project in Node.js/Express.js for some time now. I am really impressed by how fast it is to code and prototype in Node, not much gets in your way. However, there is one thing I am still struggling with, the callback model of Node.js applications. It is not that it is conceptually hard to understand or use, but i feel that it keeps me from writing clean code.

Let’s imagine that we are writing a small nonsense program. The program receives a post, create some variable x, if some condition is true we call an async method to get some result and assign it to x.result. In the end we want to save x (also async). This would probably be my first attempt in node:
 

  1. app.post(‘/someurl’, function(req, res) {
  2. var x = {..}
  3.  
  4. if (some contidion) {
  5.   someOperation(function(err, result)) {
  6.     x.result = result
  7.     x.save(function(err, result) {
  8.        if (err) next(err)
  9.        res.redirect(url)
  10.     })
  11.   })
  12. } else {
  13.   x.save(function(err, result) {
  14.     if (err) next(err)
  15.     res.redirect(‘/’)
  16.   }
  17. }

 

(Edit: To clarify, both someOperation and save is doing some kind of I/O)

So is this clean code? In my opinion it is not. One problem is that we have the save code in two places. Another is that the code is not very easy to read and understand (remember this is a very simple program and so should the code), but it is not. Sure we could move it to a separate function, or refactor it in some other way, that would help some, but if we are still saving in two places, or the code is not crystal clear, we are not really addressing the problem.

Let’s instead pretend that we are using synchronous methods (which of course would be a very bad thing in Node.js, so don’t do it) and save are methods that would block:
 

  1. app.post(‘/someurl’, function(req) {
  2. var x = {..}
  3.  
  4. if (some contidion) {
  5.   x.result = someOperation() //synchronous
  6. }
  7.  
  8. x.save() // synchronous
  9. return Redirect(‘/’)

 
To me this is much cleaner and easier to read, saving is only done in one place and the intent of the code is very clear. But why is it so much easier to read? Being synchronous? I wouldn’t say so. The reason is because we do not have to deal with verbose callbacks. In my opinion callbacks are polluting the code. So now you are probably thinking, how can he be programming in Node if he doesn’t like using callbacks? I would say that, at least for the small applications i have build on Node so far, the benefits of simplicity and development speed on Node has totally justified using Node. Even with all the horrible callbacks :) However, in a larger application I am not so sure, it would be very interesting to try out.

So is there anyway we can get rid of the verbose callback syntax? Yes, if some modifications were made to Javascript. But Javascript as a language is not really evolving that fast, so in the meantime it could probably be implemented in a language that compiles to Javascript, like CoffeScript. What we want to do is to be able to do is asynchronicity, but without callbacks. In C# 5 there is a great solution to this problem, the async/await keywords. By using async/await the application could be implemented something like this (pseudo code warning again):
 

  1. private async Task<Redirect> Post(req)
  2. {
  3.   var x = new …;
  4.  
  5.   if (some contidion) {
  6.     x.result = await someAsyncOperation();
  7.   }
  8.  
  9.   await x.save()
  10.  
  11.   return return new Redirect(‘/’);
  12. }

 
In short, async tells the compiler that the above method is asynchronous and await will suspend execution of the method until someAsyncOperation is done.

So the above example behaves in exactly the same way as the first example, but with the benefits of the second. In the background a lot of magic is used to construct this behavior, but this is something that the compiler will take care of for us and we don’t have to pollute our code with.

If something like this would be available for Javascript I think it would really make life a lot easier for a lot of Node.js developers. Maybe there is a good solution to this and I am not aware of it (I am far from a Javascript or Node.js expert), if so please enlighten me!

How do you handle flow control in your Node.js applications? How would you have written the example? Any Node.js magic I am missing?

]]> http://sourcecodebean.com/archives/callbacks-are-polluting-your-code/1488/feed 31 MongoDB, C# and Mono http://sourcecodebean.com/archives/mongodb-c-and-mono/1408 http://sourcecodebean.com/archives/mongodb-c-and-mono/1408#comments Wed, 11 Jan 2012 18:53:48 +0000 Peter http://sourcecodebean.com/?p=1408 MongoDB is one of the many free open source NoSQL databases that exist today. I wanted to try out how well the official drivers for C# worked when using Mono.

On the MongoDB web site they have pre built binaries of MongoDB for almost every platform, i grabbed the 64 bit binary for OSX. No installation is required, just unzip the file and run the “mongod” binary from the directory. There is also a binary called “mongo”, this is the mongo interactive shell which is very useful.

The C# drivers are available, both in binary form and as source, from the C# language center. To get started I fired up MonoDevelop 2.8 running on Mono 2.10.8:



MonoDevelop has matured a lot since I used it the first time. It is still not as good as Visual Studio, but it is getting there. What takes most time to get used to is the totally different set of shortcuts, and the lack of all ReSharper magic.

Let me break down a simple console application example on how to use MongoDB using the official driver from 10gen:

  1.  
  2.  
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Linq;
  6. using MongoDB.Bson;
  7. using MongoDB.Driver;
  8. using MongoDB.Driver.Builders;
  9.  
  10. namespace MongoDbTest
  11. {
  12.   public class Article
  13.   {
  14.     public MongoDB.Bson.ObjectId id { get; set; }
  15.     public string title { get; set; }
  16.     public string status { get; set; }
  17.  
  18.     public string[] tags { get; set; } 
  19.   }
  20.        
  21.   class MainClass
  22.   {
  23.     public static void Main (string[] args)
  24.     {
  25.       // Connect to the database and get a colleciton
  26.       MongoServer server = MongoServer.Create ("mongodb://localhost");
  27.       MongoDatabase db = server.GetDatabase ("mongodb-tutorial");
  28.                        
  29.       // Get an article collection
  30.       MongoCollection<BsonDocument> articles = db.GetCollection<BsonDocument> ("articles");
  31.                        
  32.       // Empty the collection (so all runs of this program will result in the same output)
  33.       articles.RemoveAll ();
  34.  
  35.  
  36.       //               
  37.       // Create two articles
  38.       //
  39.       articles.Save (new BsonDocument
  40.       {
  41.         {"title", "A MongoDB article"},
  42.         {"status", "published"},
  43.         {"tags", new BsonArray { "c#", "mongodb" }}     
  44.       });
  45.                        
  46.       articles.Save (new BsonDocument
  47.       {
  48.         {"title", "A Mono article"},
  49.         {"status", "draft"},
  50.         {"tags", new BsonArray { "c#", "mono" }}       
  51.       });              
  52.  

If you type this in the MongoDB shell, you will see that the following articles are stored in the database:

> db.articles.find()
        {
          "_id" : ObjectId("4f097f8e74b5b343b97f56a7"),
          "title" : "A MongoDB article",
          "status" : "published",
          "tags" : [ "c#", "mongodb" ]
        }

        {
          "_id" : ObjectId("4f097f8e74b5b343b97f56a8"),
          "title" :
          "A Mono article",
          "status" : "draft",
          "tags" : [ "c#", "mono" ]
       }
  1.        
  2.      // Find and print the first article
  3.       BsonDocument firstArticle = articles.FindOne ();
  4.      
  5.       PrintArticle ( // Access the properties using indexing and then casting using the .As*
  6.         firstArticle["_id"].AsObjectId,
  7.         firstArticle["title"].AsString,
  8.         firstArticle["status"].AsString,
  9.         (firstArticle["tags"].AsBsonArray).Select (x => x.AsString));          
  10.      
  11.  
  12.       //
  13.       // Typed collections                     
  14.       //
  15.  
  16.       // Using indexing and the .As* operations is not that convenient. A better way
  17.       // is to use a typed collection. Earlier we defined a Article class, lets use it:
  18.       MongoCollection<Article> typedArticles = db.GetCollection<Article> ("articles");
  19.       Article typedArticle = typedArticles.FindOneAs<Article> ();
  20.      
  21.       PrintArticle (typedArticle.id, typedArticle.title,
  22.         typedArticle.status, typedArticle.tags);
  23.                        
  24.       // Save a typed article
  25.       typedArticles.Save (new Article {
  26.                                 title = "An article about MonoDevelop",
  27.                                 status = "published",
  28.                                 tags = new [] {"c#", "mono", "mono-develop"},
  29.                         });
  30.  
  31.  
  32.       //
  33.       // Querying
  34.       //
  35.                
  36.       // Find article with status draft
  37.       Article draftArticle = typedArticles
  38.         .FindOneAs<Article> (Query.EQ ("status", "draft"));
  39.      
  40.       PrintArticle (draftArticle.id, draftArticle.title,
  41.         draftArticle.status, draftArticle.tags);
  42.                        
  43.  
  44.       //
  45.       // Updating
  46.       //
  47.                
  48.       // Lets update the draft article and set status published
  49.       Console.WriteLine ("Nr of published articles before update:"
  50.                          + typedArticles.Find (Query.EQ ("status", "published")).Count ());
  51.                          
  52.       typedArticles.Update (
  53.         new QueryDocument { { "_id", draftArticle.id } },
  54.         new UpdateDocument { { "$set", new BsonDocument ("status", "published") }
  55.         // $set is atomic
  56.       });
  57.                
  58.       Console.WriteLine ("Nr of pubhlished articles after update:"
  59.                          + typedArticles.Find (Query.EQ ("status", "published")).Count ());
  60.                
  61.      
  62.       //
  63.       // MapReduce
  64.       //
  65.                
  66.       // This will count the number of times a tag has been used by using MapReduce
  67.       var map =
  68.         "function() {" +
  69.         "    this.tags.forEach(function(t) {" + // Iterate all the tags and
  70.         "        emit(t, { count : 1 }); " +    // emit the tag name and initial count
  71.         "    })" +
  72.         "}";
  73.                        
  74.       var reduce =
  75.         "function(key, emits) {" + // Reduce by tag name and summarize the result
  76.         "    total = 0;" +
  77.         "    for (var i in emits) {" +
  78.         "        total += emits[i].count;" +
  79.         "    }" +
  80.         "    return { count : total };" +
  81.         "}";
  82.  
  83.  
  84.       Console.WriteLine ("MapReduce result:");         
  85.       var mr = typedArticles.MapReduce (map, reduce);
  86.       foreach (var document in mr.GetResults()) {
  87.         Console.WriteLine (document.ToJson ());
  88.       }                
  89.     }
  90.                
  91.     public static void PrintArticle (ObjectId id, string title,
  92.       string status, IEnumerable<string> tags)
  93.     {
  94.       Console.WriteLine ("id: " + id + ", title: " + title);
  95.       Console.WriteLine ("- tags: " + string.Join (", ", tags));
  96.     }
  97.   }
  98. }
  99.  

Output from the program:

id: 4f0989fc74b5b3458ae38105, title: A MongoDB article
- tags: c#, mongodb
id: 4f0989fc74b5b3458ae38105, title: A MongoDB article
- tags: c#, mongodb
id: 4f0989fc74b5b3458ae38106, title: A Mono article
- tags: c#, mono
Nr of pubhlished articles before update:2
Nr of pubhlished articles after update:3
MapReduce result:
{ “_id” : “c#”, “value” : { “count” : 3.0 } }
{ “_id” : “mongodb”, “value” : { “count” : 1.0 } }
{ “_id” : “mono”, “value” : { “count” : 2.0 } }
{ “_id” : “mono-develop”, “value” : { “count” : 1.0 } }

Using the C# driver for MongoDB, is as you can see, very straight forward. Usually when I run applications on Mono I make sure to build all libraries using the Mono compiler, to make sure the Microsoft compiler have not used any optimizations that is not supported under Mono (I have run into this issue in the past). However, in this case the .NET binaries on the MongoDB site seems to work just fine under Mono. I also downloaded the MongoDB C# driver source and build them using MonoDevelop without any problems.

One improvement I would like to see is LINQ support in the driver. It would be so much more convenient to be able to use LINQ and strongly typed objects to query the database or create MapReduce-functions.

]]> http://sourcecodebean.com/archives/mongodb-c-and-mono/1408/feed 0 Platform as a Service vs Infrastructure as a Service http://sourcecodebean.com/archives/platform-as-a-service-vs-infrastructure-as-a-service/1379 http://sourcecodebean.com/archives/platform-as-a-service-vs-infrastructure-as-a-service/1379#comments Fri, 06 Jan 2012 11:22:31 +0000 Peter http://sourcecodebean.com/?p=1379 This week I attended a tech talk about cloud computing and more in general about Microsoft Azure. It got me thinking a bit regarding PaaS vs IaaS (= virtual servers). Let me give you my thoughts.

PaaS – The good

No servers

You do not have to deal with servers, virtual or physical. You work with resources.

No software upgrades

No OS of software upgrades.

Easy scaling

Scaling your infrastructure is already taken care of for you. You just need to make sure you follow the guide lines for developing scaleable applications on that platform.

PaaS – The bad

Limits your software stack

You might not be able to pick the best suited application server/web server/caching solution/database/other great software for your application. You are often limited in some way to what is provided by the PaaS.

Portability and lock in

Several of the PaaS solutions today require you to develop for that platform, for example Microsoft Azure and Google AppEngine. If you want to move your application anywhere else, you are out of luck. There is only one provider – so then you will have to rewrite your application (or at least parts of it), to be able to run it somewhere else. If you are using services provided by the PaaS that is not available somewhere else, for example Azure SQL Server or Googles Bigtable database, it might get even harder.

Pricing can be confusing

Can be hard to estimate how much running your application will cost. Microsoft Azure is a good example of a confusing price model.

IaaS – The good

Flexibility

Full control over your software stack, if you want to switch to a more cutting edge web server or cashing solution, go ahead.

Portability

If you need, it is easy to move to another provider of IaaS, to a private cloud or even to physical servers.

Easier to estimate your cost

Most PaaS you pay per computing hour of each virtual server, per GB of stored and transfered data.

IaaS – The bad

Administration

You will need sysadmins to manage your servers, just like normal physical servers

Scaling

You will have to build a scaling infrastructure on your own.

 

Conclusion

The PaaS idea is great, but it means giving up too much control and flexibility over your application, and what is worst - it locks you into a provider. I know that Microsoft is working towards enabling private Azure hosting, this would allow you to host your Azure application in your private company Azure cloud, or with Microsoft, or other providers. I hope other providers move in this direction as well. Private PaaS hosting would allow us to develop our application and run it anywhere, but with IaaS we can already do this today!

To conclude things, I might be old school, but I still prefer IaaS to PaaS.

]]> http://sourcecodebean.com/archives/platform-as-a-service-vs-infrastructure-as-a-service/1379/feed 1 String interning in C# http://sourcecodebean.com/archives/string-interning-in-c/1367 http://sourcecodebean.com/archives/string-interning-in-c/1367#comments Wed, 07 Dec 2011 11:15:33 +0000 Peter http://sourcecodebean.com/?p=1367 Last week a coworker sent me an interesting piece of code:

  1.  
  2. const string a = "";
  3. const string b = "";
  4. const string c = "hello";
  5. const string d = "hello";
  6.  
  7. Console.WriteLine(ReferenceEquals(string.Empty, string.Empty)
  8.   ? "Not so surprising…"
  9.   : "Oh, the humanity!");
  10.  
  11. Console.WriteLine(ReferenceEquals(a, string.Empty)
  12.   ? "But I thought string was a reference type!"
  13.   : "Seems fair…");
  14.  
  15. Console.WriteLine(ReferenceEquals(a, b)
  16.   ? " But I thought string was a reference type!"
  17.   : " Seems fair…");
  18.  
  19. Console.WriteLine(ReferenceEquals(c, d)
  20.   ? " But I thought string was a reference type!"
  21.   : " Seems fair…");
  22.  

Running the program will, maybe a bit surprising, produce:

Not so surprising…
But I thought string was a reference type!
But I thought string was a reference type!
But I thought string was a reference type!

The reason to this is what is called String interning. The CLR basically holds a hashmap of all the strings in the program (edit: string literals), one entry per unique string. So two identical strings will always have the same reference even though they are defined in different places. String interning is mainly used to speed up string comparisons (no need to check char by char if they are identical, if they have the same reference they are equal), but also to reduce the memory footprint of the application.

Read more about string interning:
http://aspadvice.com/blogs/from_net_geeks_desk/archive/2008/12/25/String-Interning-in-C_2300_.aspx
http://en.wikipedia.org/wiki/String_interning

]]> http://sourcecodebean.com/archives/string-interning-in-c/1367/feed 1 Migrating from WordPress to Orchard CMS http://sourcecodebean.com/archives/migrating-from-wordpress-to-orchard-cms/1358 http://sourcecodebean.com/archives/migrating-from-wordpress-to-orchard-cms/1358#comments Sun, 27 Nov 2011 15:18:10 +0000 Peter http://sourcecodebean.com/?p=1358 I have been working on migrating one of my WordPress sites to a .NET CMS called Orchard. WordPress is great for blogging, but when it comes to extending the functionality, i much rather work with a .NET based CMS then WordPress. Orchard CMS is based on ASP.NET MVC3, Razor, NHibernate and a lot of other .NET goodies.

I was surprised to find that there was no import from WordPress import functionality in Orchard, so I created a module that will read the wordpress export xml and create blog posts in Orchard. The module can be found on GitHub:

https://github.com/moberg/WordpressImport

To use it, first create an export file from WordPress:

Then browse WordPress Import in the OrchardAdmin interface, select which blog you want to import the posts to and pick the export xml file:

The URLs for the posts will be kept. WordPress categories are converted to tags in Orchard.

Let me know if you run into any issues.

]]> http://sourcecodebean.com/archives/migrating-from-wordpress-to-orchard-cms/1358/feed 5 SignalRChat – Using RxJS to add live notificaitons http://sourcecodebean.com/archives/signalrchat-using-rxjs-to-add-live-notificaitons/1321 http://sourcecodebean.com/archives/signalrchat-using-rxjs-to-add-live-notificaitons/1321#comments Mon, 24 Oct 2011 17:25:14 +0000 Peter http://sourcecodebean.com/?p=1321 I have been playing around a little with Reactive Extensions for javascript and must say that I am really impressed. RxJS a port of the .NET based version which is, as they describe it on their site, “a library to compose asynchronous and event-based programs using observable collections and LINQ-style query operators.“. So what does this mean? Let me give you an example.


I wanted to add a live notification function to the chat, as soon as someone is typing, three dots should appear next to the user’s name. This means that as soon as the user starts we need to send a message to the server, this message is then broadcasted to all the connected clients. To not flood the server and the users, maximum one message per second should be sent.

Keydown – time since last message >= 1 second, or this is the first keydown in the sequence => send message
Keydown – time since last message < 1 second => do nothing

There is a built in method called Throttle that does almost this, we could use it, but then the first keystroke would get delayed and I did not want this. So being a beginner at RX I struggled for a while trying to get to where I wanted. I came up with a solution that did what it I wanted, but it was not so elegant. Then I found this post on StackOverflow, with a solution by Sergey Aldoukhov that solved the problem in a very elegant way, so I just decided to use it instead. Sergey had created an extension method called OneInTime, this is the code:

  1. Rx.Observable.prototype.OneInTime = function (delay) {
  2.     return this
  3.         .Take(1)
  4.         .Merge(Rx.Observable.Empty().Delay(delay))
  5.         .Repeat();
  6. };

So what does this mean? Take(1) is the simple part, we take 1 event from the stream. The merge expression is used to merge multiple IObservable streams into single IObservable stream. Each value on the source streams is projected into the result stream until all source streams complete. The Repeat method with no argument will repeatedly sub­scribe to the same observable collection indefinitely. So by taking one, merging with the delayed empty stream and then calling Repeat(), we take one event from the stream, and then skips all the events during the next second. After one second we repeat. Exactly what we wanted to achieve!

And this is how I would use it in the chat (#msg is the text input):

  1.  
  2. $("#msg").toObservable("keypress") // Create an observable from the keypress event
  3.   .OneInTime(1000)
  4.   .Subscribe(function () { chat.userTyping(); });
  5.  

Pretty neat right?

The code is live at http://signalrchat.apphb.com/ and you can find the source on GitHub.

]]> http://sourcecodebean.com/archives/signalrchat-using-rxjs-to-add-live-notificaitons/1321/feed 1 Updated version of SignalRChat http://sourcecodebean.com/archives/updated-version-of-signalrchat/1315 http://sourcecodebean.com/archives/updated-version-of-signalrchat/1315#comments Fri, 07 Oct 2011 08:10:55 +0000 Peter http://sourcecodebean.com/?p=1315 Yesterday I uploaded a slightly updated version of the test application I have built using SignalR. Besides from looking much better, it now uses the high level Hubs API (instead of the connection API) that SignalR provides.

You find it here: http://signalrchat.apphb.com/

And you can find the source on GitHub: http://github.com/moberg/SignalRChat

]]> http://sourcecodebean.com/archives/updated-version-of-signalrchat/1315/feed 0 SignalR – Real time web for .NET http://sourcecodebean.com/archives/signalr-real-time-web-for-net/1297 http://sourcecodebean.com/archives/signalr-real-time-web-for-net/1297#comments Mon, 26 Sep 2011 21:17:28 +0000 Peter http://sourcecodebean.com/?p=1297 SignalR is a library for .NET to help build real time web applications, in a way it is quite similar to Socket.IO on Node.js. It consists of three main parts:

  • SignalR.Server – .NET code running on IIS
  • SignalR.Js – A SignalR client in javascript
  • SignalR.Client – A SignalR client in .NET. Useful for communicating with a SignalR server from, for example, a Windows Phone application.

SignalR is using long polling as a method to keep its http connections open. In the future support for WebSockets is going to be added as well (a guess would be when .NET 4.5/IIS8 is released, it will have support for WebSockets).

Let me show you how simple it is to create a chat server. First start Visual Studio and create a ASP.NET MVC3 application. When you have created your project you want to add SignalR from NuGet, so open up the NuGet manager and search for SignalR. You need the SignalR.Server and SignalR.Js packages.


When SignalR has installed we need to create the actual server, so lets add a new class, MyConnection. This class will handle the asynchronous communication with the clients:

  1.  
  2. using System;
  3. using System.Web.Script.Serialization;
  4. using SignalR;
  5. using System.Threading.Tasks;
  6.  
  7. namespace SignalRTest
  8. {
  9.     public class MyConnection : PersistentConnection
  10.     {
  11.         protected override Task OnReceivedAsync(string clientId, string jsonData)
  12.         {
  13.             // Deserialize json string
  14.             var data = new JavaScriptSerializer()
  15.                 .Deserialize(jsonData, typeof(EventData)) as EventData;
  16.  
  17.             // Broadcast data to all clients
  18.             return Connection.Broadcast(string.Format("{0} {1}: {2}",
  19.                 DateTime.Now.ToShortTimeString(), data.ClientName, data.Message));
  20.         }
  21.     }
  22.  
  23.     public class EventData
  24.     {
  25.         public string ClientName { get; set; }
  26.         public string Message { get; set; }
  27.     }
  28. }
  29.  

To route the traffic to MyConnection we need to modify Global.asax slightly:

  1.  
  2. public static void RegisterRoutes(RouteCollection routes)
  3. {
  4.     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  5.  
  6.     routes.MapConnection<MyConnection>("echo", "echo/{*operation}");
  7.            
  8.     routes.MapRoute(
  9.         "Default", // Route name
  10.         "{controller}/{action}/{id}", // URL with parameters
  11.         new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
  12.     );
  13. }
  14.  

And the last part, the UI. Put this into your Home/Index.cshtml view:

  1.  
  2. <h2 id="subtitle">Join the chat</h2>
  3.     <div>
  4.         <script type="text/javascript">
  5.             $(function () {
  6.                 var connection = $.connection(‘echo’);
  7.                 var clientName = ”;
  8.  
  9.                 var send = function () {
  10.                     if ($(‘#msg’).val() !== ”) {
  11.                         connection.send("{Message: ‘"
  12.                             + $(‘#msg’).val()
  13.                             + "’, ClientName: ‘"
  14.                             + clientName + "’}");
  15.                         $("#msg").val(”);
  16.                     }
  17.                 };
  18.  
  19.                 var startChatting = function () {
  20.                     if ($(‘#name’).val() !== ”) {
  21.                         clientName = $(‘#name’).val();
  22.                         $("#info").toggle();
  23.                         $("#chat").toggle();
  24.                         $(‘#msg’).focus();
  25.                         $(‘#subtitle’).html("Now chatting");
  26.                     }
  27.                 };
  28.  
  29.                 $("#chat").toggle();
  30.                 $(‘#name’).focus();
  31.  
  32.                 connection.received(function (data) {
  33.                     $(‘#messages’).append(‘<li>’ + data + ‘</li>’);
  34.                 });
  35.  
  36.                 $("#broadcast").click(function () {
  37.                     send();
  38.                 });
  39.  
  40.                 $("#start").click(function () {
  41.                     startChatting();
  42.                 });
  43.  
  44.                 $(‘#chatform’).submit(function () {
  45.                     send();
  46.                     return false;
  47.                 });
  48.  
  49.                 $(‘#startform’).submit(function () {
  50.                     startChatting();
  51.                     return false;
  52.                 });
  53.  
  54.                 connection.start();
  55.             });
  56.         </script>
  57.  
  58.     <div id="info">
  59.         <form id="startform">  
  60.             Enter your name:
  61.             <input type="text" id="name"  />
  62.             <input type="button" id="start" value="Start chatting" />
  63.         </form>
  64.     </div>
  65.  
  66.    
  67.     <div id="chat">
  68.         <form id="chatform">    
  69.             <ul id="messages"></ul>
  70.             <input type="text" id="msg"  />
  71.             <input type="button" id="broadcast" value="Send" />
  72.         </form>
  73.     </div>
  74. </div>
  75.  

Alright, that should be all. Compile and run it! You can test out my chat live over at AppHarbor:

http://signalrchat.apphb.com/

]]> http://sourcecodebean.com/archives/signalr-real-time-web-for-net/1297/feed 2 My first Google Chrome Extension – E24.se cleanup http://sourcecodebean.com/archives/my-first-google-chrome-extension-e24-se-cleanup/1286 http://sourcecodebean.com/archives/my-first-google-chrome-extension-e24-se-cleanup/1286#comments Tue, 02 Aug 2011 10:12:49 +0000 Peter http://sourcecodebean.com/?p=1286 Occasionally i read the swedish news site e24.se. One thing that really annoys me about the site is the fixed banner they have on top of all the article pages. I decided to do something about it so i created a Google Chrome Extension that removes the banner, and as a bonus it also removes all the ads on the page. Enjoy:

https://chrome.google.com/webstore/detail/lffoakndkbfaoglgbnaagjglhhlapdnk?hl=sv&hc=search&hcp=main

]]> http://sourcecodebean.com/archives/my-first-google-chrome-extension-e24-se-cleanup/1286/feed 0 Realtime connections between web servers and web browsers http://sourcecodebean.com/archives/realtime-connections-between-web-servers-and-web-browsers/1211 http://sourcecodebean.com/archives/realtime-connections-between-web-servers-and-web-browsers/1211#comments Tue, 05 Jul 2011 19:01:41 +0000 Peter http://sourcecodebean.com/?p=1211 In the early days of the web, web pages were very static in content, once the page was loaded nothing on the page would change until you reloaded it. Then came Ajax and allowed us to do partial reloads of the page. During the last few years the web has evolved even more. Today you see a lot of web applications, such as Facebook and Google+, where content is updated as you are watching the page. This has been made possible by using different techniques to keep a connection to the web server open and be able to push content from the web server to the connected clients. The main technique to allow this in web browsers today is what is called Comet.

Comet – using browser connections

Comet is a web application model in which a long-held HTTP request allows a web server to push data to client browsers, without the browser explicitly requesting it. It works the way that the web browser requests an url from the server, and the server deliberately keeps it open, allowing it to work as a stream of data between the server and the client web browser. In this stream the web server can push content to the client.

Keeping connections open for such a long time is not how HTTP requests was intended to be used, so a lot of people have been describing this as a hack. The biggest problem with Comet has been that the HTTP 1.1 specification states that a web browser should not have more than two simultaneous connections to a web server. By using Comet, one of these connections would always be held open for push notifications. Only having one available connection could limit the browser. An example could be that the browser may be blocked from sending a new request while waiting for the results of a previous request while loading a series of images. Most sites solved this by creating a separate sub domain for the real time communication. Also, getting Comet to work properly in all web browsers isn’t at all trivial. So what other options are there?

Comet – using Flash sockets

Flash sockets is based on the same idea as Comet. On the server side it is very similar to the regular use of Comet, but on the client side the connection to the server is kept open by using a Flash Socket running in a flash application. Since the HTTP connection is opened by Flash it will work the same way in all web browsers, but the downside is of course that it requires Flash, so many mobile browsers will not be able to use it. The Flash socket implementation is considered as more stable and not as much as a hack as the browser Comet implementation. However, it is considered a temporary solution until most web browsers have implemented support for WebSockets.

WebSockets – The replacement for Comet

WebSockets is a technology for providing bi-directional, full-duplex communications channels, over a single TCP socket and is supposed to be able to replace the different Comet solutions that exists today. The API is being standardized by the W3C and is currently implemented in Chrome 4+ and Safari 5+. It is also implemented in Firefox and Opera, but disabled by default. As usual, Internet Explorer is lagging behind and no support for WebSockets exists as of today. Maybe in Internet Explorer 10, who knows… So it will be a while until WebSockets are so widely accepted that we can only rely on WebSockets.

On the server side

To allow for Comet connections the web server needs to support long lived HTTP connections. Most web servers were not built for this, so implementing Comet on a web server such as IIS can be a bit of a challenge, especially when scaling to lots of concurrent users.

Holding lots of concurrent connections open is something that Node.js is very good at (I blogged about Node.js a few weeks ago), and not supprisingly there are many Comet notification servers built on it. The two most popular implementations seems to be Juggernaut and Faye. Lets get into a crash course in how to start using Juggernaut.

Juggernaut

Juggernaut is a push notification server for WebSockets with a easy fallback to Flash sockets if the clients web browser does not support it. Getting started with Juggernaut is very easy, I got my server up running in just a few minutes. Let me show you how to do it on OSX.

First, if you don’t already have Homebrew (a Unix package manager for OSX) installed, go ahead and install it:

$ curl -LsSf https://github.com/mxcl/homebrew/tarball/master | sudo /usr/bin/tar xvz -C/usr/local --strip 1

Now install Node.js, Redis (key/value data strore server, the Juggernaut server and the Juggernaut gem (if you want the Ruby support). Follow the instructions for each package.

$ brew install node
$ brew install redis
$ npm install juggernaut
$ gem install juggernaut

Now start Redis and Juggernaut:

$ redis-server &
$ node ~/node_modules/juggernau/server.js &

Juggernaut is by default hosted on port 8080 and it should now be possible to browse to http://localhost:8080/application.js. This is the javascript that Juggernaut clients should load in order to communicate with the server.

Now lets create an HTML file, jugtest.html, and host it on a local web server:

  1. <script src="http://localhost:8080/application.js" type="text/javascript" charset="utf-8"></script>
  2.  
  3. <script type="text/javascript" charset="utf-8">
  4.   var jug = new Juggernaut;
  5.   jug.subscribe("channel1", function(data){
  6.     alert(data)
  7.   });
  8. </script>
  9.  

Also, let’s create a simple Ruby script, test.rb, to send notifications:

  1. require "juggernaut"
  2. Juggernaut.publish("channel1", "Hello world!")
  3.  

Everything should be setup now, let’s browse jugtest.html, my webserver runs on port 3000, so for me that is http://localhost:3000/jugtest.html. Nothing shows up in the web browser, but in the terminal running Juggernaut we should be able to see that one client has connected. Lets run the ruby script:

$ ruby test.rb

The message shows up in the web browser, it works!

As you can see getting started with push notifications using Juggernaut is very easy. If you have any experience with other push notification servers, please leave a comment, it would be interesting to hear your experiences!

]]> http://sourcecodebean.com/archives/realtime-connections-between-web-servers-and-web-browsers/1211/feed 0