WebSocket Server & Mobile Client

Has been playing around on socket.io but couldn’t get the client and server code separated. I need the server code running on a pc while the client code is just a static html that I can embed inside phonegap or etc. After hours of struggle, I decided to looks for other library and finally rest on these 2 combination: https://github.com/Worlize/WebSocket-Node & https://code.google.com/p/jquery-websocket/ thru Simon’s Hamsphire’s kraken blog Simon wrote a very good article on demonstrating these 2 combination. My article here further demonstrate how to broadcast the msg to multiple clients and fixed some bugs. Ok, so lets’ do this step by step, server first then only the client.

Server part:

var WebSocketServer = require('websocket').server;
var http = require('http');
 
var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});
 
wsServer = new WebSocketServer({
    httpServer: server,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection's origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});
 
function originIsAllowed(origin) {
  // put logic here to detect whether the specified origin is allowed.
  return true;
}

var connections = {};
var connectionIDCounter = 0;
	
wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      // Make sure we only accept requests from an allowed origin
      request.reject();
      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
      return;
    }
 
    //var connection = request.accept('kraken-protocol', request.origin);
    var connection = request.accept(null, request.origin);
	connection.id = connectionIDCounter ++;
    connections[connection.id] = connection;
	
   console.log((new Date()) + ' Connection ID ' + connection.id + ' accepted.');
	
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            //connection.sendUTF(message.utf8Data);
			broadcast(message.utf8Data)
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
		
    });
	
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected. '+"Connection ID: " + connection.id);
		// Make sure to remove closed connections from the global pool
        delete connections[connection.id];
    });
});

// Broadcast to all open connections
function broadcast(data) {
    Object.keys(connections).forEach(function(key) {
        var connection = connections[key];
        if (connection.connected) {
            connection.send(data);
        }
    });
}

// Send a message to a connection by its connectionID
function sendToConnectionId(connectionID, data) {
    var connection = connections[connectionID];
    if (connection && connection.connected) {
        connection.send(data);
    }
}

var WebSocketServer = require('websocket').server;

var http = require('http');

var server = http.createServer(function(request, response) {

console.log((new Date()) + ' Received request for ' + request.url);

response.writeHead(404);

response.end();

});

server.listen(8080, function() {

console.log((new Date()) + ' Server is listening on port 8080');

});

wsServer = new WebSocketServer({

httpServer: server,

// You should not use autoAcceptConnections for production

// applications, as it defeats all standard cross-origin protection

// facilities built into the protocol and the browser. You should

// *always* verify the connection's origin and decide whether or not

// to accept it.

autoAcceptConnections: false

});

function originIsAllowed(origin) {

// put logic here to detect whether the specified origin is allowed.

return true;

}

var connections = {};

var connectionIDCounter = 0;

wsServer.on('request', function(request) {

if (!originIsAllowed(request.origin)) {

// Make sure we only accept requests from an allowed origin

request.reject();

console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');

return;

}

//var connection = request.accept('kraken-protocol', request.origin);

var connection = request.accept(null, request.origin);

connection.id = connectionIDCounter ++;

connections[connection.id] = connection;

console.log((new Date()) + ' Connection ID ' + connection.id + ' accepted.');

connection.on('message', function(message) {

if (message.type === 'utf8') {

console.log('Received Message: ' + message.utf8Data);

//connection.sendUTF(message.utf8Data);

broadcast(message.utf8Data)

}

else if (message.type === 'binary') {

console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');

connection.sendBytes(message.binaryData);

}

});

connection.on('close', function(reasonCode, description) {

console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected. '+"Connection ID: " + connection.id);

// Make sure to remove closed connections from the global pool

delete connections[connection.id];

});

// Broadcast to all open connections

function broadcast(data) {

Object.keys(connections).forEach(function(key) {

var connection = connections[key];

if (connection.connected) {

connection.send(data);

}

});

}

// Send a message to a connection by its connectionID

function sendToConnectionId(connectionID, data) {

var connection = connections[connectionID];

if (connection && connection.connected) {

connection.send(data);

}

First, you need to have nodejs installed.
Save the above code into websock-server\index.js
Then, in your terminal/cmd, type npm install websocket@1.0.3 to install the nodejs websocket library.
Make sure your port 8080 is not occupied by other program as I am using port 8080 in this example.
Next, in your terminal/cmd, cd into the folder and type node index.js

As you can see, I made some modification to the index.js file:

It now do not take in a protocol
Able to do broadcast by keeping a list of connected clients
Modified on request and close request to support the clients tracking function
Instead of parrot back the same msg, it is now broadcasting any sender’s msg to everyone. More like how a chat room behave

Client Part:

For the client part, I going to create 2 interface, one for sending and receiving chat msg (index.htm), another for receiving chat msg only (logger.htm).

You will need to change the Server IP in it into yours (ws://192.168.0.200:8080)
The code is pretty simple, everything is self described.
So now i can open the index.htm and type a msg, and it will appear on the space below the input box, as well as in logger.htm
I can even put index.htm into phonegap (need to provide option for user to enter the Server IP) and it can serve as a ‘controller’ while logger.htm can be modified to be a ‘receiver’

Index.html code

<html lang="en">
<head>
    <title>Node Based Echo</title>
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.websocket-0.0.1.js" type="text/javascript"></script>
    <script src="js/jquery.json.min.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
 
        // sends a message to the websocket server
        function sendToServer() {
			ws.send('say', '{ messageTextA: ' + $('#echoText').val() + ' }');
            //ws.send('krakenmsgB', '{ messageTextB: ' + $('#echoText').val() + ' }');
        }
 
        // set-up web socket
        var ws = $.websocket("ws://192.168.0.200:8080/", {
            open: function () { },
            close: function () { alert('websocket has been closed'); },
            events: {
                say: function (e) { $('#returnText').append(e.data + "<br/>"); },
            }
        });
 
    </script>
    <div>
        <div style="float: left; clear: left; padding-top: 2px;">
            Your text:
        </div>
        <div style="float: left; padding-left: 20px;">
            <input type="text" id="echoText" style="width: 150px;" required />
        </div>
        <div style="clear: left;">
            <input type="button" onclick="javascript:sendToServer();" value="Send" />
        </div>
        <div id="returnText" style="clear: left; height: 200px; padding-top: 30px;">
        </div>
    </div>
</body>
</html>

<head>

<title>Node Based Echo</title>

</head>

<body>

// sends a message to the websocket server

function sendToServer() {

ws.send('say', '{ messageTextA: ' + $('#echoText').val() + ' }');

//ws.send('krakenmsgB', '{ messageTextB: ' + $('#echoText').val() + ' }');

}

// set-up web socket

var ws = $.websocket("ws://192.168.0.200:8080/", {

open: function () { },

close: function () { alert('websocket has been closed'); },

events: {

say: function (e) { $('#returnText').append(e.data + "<br/>"); },

}

});

</script>

<div>

Your text:

</div>

</div>

</div>

</div>

</body>

</html>

Finally, to save your day, I put up the full source code here at https://github.com/exiang/websock. All the best and have fun!

Web Socket for Game

My designer students are enthusiastic on using web socket for their interactive base project. However, they do not have the basic networking lesson, hence cant tell the different between UDP and TCP. Most of the tool they picked re TCP base. However, UDP is a better protocol to use, especially when you wanto do realtime action game in multilayer mode that required very low latency. Here is a very detail article on the differences between TCP and UDP. http://blog.artillery.com/2012/06/websocket-performance.html

PhoneGap App

Spending too much time to edit, build, transfer and run your app between PC and mobile device? Web browser cant test all the features? PhoneGap App is here for rescue http://app.phonegap.com First, you need to install the desktop app, then install the mobile app, and last pair the two. However, it only support phonegap project and not codova.

Simple loading sprite animation

Ok, here is a very simple tutorial on creating animation using sprite image in coronalab. Most game developer/designer have no difficulty in understanding what is a sprite. Sprite is basically a ground of images composed into 1 big image, where each pieces represent a frame in timeline. By playing these frame one by one very fast, we create an illusion of animation. Yes, tat’s the same concept how Disney did it for their early day cartoon show. So, now, we have a sprite image ready here:

The image filename is sprite.jpg, with size in 648 (width) x 214 (height) pixel. There are total 4 frame, just a simple animation. Each frame size is 162 (width) x 214 (height) pixel. Ok, now the coding part. In corona, we first need to initialize the image sheet data:

-- first u need to declare the sheet data, mainly to tell corona about your sprite image format
local sheetData = { width=162, height=214, numFrames=4, sheetContentWidth=648, sheetContentHeight=214 }

-- then you create the sheet object, where you use the sheetData you specified above as parameters to create it
local imageSheet = graphics.newImageSheet( "sprite.jpg", sheetData )

-- first u need to declare the sheet data, mainly to tell corona about your sprite image format

local sheetData = { width=162, height=214, numFrames=4, sheetContentWidth=648, sheetContentHeight=214 }

-- then you create the sheet object, where you use the sheetData you specified above as parameters to create it

local imageSheet = graphics.newImageSheet( "sprite.jpg", sheetData )

we take in 5 parameters when creating sheetData variable:

width: width of the single frame 648/4 = 162 pixel
height: always 214 pixel as our sprite image is a horizontally long image. There are more complicated cases where your sprite might be more than 1 row.
numFrames: only 4 here as you can see
sheetContentWidth: your sheet image size in width, is 648 pixel
sheetContentHeight: same as above, but in height, is 214 pixel

once you get these value set correctly, you create the imageSheet variable by passing in the image file path and name, then this sheetData too as parameters. Next, you need to create another variable called sequenceData. This will tell corona how to play your sprite. Our animation here is very straightforward, just keep looping it from 1st frame to last frame.

local sequenceData =
{
    name="cycling",
    start=1,
    count=4,
    time=1000,
    loopCount = 0,   -- Optional ; default is 0 (loop indefinitely)
    loopDirection = "forward"    -- Optional ; values include "forward" or "bounce"
}

local sequenceData =

{

name="cycling",

start=1,

count=4,

time=1000,

loopCount = 0, -- Optional ; default is 0 (loop indefinitely)

loopDirection = "forward" -- Optional ; values include "forward" or "bounce"

}

Then, we create the loadingSprite object using imageSheet and sequenceData as parameters.

local loadingSprite = display.newSprite( imageSheet, sequenceData )

1	local loadingSprite = display.newSprite( imageSheet, sequenceData )

we add in these code to position it at the center of screen:

loadingSprite.anchorX=0.5
loadingSprite.anchorY=0.5
loadingSprite.x = display.contentCenterX
loadingSprite.y = display.contentCenterY

loadingSprite.anchorX=0.5

loadingSprite.anchorY=0.5

loadingSprite.x = display.contentCenterX

loadingSprite.y = display.contentCenterY

Last but not least, play it using this command:

loadingSprite:play()

1	loadingSprite:play()

Source code for this tutorial is available at gitlab repository (public). For more advance and complete tutorial, please refer to Coronalab Tutorial here.

Android emulator too slow?

No worry, you can speed it up! You can use the Virtual Machine Acceleration to improve the execution speed. Many modern CPUs provide extensions to execute Virtual Machines more efficiently. Before attempting to use this type of acceleration, you need to determine if your current development system’s CPU, supports one the following virtualization technologies:

Intel Virtualization Technology (VT-x, vmx) → Intel VT-x supported processor list
AMD Virtualization (AMD-V, SVM), only supported for Linux (Since May 2006, all CPUs AMD include AMD-V, except Sempron).

Another way to find out if your Intel processor supports VT-x Technology, it’s by executing the Intel Processor Identification Utility, for Windows. you can download it from the Intel Download Center, or you can use the booteable utility, which is OS Independent.

So if you got these 2 red things enabled, congratulation! Else, too bad… In order to speed up the emulator, you need to download and install one or more Intel x86 Atom System Images, as well as the Intel Hardware Accelerated Execution Manager (HAXM). Open your Android SDK Manager, and select the Intel x86 Atom System Image, for whichever version that you want to test. Then go to Extras and select Intel x86 Emulator Accelerator (HAXM), and install those packages:

After download, run the Intel installer, which is available within your Android SDK at extras/intel/Hardware_Accelerated_Execution_Manager. Note:If you have any problems installing the package, you can find more information and step by step guidance check this Intel Article.

Install one or more Intel x86 Atom System Images as well as the Intel Hardware Accelerated Execution Manager, available under Extras.
Run the Intel installer, which is available within your Android SDK at extras/intel/Hardware_Accelerated_Execution_Manager.
Create a new AVD with the target set to an Intel image.
When starting the emulator, ensure there are no error messages indicating a failure to load HAX modules.

Getting started with Cordova

Formerly known as phonegap, cordova helps you build hybrid type of mobile app fast and easy across all platform. If you are accessing from http://phonegap.com/, then the documentation there will ask you to do the following installation which is deprecated at the moment:

npm install -g phonegap

1	npm install -g phonegap

You should enter from http://cordova.apache.org/ and follow the instruction there. Basically, you need to have npm first. I assume you are just like me, using windows and focusing on android app development. Basically, cordova will ask you to follow either the cross-plaform or platform-specific method. I will just use cross-platform as it’s the point of picking up cordova iin firstplace. At the time of writing, cordova is at version 3.5.0. The documentation is available here. After you have installed the cordova CLI and created your first app,

cordova create hello com.example.hello HelloWorld

1	cordova create hello com.example.hello HelloWorld

…you will wanto try to add a platform to it:

cordova platform add android

1	cordova platform add android

Then, you realize there is an error. Basically, it is bcs your android SDK path is not register on windows environment. You may follow this stackoverflow article solution. If you dunno what I am talking about at this point, most probably you haven’t get your android SDK installed too. Basically, you need to have these setup first:

Download and install Eclipse Classic
Download and install Android SDK
Download and install ADT Plugin

Finally, when you have got everything ready, to build the app, you call:

cordova build

1	cordova build

and to send it to your phone thru usb cable:

cordova run android

1	cordova run android

You should beable to see the default page with cordova logo now. Congratulation, you have got your very first cordova app built and running!

Gradient changes due to migration to Graphic 2.0

Previously, prior to Dec 2013, we use gradient in corona sdk as below:

btnHomeBg2:setFillColor( graphics.newGradient( { color(38, 38, 38) }, { color(28, 28, 28) }, "down" ) )

1	btnHomeBg2:setFillColor( graphics.newGradient( { color(38, 38, 38) }, { color(28, 28, 28) }, "down" ) )

However, latest update have deprecated the graphics.newGradient. More info can be found here at: http://docs.coronalabs.com/guide/graphics/migration_g20.html#TOC Your Corona SDK will give you the following warning when you try to run the old code.

So, use this for now:

btnHomeBg2:setFillColor( {type="gradient", color1={color( 38, 38, 38 )}, color2={color( 28, 28, 28 )}, direction="down"} )

1	btnHomeBg2:setFillColor( {type="gradient", color1={color( 38, 38, 38 )}, color2={color( 28, 28, 28 )}, direction="down"} )

IOI Properties: this is not how you use captcha

Like many other property developers, IOI properties put up an registration form on their website to collect user data. Unlike many, they do have a sense of security, as they have this extra captcha things that many other developers’ website lack of.

http://www.ioiproperties.com.my/puterisepang/Registration.aspx Captcha is a technology to generate human readable text into an image format, where it can not be easily analyse by robot (a piece of programming script). This help to ensure submitted data come from genuine human user as they will have to reinsert this text along with the submission; Definitely one of the effective methods to stop spam and is widely use by big sites like facebook, google, yahoo. However, this IOI captcha is a wrong implementation. Not only totally useless, vulnerable to attack, but also shows the lack of understanding from its creator. IOI captcha is not dynamic generated! It is just a collection of static images. Their system just randomly select one to display. For example:

http://www.ioiproperties.com.my/jcap/cimg/191.jpg

http://www.ioiproperties.com.my/jcap/cimg/1.jpg

http://www.ioiproperties.com.my/jcap/cimg/7.jpg

http://www.ioiproperties.com.my/jcap/cimg/106.jpg This kind of bug is very dangerous, as it gave people a false sense of security. Attacker just need to download the whole set of 191 images and create a dictionary as below, next analyse the webpage html to acquire the image source url, then he can easily spam the system:

191.jpg – good
1.jpg – polish
7.jpg – soap
…

In fact, there are many free and opensource captcha services available online. For example: http://www.captcha.net/. Programmer should have no excuse for not using it. Note: I am and will not be responsible for any attacked to the site caused by this article.

MAS Enrich system down

Got this invitation email from HleBroking to register MAS Enrich for FREE and earn point while trading. The URL is http://www.enrich.malaysiaairlines.com/EnrichWebsite/NewMember.jsp However, after filling long registration form, on the final stage when submit, the site response with HTTP 500 error. It appear that an error.jsp file was not found. MAS share price already drop into deep shit, required government funding to help almost every year, and yet they can’t get a membership system done correctly.

IOS App Icon

Today I asked my designer to give me an icon for our new IOS app that is waiting to publish to apple store. Next, he come back to me with this:

YS Tech Share

Sharing knowledge and information on geeky stuff

WebSocket Server & Mobile Client

Server part:

Client Part:

Web Socket for Game

PhoneGap App

Simple loading sprite animation

Android emulator too slow?

Getting started with Cordova

Gradient changes due to migration to Graphic 2.0

IOI Properties: this is not how you use captcha

MAS Enrich system down

IOS App Icon