Category Archives: Javascript

Angularjs with Baasbox

Ionic framework for mobile app development use angularJs at its core while baasBox is an open source backend-as-a-services platform (pretty much like parse.com except it allow you to self hosted). I encounter problem when using both together. baasBox provide a javascript framework but it required jquery as dependency. Problem is… when I using baasbox ajax function, its callback fail to access angularJs $scope directly, hence i failed to assign variable to my html. for example, this would fail:

.controller('UserCtrl', function($scope, $rootScope, baasbox) {
	$scope.username = "unknown";
	$scope.login = function() 
	{
		BaasBox.login("test", "test")
		.done(function (user) {
			console.log("Logged in ", user.username);	
			$scope.username = user.username;
		})
		.fail(function (err) {
			console.log("error ", err);
		})
	};
})

.controller('UserCtrl', function($scope, $rootScope, baasbox) {

$scope.username = "unknown";

$scope.login = function()

{

BaasBox.login("test", "test")

.done(function (user) {

console.log("Logged in ", user.username);

$scope.username = user.username;

})

.fail(function (err) {

console.log("error ", err);

})

};

})

Then, I did a little experiment trying to grab baasBox API in raw and prove to be successful:

.controller('UserCtrl', function($scope, $rootScope, baasbox) {
	$scope.username = "unknown";
	$scope.login = function() 
	{
		console.log(baasbox);
		$http.post(baasbox.endPoint+'/login', 
			{
				username: 'test',
				password: 'test',
				appcode: baasbox.appCode
			},
			{
				'X-BAASBOX-APPCODE: ': 'Basic '+baasbox.appCode,
			}
		).success(function (json) {
			console.log(json.data.user);
			$scope.username=json.data.user.name;
		});
	};
}

.controller('UserCtrl', function($scope, $rootScope, baasbox) {

$scope.username = "unknown";

$scope.login = function()

{

console.log(baasbox);

$http.post(baasbox.endPoint+'/login',

{

username: 'test',

password: 'test',

appcode: baasbox.appCode

{

'X-BAASBOX-APPCODE: ': 'Basic '+baasbox.appCode,

}

).success(function (json) {

console.log(json.data.user);

$scope.username=json.data.user.name;

});

};

}

This means I can write an angular javascript sdk for baasBox. That would be a prefect solution but I am running out of time. Then, I think of the possibility to make use of $scope.$apply. This allow me to use back the baasBox jquery base js sdk with angularJs in a straight forward manner.

.controller('UserCtrl', function($scope, $rootScope, baasbox) {
	$scope.username = "unknown";
	$scope.login = function() 
	{
		BaasBox.login("test", "test")
		.done(function (user) {
			console.log("Logged in ", user.username);	
			$scope.$apply(function(){
				$scope.username = user.username;
			});
		})
		.fail(function (err) {
			console.log("error ", err);
		})
	};
})

.controller('UserCtrl', function($scope, $rootScope, baasbox) {

$scope.username = "unknown";

$scope.login = function()

{

BaasBox.login("test", "test")

.done(function (user) {

console.log("Logged in ", user.username);

$scope.$apply(function(){

$scope.username = user.username;

});

})

.fail(function (err) {

console.log("error ", err);

})

};

})

Bingo! It works like a charm now.

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!

Android default browser sucks

I am using the Samsung Galaxy s3 v4.1.2 and it used default android stock browser, and for the embedded webview component as well. One major issue i notice is when running javascript, weird things happen. For example, on form submit, i wanto prevent user from double clicking the submission button. Usually, a simple jquery javascript did the job and works well on desktop browser, including the mobile chrome browser, but not in the stock browser.

$('form').on('submit', function(e){
    $('form').hide();
    $('#loading').show();
    $(this).find(':submit').attr('disabled','disabled');
});

$('form').on('submit', function(e){

$('form').hide();

$('#loading').show();

$(this).find(':submit').attr('disabled','disabled');

});

The stock browser just failed to hide the form and show the loading div block, Button are disabled sometime and sometime not. But when I clicked back button, the loading div is displayed. So it seems like when form is submitted, the browser just stop all javascript processing. The best way to ensure submit button is disabled is actually to hide it by coding it in the html (old school method) rather in jquery.

<input type="submit" name="submit" value="Confirm" onclick="this.style.visibility='hidden'"/>

1	<input type="submit" name="submit" value="Confirm" onclick="this.style.visibility='hidden'"/>

However, the previous way works well on a nexus device which used chrome as default browser. It works on ios devices too.

Social Login Button with font awesome & bootstrap

Traditionally

Social login function thru google, facebook or twitter is common nowadays. Above example required using of external images. Bootstrap & Font awesome version I use Bootstrap framework & Font Awesome to achieve similar result, only with pure HTML & CSS, best for multilingual use-case scenario. With the default button color scheme (primary, info, danger) provided by Bootstrap, it is good enough to support Facebook, Twitter & Google login. If you need more different color style, you will have to extend the default css.

The code:

<html>
<head>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

	<!-- font awesome css -->
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body style="text-align:center; padding:1em">
	<div class="btn-group">
		<a class='btn btn-danger disabled'><i class="fa fa-google-plus" style="width:16px; height:20px"></i></a>
		<a class='btn btn-danger' href='' style="width:12em;"> Sign in with Google</a>
	</div>
	<br /><br />
	<div class="btn-group">
		<a class='btn btn-primary disabled'><i class="fa fa-facebook" style="width:16px; height:20px"></i></a>
		<a class='btn btn-primary ' href='' style="width:12em"> Sign in with Facebook</a>
	</div>	
	<br /><br />
	<div class="btn-group">
		<a class='btn btn-info disabled'><i class="fa fa-twitter" style="width:16px; height:20px"></i></a>
		<a class='btn btn-info ' href='' style="width:12em"> Sign in with Twitter</a>
	</div>	
	<br /><br />
</body>
<html>

<html>

<head>

</head>

<a class='btn btn-danger' href='' style="width:12em;"> Sign in with Google</a>

</div>

<a class='btn btn-primary ' href='' style="width:12em"> Sign in with Facebook</a>

</div>

<a class='btn btn-info ' href='' style="width:12em"> Sign in with Twitter</a>

</div>

</body>

<html>

Alternative Other example are such as: http://noizwaves.github.io/bootstrap-social-buttons/

YS Tech Share

Sharing knowledge and information on geeky stuff

Category Archives: Javascript

Angularjs with Baasbox

WebSocket Server & Mobile Client

Server part:

Client Part:

Android default browser sucks

Social Login Button with font awesome & bootstrap