Skip to content

Instantly share code, notes, and snippets.

@dyoder
Created May 5, 2012 01:30
Show Gist options
  • Save dyoder/2598974 to your computer and use it in GitHub Desktop.
Save dyoder/2598974 to your computer and use it in GitHub Desktop.

Let's get you started building things! We're going to use JavaScript and jQuery in what follows. Once you're up and running with JavaScript, you can follow a similar process to get up and running with our other client libraries.

Important: The example below is just to get you up and running. You should never include your account secret in a Web application. See our tutorial to see a more realistic example.

Create A Sample Project

Create The Project Structure

Create a project directory. Within that create a javascript directory.

Create A Simple Test Web Page

Create a simple Web page in your project root directory so that we can make sure everything is running properly. Let's just call it index.html. It should look something like this:

<html>
  <head>
    <script type='text/javascript' lang='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' lang='javascript' src='./javascript/application.js'></script>
  </head>
  <body>
  </body>
</html>

Set Up Your ready Function

Create a new file within the javacript directory called 'application.js'. It should look something like this:

$(document).ready(function() {
  $('body').append("<p>Hello World!</p>");
});

Make Sure Everything Is Working

Open up the Web page in your browser. You should see Hello World!.

Send A Test Message

Download Our Javascript Library

Visit our GitHub repo for our JavaScript client library. Download the spire.io.bundle.js.min from the browser directory into your project's javascript directory.

Load Our JavaScript Library Into The Test Page

Add the following script tag right before the script tag for application.js:

<script type='text/javascript' lang='javascript' src='./javascript/spire.io.bundle.min.js'></script>

Add Test Message Code

Replace your existing ready function in application.js with this one:

$(document).ready(function() {
  var Spire = require('./spire.io.js');
  var spire = new Spire();
  spire.start(ACCOUNT_SECRET_GOES_HERE, function (error) {
    if (!error) {
      spire.subscribe(["test"],function(messages) {
        $(messages).each(function(message) {
          $('body').append("<p>" + message.content + "</p>");
        });
      });
      spire.publish("test","Greetings Earthling!");
    }
  });
});

Register Your Account

You'll need to register your spire.io account. All you need to provide is an email and password and you're good to go. When you're done, you'll be on the account management page.

Cut and paste the account secret into your ready function, replacing the ACCOUNT_SECRET_GOES_HERE. In real life, you would probably want to use our Identity API and require users to login before being able to send and receive messages.

Make Sure Everything Is Working

Refresh your browser: you should now see Greetings Earthling! displayed.

Recap

What we've just done is publish a message on your application's test channel, receive it via a subscription, and then display the message.

If you can get this far, you're now up and running using your spire.io account. Next, you'll want to check out our chat tutorial and other documentation.

@automatthew
Copy link

For the Make Sure Working section, we may want to explain that the messages are persistent, and that they will accumulate more each time you refresh.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment