Run Your Own Group Chat with AppHarbor and JabbR

JabbR As a reference application for SignalR, David Fowler from the ASP.NET team built JabbR, an open source group chat application similar to HipChat or Campfire. It's a complete chat solution with rooms, private messaging, emoji, embeddable content, desktop alerts, audio notifications and more. You can even write Hubot-like bots using Jabbot. A public version is hosted at jabbr.net and has become a popular gathering place for members of the ASP.NET community.

You can quickly get up and running with your own private JabbR instance on AppHarbor using a free web worker in combination with (also free) Shared SQL Server Yacto add-on. Here are the steps to follow to get it up and running for your team:

  • Create an AppHarbor application with the SQL Server add-on
    • NEW: Enable file system write access in application settings (Jabbr caches optimized javascript and stylesheets)
  • Create a Janrain Engage account for authentication
  • Clone the code from GitHub
  • Update configuration settings
  • Deploy to AppHarbor

Create an AppHarbor application with the SQL Server add-on

Sign into your account, select 'Your Applications', enter the name of your application and click 'Create New'. After the application is created, select 'Add-ons' from the left and from the add-on screen install the Yacto SQL Server plan.

When the add-on installation completes, click on 'SQL Server' in the installed add-ons list.

installed addons

From there, click on 'Go to SQL Server' which will bring you to the configuration screen for your database. On the configuration screen, click 'Edit alias', enter 'Jabbr' (exactly as shown below) in the Alias field and click 'Update'.

edit database

When you deploy your app to AppHarbor later on, JabbR's connection string will be replaced with the connection string for your live database. This allows you to use the SQL Express instance locally for testing and the live database for production without having to manage the connection strings yourself.

Create a JanRain Engage account for authentication

JabbR uses Janrain's Engage (formerly RPX Now) service for authentication. You can sign up for a free account here. During the sign up process you'll be asked for an application name. Enter something memorable as you'll be using this value later to connect your Janrain account to the JabbR application.

janrain setup

After you've completed the account set up, configure which sign on providers you'd like to support (https://rpxnow.com/relying_parties/<your_app_name_here>/setup_widget). Note that currently JabbR only supports authentication via Janrain and since your site will be on a public URL anyone could log into it. We recommend you pick a URL that would be difficult to guess and only enable the sign on provider most relevant to your users. JabbR may add more authentication options in the future or you could customize the source to integration more closely with your environment.

With your Janrain Engage account created and your providers configured, head back to your dashboard and click '(manage)' next to 'Your Domains' on the bottom right of the screen. From there, add the domain(s) you'll be using for your JabbR site (e.g. myjabbr.apphb.com).

Clone the JabbR code from GitHub

Next we'll download the code from GitHub. Using your Git tool of choice, clone https://github.com/davidfowl/JabbR.git From Git Bash, it would look like this:

$ git clone https://github.com/davidfowl/JabbR.git

That will create a JabbR folder under the current folder.

Update configuration settings

Open JabbR.sln in Visual Studio and open the Web.config file. Update the appSettings values to match those from your Janrain Engage account. Note that the appName is the one you picked during sign up, and not the AppId shown in the dashboard.

<appSettings>
    <add key="auth.apiKey" value="janrain_engage_api_key_here" />
    <add key="auth.appName" value="janrain_engage_app_name_here" />
</appSettings>

Deploy to AppHarbor

From your AppHarbor application detail page, click 'Repository URL' to copy it to the clipboard. Back in Git Bash, add that URL as a remote so you can push your code to it:

$ git remote add appharbor https://[email protected]/your_app_name.git

Next, commit your changes to your local repository and push them to AppHarbor:

$ git commit -am "updated web.config"
$ git push appharbor master

That's it, you're done! Load your app in your browser and chat away.

Give back to JabbR

Because JabbR is open source, if there's a feature you want or a bug you need fixed you can contribute it back to the project. There's no better way to express your appreciation for high-quality free open source software than to give back to the project you're using. If you have any idea for something you'd like to add, join the public JabbR meta room to discuss it.

Monday, 30 April 2012

Read more posts »