Code Samples

Saturday, December 10, 2016

Simple Chat Application Using PHP & WebSocket

First you need to run server script "server.php". You can do using command prompt. Open cmd and navigate to project folder and type "php -q server.php" or browse from browser, server started. Now browse "index.php" from browser and start chatting.





One thing need to do before start server, have to check if socket is enabled in your server. Navigate to your PHP installation folder and find and edit "php.ini" file. Find the text php_sockets.dll and uncomment the line. And restart your apache server.




Below is full server.php script




<?php
$host = 'localhost'; //host
$port = '9000'; //port
$null = NULL; //null var

//Create TCP/IP stream socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
//reusable port
socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);

//bind socket to specified host
socket_bind($socket, 0, $port);

//listen to port
socket_listen($socket);

//create & add listening socket to the list
$clients = array($socket);

echo "Server Started...\n";
set_time_limit(60 * 2);
//start endless loop, so that our script doesn't stop
while (true) {
    //manage multiple connections
    $changed = $clients;
    //returns the socket resources in $changed array
    socket_select($changed, $null, $null, 0, 10);

    //check for new socket
    if (in_array($socket, $changed)) {
        echo "Client Connected...\n";
        $socket_new = socket_accept($socket); //accept new socket
        $clients[] = $socket_new; //add socket to client array

        $header = socket_read($socket_new, 1024); //read data sent by the socket
        perform_handshaking($header, $socket_new, $host, $port); //perform web-socket handshake

        socket_getpeername($socket_new, $ip); //get ip address of connected socket
        $response = mask(json_encode(array('type' => 'system', 'message' => $ip . ' connected'))); //prepare json data
        send_message($response); //notify all users about new connection

        //make room for new socket
        $found_socket = array_search($socket, $changed);
        unset($changed[$found_socket]);
    }

    //loop through all connected sockets
    foreach ($changed as $changed_socket) {
        //check for any incoming data
        try {
            while (socket_recv($changed_socket, $buf, 1024, 0) >= 1) {
                try {
                    $received_text = unmask($buf); //unmask data
                    if($received_text != $null) {
                        $tst_msg = json_decode($received_text); //json decode
                        $user_name = $tst_msg->name; //sender name
                        $user_message = $tst_msg->message; //message text
                        $user_color = $tst_msg->color; //color

                        //prepare data to be sent to client
                        $response_text = mask(json_encode(
                            array('type' => 'user_message', 'name' => $user_name, 'message' => $user_message, 'color' => $user_color)
                        ));
                        send_message($response_text); //send data
                    }
                }
                catch(Exception $ex) {
                    echo "Exception_2=" . $ex->getMessage() . "\n";
                }
                break 2; //exist this loop
            }
        }
        catch(Exception $ex) {
            echo "Exception=" . $ex->getMessage() . "\n";
        }

        $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);
        if ($buf === false) { // check disconnected client
            // remove client for $clients array
            $found_socket = array_search($changed_socket, $clients);
            socket_getpeername($changed_socket, $ip);
            unset($clients[$found_socket]);

            //notify all users about disconnected connection
            $response = mask(json_encode(array('type' => 'system', 'message' => $ip . ' disconnected')));
            send_message($response);
        }
    }
}
// close the listening socket
socket_close($socket);

function send_message($msg) {
    global $clients;
    foreach ($clients as $changed_socket) {
        @socket_write($changed_socket, $msg, strlen($msg));
    }
    return true;
}


//Unmask incoming framed message
function unmask($text) {
    $length = ord($text[1]) & 127;
    $end_check = ord($text[0]) & 0x0F;
    if ($length == 126) {
        $masks = substr($text, 4, 4);
        $data = substr($text, 8);
    }
    elseif ($length == 127) {
        $masks = substr($text, 10, 4);
        $data = substr($text, 14);
    }
    else {
        $masks = substr($text, 2, 4);
        $data = substr($text, 6);
    }
    $text = "";
    for ($i = 0; $i < strlen($data); ++$i) {
        $text .= $data[$i] ^ $masks[$i % 4];
    }
    if($end_check == 8) {
        echo "Client Disconnected...\n";
        return null;
    }
    return $text;
}

//Encode message for transfer to client.
function mask($text) {
    $b1 = 0x80 | (0x1 & 0x0f);
    $length = strlen($text);

    if ($length <= 125) {
        $header = pack('CC', $b1, $length);
    }
    elseif ($length > 125 && $length < 65536) {
        $header = pack('CCn', $b1, 126, $length);
    }
    elseif ($length >= 65536) {
        $header = pack('CCNN', $b1, 127, $length);
    }
    return $header . $text;
}

//handshake new client.
function perform_handshaking($receved_header, $client_conn, $host, $port) {
    $headers = array();
    $lines = preg_split("/\r\n/", $receved_header);
    foreach ($lines as $line) {
        $line = chop($line);
        if (preg_match('/\A(\S+): (.*)\z/', $line, $matches)) {
            $headers[$matches[1]] = $matches[2];
        }
    }

    $secKey = $headers['Sec-WebSocket-Key'];
    $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
    //hand shaking header
    $upgrade = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
        "Upgrade: websocket\r\n" .
        "Connection: Upgrade\r\n" .
        "WebSocket-Origin: $host\r\n" .
        "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
    socket_write($client_conn, $upgrade, strlen($upgrade));
}
?>











Download full example from here

PHP Sort Multidimensional array with key value

<?php
$needSort = array(
    array("name" => "Bob", "age" => 8, "colour" => "red"),
    array("name" => "Greg", "age" => 12, "colour" => "blue"),
    array("name" => "Andy", "age" => 5, "colour" => "purple")
);
echo "<h3>Original Array</h3><pre>";
print_r($needSort);
echo "</pre>";

$orderBy = "name";
$sortArray = array();
$sortArray[$orderBy] = array();

foreach ($needSort as $obj) {
    $sortArray[$orderBy][] = $obj[$orderBy]; //Sort by name
}

array_multisort($sortArray[$orderBy], SORT_ASC, $needSort);

echo "<h3>Sorted Array</h3><pre>";
print_r($needSort);
echo "</pre>";
?>

Output

Original Array

Array
(
    [0] => Array
        (
            [name] => Bob
            [age] => 8
            [colour] => red
        )

    [1] => Array
        (
            [name] => Greg
            [age] => 12
            [colour] => blue
        )

    [2] => Array
        (
            [name] => Andy
            [age] => 5
            [colour] => purple
        )

)


Sorted Array

Array
(
    [0] => Array
        (
            [name] => Andy
            [age] => 5
            [colour] => purple
        )

    [1] => Array
        (
            [name] => Bob
            [age] => 8
            [colour] => red
        )

    [2] => Array
        (
            [name] => Greg
            [age] => 12
            [colour] => blue
        )

)

Simple Loading Overlay Example

Download plugin from here

<!DOCTYPE html>
<html>
<head>
    <title>Loading Overlay Example</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="loading-overlay.js"></script>
    <style type="text/css">
        .loading {
            margin-left: 10%;
            margin-top: 20%;
            width: 80%;
            height: 200px;
            border: 1px solid blue;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="loading">
    <br/>HTML DIV ELEMENT
</div>
<script type="text/javascript">
    $(".loading").LoadingOverlay("show");
    setTimeout(function () {
        $(".loading").LoadingOverlay("hide");

        setTimeout(function () {
            $.LoadingOverlay("show");

            setTimeout(function () {
                $.LoadingOverlay("hide");
            }, 3000);
        }, 1000);
    }, 3000);
</script>
</body>
</html>

Make A Real-Time Chat Room using Node Js Server and Socket.io

Start using node js follow link

Download full code example from here

var http = require('http'),
    connect = require('connect'),
    express = require('express'),
    app = express(),
    ent = require('ent'),
    server = http.createServer(app),
    io = require('socket.io').listen(server);

app.use(express.bodyParser());

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/login.htm');
});
app.get("/login", function(req, res) {
    res.writeHead(302, {Location: '/'} );
    res.end();
});
app.post("/login", function(req, res) {
    var userName = "", group = "";
    try { userName = ent.decode(req.body.userName).trim(); } catch(e) {}
    try { group = ent.decode(req.body.group).trim(); } catch(e) {}
    if(userName.length == 0) {
        res.writeHead(302, {Location: '/?Error=Need User Name'} );
        res.end();
        return;
    }
    if(group.length == 0) {
        res.writeHead(302, {Location: '/?Error=Need Group'} );
        res.end();
        return;
    }
    res.writeHead(302, {Location: '/chat?UserName=' + userName + "&Group=" + group} );
    res.end();
});
app.get("/chat", function(req, res) {
    res.sendfile(__dirname + '/chat.htm');
});
//Static resource setup
app.use(express.static(__dirname + '/public'));

io.sockets.on('connection', function (socket) {
    socket.on('new_client', function (UserName, Group) {
        socket.UserName = UserName;
        socket.Group = Group;
        socket.join(Group);
        console.log(UserName + " connected on group=" + Group);
        socket.broadcast.to(socket.Group).emit('message', {UserName: UserName, message: " Connected!!!"});
    });

    socket.on('message', function (message) {
        socket.broadcast.to(socket.Group).emit('message', {UserName: socket.UserName, message: ent.encode(message)});
    });

    socket.on('disconnect', function() {
        try {
            if(socket.UserName !== undefined) {
                socket.broadcast.emit('message', {UserName: socket.UserName, message: " Disconnected!!!"});
            }
        }
        catch(ex) { }
    });
});

var PORT = 9999;
server.listen(PORT, function () {
    //Callback triggered when server is successfully listening.
    console.log("Server listening on: http://localhost:%s", PORT);
});

Wednesday, December 7, 2016

First HTTP Server in Node.js

1. Download node server from here or here and extract to a local folder
2. Download NPM (Node Package Manager) from here or here and extract to a local folder
3. Configure environment PATH Variable. Open command prompt and do the following:
C:\Users\pritom>set PATH=%PATH%;C:\Users\..\NODE_FOLDER;C:\Users\..\NPM_FOLDER

C:\Users\pritom>echo %PATH%
...;C:\Users\pritom\Desktop\codes\node_1\node-v7.2.1-win-x64;C:\Users\pritom\Desktop\codes\node_1\npm-4.0.5

C:\Users\pritom>node --version
v7.2.1

4. Create a file named "server.js" in a local folder with following contents:

//Lets import the HTTP module
var http = require('http');

//Lets define a port we want to listen to
const PORT = 5555;

//We need a function which handles requests and send response
function handleRequest(request, response) {
    response.end('Node js server browse at: [[http://localhost:' + PORT + request.url + ']]');
}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function () {
    //Callback triggered when server is successfully listening.
    console.log("Server listening on: http://localhost:%s", PORT);
});

5. Now navigate to the folder using command prompt and type "node server.js" will output:
Server listening on: http://localhost:5555

6. Hit "http://localhost:5555" in your browser and see the result.....

Friday, December 2, 2016

Google Chrome - Clear Cache for Specific Website

1. First follow the image below:

2. Now click right button on reload button marked in below image and then click on "Empty Cache and Hard Reload"

Thursday, December 1, 2016

Angularjs: Calling a function when ng-repeat has finished

<!DOCTYPE html>
<html>
<head>
    <title>Angularjs: Calling a function when ng-repeat has finished</title>
    <style type="text/css">
        div.log {
            border: 2px solid gray;
            color: black;
            padding: 10px;
            font-size: 20px;
            font-family: monospace;
        }
        div.log div {
            padding: 10px;
        }
    </style>

    <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.controller("MyController", function($scope) {
            $scope.items = [];
            $scope.items.push({"name": "Pritom"});
            $scope.items.push({"name": "Kumar"});

            var log = $(".log");
            $scope.log = function(e) {
                log.prepend("<div>" + e + "</div>");
            }
        })

        app.directive("myCustomValidation", function($timeout) {
            return {
                restrict: "A",
                require: "ngModel",
                link: function(scope, elem, attrs, ctrl) {
                    /**
                     * If you dont use $timeout then nothing found.
                     * You can try yourself.
                     */
                    $timeout(function () {
                        scope.$apply(function () {
                            scope.log(elem.val())
                        })
                    })
                }
            }
        })
    </script>
</head>

<body>
<div data-ng-app="myApp" data-ng-controller="MyController">
    <div>
        <div ng-form="myForm" data-ng-repeat="item in items">
            <div style="border:1px solid blue;padding:10px;">
                <input type="text" name="name" ng-model="item.name" ng-maxlength="10"
                       my-custom-validation required style="width:100%;"/>
            </div>
        </div>
        <div class="log"></div>
    </div>
</div>
</body>
</html>

Result using $timeout:

Result without using $timeout:

Pages