Titanium Appcelerator Mobile has implemented for iOs the Bonjour (or ZeroConf if you want) network protocol that allows you to connect to another device found in the same network.

Before starting with the boring part – I mean the code – let’s watch a video with a small demo showing 3 devices playing together 🙂

Networking with Titanium Mobile on iOs

I would like to mention that the iPod is a second generation one – so less capable (the delays are visible in the video) and somehow, sometimes, even seems to loose packets. I tested the same app with an iPad instead of the iPod and everything works just fine.

Bonjour

Based on the code found in KitchenSink I created a small function that creates the connection for us and returns an object to allow you to start it, close it and write to the socket.

Bonjour is a little weird to understand for those with less experience but shortly, things are like this:

• We need a socket in read-write mode that will be used by a localService to publish its presence.
• Each localService have to have its own unique name to be able to identify it in the network.

Besides this, we need a serviceBrowser to find other devices around (that published their presence, of course).

Since everything is asynchronous we’ll have to rely on events to capture the data sent by somebody or the changes in the number of devices connected.

The serviceBrowser has the updatedServices event where we can capture the published services. Here in this function we’ll try to catch the read event for each service that is the one who tells us what data is sent over the network.

Warning: Close the network connection the moment you don’t need it anymore.

The Network Connection Function

The function I created takes care of this so you will just have to use it as in the example below:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

In other point of your app, where you want to send over a message, just do:

	connection.write('my_message');

As I said before, don’t forget to clean everything:

win.addEventListener('close', function(e) {
	connection.stop();
});

What is going on in the demo?

The example in the video is pretty simple. Depending on what blob you touch (red, green or blue) you create a new connection with this name and start it. At this moment any message coming from the network is JSON parsed and a small blob is created with the specified coordinates and color.

On your turn, when you touch the screen you send over the network your coordinates and color so the other devices know what to draw. Every message is a JSON stringified object like the one below:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

As an aside the demo uses zero images. None. Everything is native and I plan a future tutorial on how to do this 🙂

The code

The code is hosted on Github and you can download it from here. Everything is MIT licensed but I’d like to hear what you come up with.

Code strong!

PS. I’m allowed to say this cause I’m a titan 😀

Check the Spanish version of this post:
Tutorial Avanzado de Titanium – Bonjour Networking