- Node.js server
- HTML client
- iOS client
NOTE: This tutorial is intended for developers who are familiar with the mentioned platforms and skips the reglar explanations of syntax etc as it is intended to teach a concept rather than teaching code. For a lot of the concepts in this tutorial , the code IS the explanation.
The first thing we do in server.js is 'import' narf , after that we create an array that will store all of the client connections to the server. Next we create a GET function that will update a message to all of the clients.
When we start the http server , we store its variable for use with the socket server.
var narf = require( './narf' );
var connectedClients = []; //keep track of which clients are connected
var APIFunctions = { //forward facing functions
GET : { //headers object and parsed url are passed as a parameter for get functions
sendToClients : function ( header, url ){
connectedClients.forEach( function( connection ){
connection.send( JSON.stringify( { message : url.message } ) );
});
}
},
POST : {}
};
narf.startHTTPServer( APIFunctions, function( httpServer ){
narf.startSocketServer( httpServer, function( request ){
var connection = request.accept( null, request.origin ); //accept the connection request
connectedClients.push( connection );
console.log( connectedClients.length + ' connections open' );
connection.on( 'message', function( message ){ //the user has sent a message
if ( message.type === 'utf8' ){
console.log( message ); //process
if( typeof message === 'string' ) message = JSON.parse( message );
connection.send( JSON.stringify({ message : 'hello client' }) );
}
} );
connection.on( 'close', function( ){ //The user has closed the connection
for (var i in connectedClients){
/* remove the client connection from the array and free some memory*/
if( connectedClients[i] == connection ){
connectedClients.splice(i,1);
console.log('removing from disconnected client list');
}
}
} );
} );
} );
To run the server simply run:
node server.js
you may have to install portastic and websocket as well before the server will work:
npm install portastic
npm install websocket
NARF runs the server on port 8080 , but this can be changed , for more details view NARF's readme
HTML Client
The HTML client is very simple, here I have hardwired it to localhost which you may have to change if you are running the server somewhere else or on a different port.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Sockets</title>
</head>
<body>
<div id="content"></div>
<script>
window.WebSocket = window.WebSocket || window.MozWebSocket
var connection = new WebSocket( 'ws://localhost:8080' );
connection.onopen = function(){
//connection opened
console.log( 'connection open' );
connection.send( 'Hello Server' );
};
connection.onerror = function(){
//connection error
};
connection.onmessage = function( message ){
console.log('Recieved message from server: ' );
console.log( message );
var dataObject = JSON.parse( message.data );
document.getElementById( 'content' ).innerHTML = dataObject.message;
}
</script>
</body>
</html>
You cannot change the text on the html client but running the following in a new tab will call the GET function we set up on the server and update the message on all clients:
http://localhost:8080/?serverfunction=sendToClients&message=Hello%20World
iOS Client
For the iOS client download and set up the SocketRocket Library in a new Xcode project, don't forget to refer to the README and see if you have all of the required framework dependancies.
For this demo is set up a universal iOS app with 2 text fields and a button. One text field was for the server IP and port and the other for the message text itself. The button is merely to reset the connection once the user has changed the IP.
I set this all up in the default viewController , here is the code:
ViewController.h
ViewController.m
Now if you are running your node server and have all of your ip adresses set up correctly , when you run the app it will connect to the server and any text changed in the text field will automatically update on other devices.
If you do not have multiple devices to test on , I suggest copy/pasting the html client code and at least reading section 2 then running it , even if you dont know whats going on, just so that you can see that everything is working.