Simple Match Making Server using WebRTC

3 minutes read

With my Ultimate Tic-Tac-Toe Game I've already tackled how to let users manually connect to each other with a unique ID. But now it's time to take it a step further, how do you make it so users can connect with someone they don't know? I figured it out in only a couple lines of JavaScript.

First off, this is all up on github, I'm still working on making things better but the basic functionality is there and it's fresh so I'm writing about it.

The server is using Peer.js, which unfortunately seems to be a dead project, so I'll have to move away from that shortly. The code for a simple Peer server is two lines, they are:

var PeerServer = require('peer').PeerServer;
var server = new PeerServer({port: 9000, path: '/myapp'});

Simple as that. Okay, now we need to track when people connect and disconnect from the server, that's easy enough:

var connected = [];
server.on('connection', function (id) {
  var idx = connected.indexOf(id); // only add id if it's not in the list yet
  if (idx === -1) {connected.push(id);}
});
server.on('disconnect', function (id) {
  var idx = connected.indexOf(id); // only attempt to remove id if it's in the list
  if (idx !== -1) {connected.splice(idx, 1);}
});

So I made an array, then when someone connects to the server I add their id to the array of people connected. That's all I had going for awhile, then I ran into a flaw. How do you know they want to connect to people or aren't already connected to people? This is where I had to add in Express to be a normal node server. So my goal with this is to create two endpoints, one to say you want to connect, and another to remove you from that once you connect. The code for this was a bit more in depth, but still stupid simple:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var readyToConnect = [];

var jsonParser = bodyParser.json();

app.use(bodyParser.json());
app.get('/', function(req,res) {
  return res.json({'connected': connected, 'ready': readyToConnect});
});
app.post('/add-device', jsonParser, function(req,res) {
  readyToConnect.push(req.body);
  return res.json({'response': 'added to collection'});
});
app.get('/remove-device', function(req,res) {
  return res.json({'response': 'removed from collection'});
});
app.listen(8080, function() {
  console.log('listening');
});

I needed to add body-parser so it could parse the request body that the game was sending to the API, it used to be included in Express but it's not anymore. I'm following the same basic concept of the previous connected array, but now I have access to any values I want and I can add and remove things based on endpoints that the app hits when I tell it to. You can see the full server.js file up on github instead of seeing the broken up version as explained here.

What I learned from this is Express is super easy and not some scary voodoo like I thought it was. I didn't even look up documentation for Express, I only have to search on the body-parser issue, it's that simple. I still need to finish the match matching on the game side as it mostly now works and in only 35 lines of code. JavaScript is fun.

:wq

Josh Fabean

Simple Match Making Server using WebRTC