View on GitHub

SignalFire.JS

RTCPeerConnection signaling library/npm module. It does the signaling and then gets out of your way.

Getting started with SignalFire

This is a simple tutorial for the SignalFire.js library.

Installation

npm install signalfire

This will download both the server-side and client-side scripts.

Using the library

For simplicity, this tutorial will explain how to create a web app that creates a peer connection between you and the previous person to open the app.

Impatient? - View the Full Code Now

Server-side

First, we'll create the server-side code. In the directory where you ran npm install signalfire, create a new javascript file called signal-server.js

In this new file, we need to include the signalfire module:

var signalfire = require('signalfire');

We need to keep track of the previous connection, so lets initialize a variable for that.

var lastPeer;

Now we are ready for the fun part. First we need to listen for a socket connection

signalfire.listen(3333,function(peer){
});

If you are familiar with the Socket.io library, you will notice that this code is quite similar. The first parameter is the port number to listen for socket connections. The second parameter is a callback function that provides a peer object for the connecting socket.

The peer object has a socket property that contains a Socket.io object, that can be used to detect data sent through the socket. Let's use this to allow the client-side to request a peer connection.

signalfire.listen(3333,function(peer){
	peer.socket.on('askServerForPeer', function(data){
  });
});

Now all that is left is to check if a previous peer has connected and if so, start the signaling process. (This connection will then be used for the next user to connect)

signalfire.listen(3333,function(peer){
  peer.socket.on('askServerForPeer', function(data){
    if(lastPeer){
      peer.connectToPeer(lastPeer);
    }
    lastPeer = peer;
  });
});

The peer object uses the connectToPeer() method to begin signaling. This method takes one parameter, which is simply another peer object.

And that's it for the server-side!

Client-side

Next we will create the client-side script, so let's create a new HTML file (call it anything you want) and a javascript file (our-app.js) for our app.

Open the HTML file and include the necessary scripts:

<script type="text/javascript" src="node_modules/signalfire/client/src/adaptor.js"></script>
<script type="text/javascript" src="node_modules/signalfire/client/src/socket.io.js"></script>
<script type="text/javascript" src="node_modules/signalfire/client/src/signalfire-client.js"></script>

<script type="text/javascript" src="our-app.js"></script>

Open up our-app.js and create a options object literal.

var options = {};

There are a few required properties that must be included within this object. The first is the server. It specifies the server and port to make a socket connection with.

In our server-side code, we are listening on port 3333. So, if you are using a local testing server, you will use the following code:

var options = {
  server: "http://localhost:3333"
};

We also need to include the connector option. This is a function that returns an RTCPeerConnection object. It will be called immediately before the signaling process to be used for the new peer connection.

A callback function startSignaling is provided as the first argument of the connector function. This callback is used to pass the RTCPeerConnection object to SignalFire and to initialize the signaling process.

This allows you to customize the RTCPeerConnection as you like. In this example, we will just set up a basic conection using Google's stun server. Let's do that now.

var options = {
  ...
  connector: function(startSignaling){
    var newConnection = new RTCPeerConnection(
        {
          "iceServers": [{ "url": "stun:stun.l.google.com:19302" }]
        }
    );

    startSignaling(newConnection);
  }
};

Another option we will include is onSignalingComplete. Technically it is not required, but it is very useful. It is a function that will be called when the signaling process is complete and a connection has been created.

For now, let's just make this function log a message to the console.

var options = {
  ...
  onSignalingComplete: function(rtcPeerConnection){
    console.log('Signaling Complete!');
  }
};

So, your full options object should look like this:

var options = {
  server: "http://localhost:3333",

  connector: function(startSignaling){
      var newConnection = new RTCPeerConnection(
          {
            "iceServers": [{ "url": "stun:stun.l.google.com:19302" }]
          }
      );

      startSignaling(newConnection);
  },

  onSignalingComplete: function(rtcPeerConnection){
      console.log('Signaling Complete!');
  }
};

Now we need to put all of this to use. We will use the signalfire connect() method to set everything up. This method takes 2 parameters.

The first is the an options object, like the one we just created. The second is a function that will be called once a socket connection has been created.

In this example, we will immediately send a socket request to the server that will initiate the signaling process.

var conn = signalfire.connect(options,function(){
  conn.emit('askServerForPeer',{});
});

And that is all the code you need!

Running the code

Now let's test out the code you just wrote. First, open a command line, and use node to run your server code:

node signal-server.js

You should get a message that socket.io is running

Next open up a browser that supports RTCPeerConnection and load up your HTML file. (Remember you'll need to open up the console to see it work)

Nothing will happen yet, because you are the only peer to connect to. To create a peer connection, you will need to open the HTML in another tab.

When you do this, you should see 'Signaling Complete!' disolayed in the consoles of both tabs.

If you open up more tabs, you will see that the message will be displayed again in the previous tab to connect.

You now have a working peer signaling server!

The Full Code

Below is the full code for both the server and client.

Server-side

var signalfire = require('signalfire');

var lastPeer;

var sf=signalfire.listen(3333,function(peer){
  peer.socket.on('askServerForPeer', function(data){
    if(lastPeer){
      peer.connectToPeer(lastPeer);
    }
    lastPeer = peer;
  });
},function(error){
  console.log(error);
});

Client-side

var options = {
    server: "http://localhost:3333",

    connector: function(startSignaling){
        var newConnection = new RTCPeerConnection(
            {
              "iceServers": [{ "url": "stun:stun.l.google.com:19302" }]
            }
        );

        startSignaling(newConnection);
    },

    onSignalingComplete: function(rtcPeerConnection){
        console.log('Signaling Complete!');
    }
};

var conn = signalfire.connect(options,function(){
    conn.emit('askServerForPeer',{});
});