Building a Real-time Chat Plugin for the Atom.io Text Editor
Good News! We’ve launched an all new Chat Resource Center.
We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.
In this tutorial, Atom.io goes collaborative by building and implementing a real-time chat plugin using PubNub. With this chat plugin, developers can send code snippets and other messages to other users. Think pair programming, from anywhere on Earth!
With PubNub, we can extend this to building a plugin which allows two users to edit code at the same time! The key is that the plugin relies on a real-time service with no down-time.
Atom.io Chat Plugin Tutorial Overview
The scope of this entry tells you how to assemble and implement your own personal atom package for the purposes of testing. It only takes a few more steps to assemble the package for download from Atom’s package manager. If you’re interested go here for a tutorial.
Atom packages use CoffeeScript, Less, and SpacePen. CoffeeScript is a language, which compiles to JavaScript. Less is a CSS pre-processor. SpacePen is Atom’s version of views and a controller. SpacePen allows you to manipulate the DOM via jQuery.
At the end of this tutorial, you’ll have built something that looks like this:
Getting Started
To follow along, download the package. Unzip the package via:
Navigate to the directory of the unzipped package.
This will install the dependencies from package.json and put them in the node_modules folder.
The easiest way to install the package to Atom and then make changes, is to navigate to:
Copy the package to this directory so it will show up in Atom’s preferences. After this simple installation, restart Atom. Now if you open Atom the package should automatically load.
Atom’s preferences can be brought up by selecting Atom > Preferences. The PubNub Chat package should show up on the left-hand side if you scroll. If you click the tab you will see the preferences for the plugin.
After you sign up for your PubNub account, edit the “Publish key” and “Subscribe key” fields with your unique publish/subscribe keys that can be found in the PubNub Admin Dashboard. The default channel is GenChat, but this could be set to anything.
Loophole.js
The key thing which allows all of this to work is loophole.js. At the time of this blog entry, Atom has issues with the use of third-party packages such as jQuery for example. This is because of a feature enabled through Chrome browser. That feature is the content security policy.
Loophole.js is already included within the downloaded package. It’s called into action on the pubnub-chat.coffee with:
The most important call happens within pubnub-chat-view.coffee.
This inits PubNub and allows you to use the javascript methods written into the package. Note that it uses the keys, which were defined in the Atom preferences as ‘demo’. The PubNub methods can be seen under the initChannel function in pubnub-chat-view.coffee.
SpacePen
The final key to creating a plugin for Atom is the use of SpacePen. You can see that the entire visual portion of the view consists of 10 lines.
To ensure that the application worked I used a simple node program to call PubNub.
Though the messages are not formatted, you can see that the program is listening and receiving messages.
A special thanks to callahanrts on Github. The code for PubNub Chat is heavily inspired by the slack-chat plugin.