Building a Real-time Chat Plugin for the Atom.io Text Editor
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.
At the end of this tutorial, you’ll have built something that looks like this:
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.
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.
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.