Tuesday, October 23, 2012

Faye in the Code Editor

‹prev | My Chain | next›

I think I have a fairly rocking fork of Mr Doob's code editor. Thanks mostly to the work and advice of others, it seems pretty stable. I may actually switch back to othe projects for a bit, but first I need to investigate something for Gaming JavaScript that I promised my son I would: Faye.

OK, so he didn't specifically ask for Faye, but he is very keen on enabling chat within one of the games. This is something that Faye, with its pub-sub websockets, can do quite easily. I am not at all sure that an open Faye server will be a wise idea, but I would like to find out if it is even possible from within the code-editor.

I start by installing Faye into a new application directory:
➜  repos  mkdir gamingjs.faye
➜  repos  cd !$
➜  repos  cd gamingjs.faye
➜  gamingjs.faye  npm install faye
npm http GET https://registry.npmjs.org/faye
...
faye@0.8.6 node_modules/faye
├── cookiejar@1.3.0
└── faye-websocket@0.4.3
Then I copy the basic app server from the Faye site, saving it as app.js:
var http = require('http'),
    faye = require('faye');

var bayeux = new faye.NodeAdapter({mount: '/faye', timeout: 45});
bayeux.listen(8000);
I spin it up and I have a Faye server:
➜  gamingjs.faye  node app
I will likely want the Faye client-side JavaScript to reside on the same server as the code-editor. So I copy the browser client code into the local copy of the Gaming JavaScript site:
➜  gamingjs git:(gh-pages) ✗ cp ../gamingjs.faye/node_modules/faye/browser/faye-browser.js Faye.js
With that, I am ready to start my test. In the code editor, I add the following code:
<body></body>
<script src="/Faye.js"></script>
<script src="/ChromeFixes.js"></script>
<script>
  // Your code goes here...
  var client = new Faye.Client('http://localhost:8000/');

  client.subscribe('/messages', function(message) {
    alert('Got a message: ' + message.text);
  });
</script>
In a separate, incognito window, I also access my local copy of the code editor, adding the following to publish a message on the same /messages channel to which my first client is listening:
<body></body>
<script src="/Faye.js"></script>
<script src="/ChromeFixes.js"></script>
<script>
  // Your code goes here...
  var client = new Faye.Client('http://localhost:8000/');

  client.publish('/messages', {
    text: "Hello!"
  });
</script>
Only nothing happens.

It takes me a while to realize that I have copied from two different sections of the Faye tutorial. I had set my server to listen to messages at /faye, but am creating clients on the root URL: new Faye.Client('http://localhost:8000/'). The solution is easy enough. I need only tell the clients to do their pub-subbing on the proper URL (/faye):
  var client = new Faye.Client('http://localhost:8000/faye');

  client.publish('/messages', {
    text: "Hello!"
  });
Once I fix that in both locations, I have my Faye messages between code editors:


I still need to decide if I think running an open Faye server on a tiny linode somewhere is worth it for this kind of thing in the book. But it is good to know that it is possible.


Day #548

No comments:

Post a Comment