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 project directory. Within that create a javascript
directory.
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>
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>");
});
Open up the Web page in your browser. You should see Hello World!
.
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.
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>
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!");
}
});
});
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.
Refresh your browser: you should now see Greetings Earthling!
displayed.
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.
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.