Getting started with Ngix and Strophe.js on Ubuntu

In this post I will get you started on Nginx and Strophe.js
If you missed it, check out my post on Getting started with Ejabberd, it's a precondition to get the stuff in this post going.

I am doing this on Ubuntu 10.04, but I am sure you'll get this running on any Linux flavor.
Lets get started!

Installing Nginx
>sudo apt-get install nginx

Change port on Nginx
I am using port 80 for something else so I will change the port to 8080, this port will be used in all subsequent examples. And you should check the root directory, on some systems it's /var/www, but on mine it was /var/www/nginx-default so that's what I'll use in the rest of this example.
>sudo nano /etc/nginx/sites-available/default
server {
listen 8080 default;
server_name localhost;
...
location / {
root /var/www/nginx-default;
index index.html index.htm;
}

Reload Nginx
sudo nginx -s reload
-s is for signal
Note: On some systems, e.g. Kubunut 10.10, nginx does not start by default. In that case you can start it with >sudo nginx

Check that it works
Point your webbrowser to http://localhost:8080/
You now get a message saying Welcome to nginx!
Yay! It works

Download Strophe.js
Download Strophe.js from http://code.stanziq.com/strophe/
Unzip Strophe somewhere
>unzip strophejs-1.0.1.zip -d ~
Create a Symlink from the root web directory to the folder
>sudo ln -s ~/strophejs-1.0.1

Check that you can reach the page
Go to http://localhost:8080/strophejs-1.0.1/examples/echobot.html
You should now see a page with a simple page with a two field form.

Lets try it out!
Enter form
JID: jonas@localhost
Password: jonas
And click "connect"
Strophe is connecting.
Strophe is disconnecting.
It's not working but we don't expect it to. If you investigate with Firebug you will see that the server is trying to connect with BOSH to http://localhost:8080/xmpp-httpbind and since don't have anything there in our Nginx Web Server the connection fail. What we need to do now is add what is called to proxy_pass to /xmpp-httpbind so it directs the traffic to Ejabbers http-bind page, which we set up in the previous post.

Add xmpp-httpbind redirect Nginx
>sudo nano /etc/nginx/sites-available/default
server {
...
location /xmpp-httpbind {
proxy_pass http://localhost:5280/http-bind;
}
...
}

And reload
>sudo nginx -s reload

Start Echobot
Go to http://localhost:8080/strophejs-1.0.1/examples/echobot.html
Enter same details as above and click "connect".
Now you should get...
Strophe is connecting.
Strophe is connected.
ECHOBOT: Send a message to jonas@localhost/15070348051287336618874524 to talk to me.
Great, almost there.
Use an IM, I use Empathy, to connect to localhost with user jonas2@localhost/jonas2 and then send a message to jonas@localhost. Lets send "Test"
Now in the webpage you should see
ECHOBOT: I got a message from jonas2@localhost/c69ef25a: Test
ECHOBOT: I sent jonas2@localhost/c69ef25a: Test
And in Empathy see
sent jonas2@localhost 19:33: Test
received jonas@localhost 19:33: Test

And now you can see that the echobot webpage works. I hope you have enjoyed these two posts on getting started with Ejabberd, Nginx and Strophe.js, if you have any questions or comments feel free to comment on this post.

See you soon!