Integrating Node.js with PHP

 Integrating Node.js with PHP

1. 1. Integrating Node.js with PHP Lee Boynton PHPHants March 2013 Meetup
2. 2. So... WTF is Node.js?
3. 3. Server-side JavaScript
4. 4. Its single threaded...
5. 5. ...one process serves multiple clients
6. 6. Apache + mod_php Clients Webserver (Example borrowed from Marc Gears excellent server side scripting smack down)
7. 7. nginx + php-fpmStill pretty similar, there is a pool of available PHP processes
8. 8. Node.js Clients Webserver
9. 9. A simple Node.js webservervar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type:text/plain}); res.end(Hello Worldn);}).listen(1337, 127.0.0.1);console.log(Server running at http://127.0.0.1:1337/);
10. 10. Why should I use Node.js then?
11. 11. #1 Reason l33tness
12. 12. Use same language on the frontend and backend!
13. 13. Websockets!!!!
14. 14. Websockets● Persistent connection to server via web browser● Low latency● Bi-directional● Much better than XHR long polling (comet)
15. 15. The possibilities...● Games● News feeds● Chat● Real-time applications
16. 16. Awesome! Lets ditch PHP!Or use the right tool for the right job...
17. 17. Reasons to use PHP still● PHP works● Familiarity, maturity● Existing code in PHP● Node still in its infancy (created in 2009) ○ Not as many frameworks, libraries ○ May have to write more code for some basic things ○ APIs may change, not version 1.0 yet
18. 18. Oh yeah, the integrating part... Memcache/redis/ something else Session data Session data PHP Node
19. 19. However...Sessions are serialized by PHP:not|a:2:{i:0;s:4:"easy";i:1;a:1:{s:2:"to";s:5:"parse";}}Easier to parse JSON in Node.js:{"this": {"is": "easier"}}
20. 20. Use my session save handler...On Packagist: lboynton/memcached-json-session-save-handlerOr msgpack: https://github.com/msgpack/msgpack-php● ini_set(session.serialize_handler, msgpack)
21. 21. Quick example... (PHP) // create connection to memcached $memcached = new Memcached(); $memcached->addServer(localhost, 11211); // register handler (PHP 5.3 compatible) $handler = new LboySessionSaveHandler($memcached); session_set_save_handler( array($handler, open), array($handler, close), array($handler, read), array($handler, write), array($handler, destroy), array($handler, gc) ); register_shutdown_function(session_write_close); session_start(); // start using the session $_SESSION[serialisation] = this should be in json;
22. 22. Quick example... (Node.js)1. Get session ID from cookie2. Get session data out of memcached3. Use session data to identify client and send relevant info to their browserSee demo app...
23. 23. Conclusion...● Using Node is fun...● Good way to add real-time functionality to existing website● Can be used for much more
24. 24. Links● http://nodejs.org/● https://npmjs.org/● http://socket.io/● https://packagist. org/packages/lboynton/memcached-json- session-save-handler● https://github.com/msgpack/msgpack-php● https://github.com/msgpack/msgpack-node

PHP - remove tag from string

<?
    $content = "this is something with an <img src=\"test.png\"/> in it.";
    $content = preg_replace("/<img[^>]+\>/i", "(image) ", $content); 
    echo $content;
?>

shape in css3

CSS3 Shapes

Here you'll find a range off shapes all coded with just pure CSS3 code. Unfortunately not all shapes will render correctly in all browsers, currently only web browsers that support CSS3 will produce the correct geometric shapes.

Square

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}

Circle

#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Oval

#oval {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

Up Triangle

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

Down Triangle

#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

Left Triangle

#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

Right Triangle

#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

Triangle Top Left

#triangle-topleft { 
   width: 0; 
   height: 0; 
   border-top: 100px solid blue; 
   border-right: 100px solid transparent; 
}

Triangle Top Right

#triangle-topright { 
   width: 0; 
   height: 0; 
   border-top: 100px solid blue; 
   border-left: 100px solid transparent; 
}

Triangle Bottom Left

#triangle-bottomleft { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-right: 100px solid transparent; 
}

Triangle Bottom Right

#triangle-bottomright { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-left: 100px solid transparent; 
}

Trapezium

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

Diamond

#diamond {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

Rectangle

#rectangle {
   width: 140px; 
   height: 80px;
   background: blue;
}

Parallelogram

#parallelogram {
   width: 130px; 
   height: 75px;
   background: blue;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Twelve Point Star

#twelve-point-star {
   height: 100px;
   width: 100px;
   background: blue;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: blue;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: blue;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

Six Point Star

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid blue;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid blue;
   margin: 30px 0 0 -50px;
}

Speech Bubble

#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: blue;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

Egg

#egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:blue;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

EQ Triangle

#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid blue;
  /* 104 = 120 * 0.866 */
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

Pacman

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid blue;
  border-left: 60px solid blue;
  border-bottom: 60px solid blue;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

Biohazard

#biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}

Heart

#heart { 
 position: relative;
}
#heart:before, #heart:after {
   position: absolute;
   content: "";
   left: 70px; top: 0;
   width: 70px;
   height: 115px;
   background: blue;
   -moz-border-radius: 50px 50px 0 0;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
#heart:after { 
left: 0; 
   -webkit-transform: rotate(45deg); 
   -moz-transform: rotate(45deg); 
   -ms-transform: rotate(45deg); 
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   -o-transform-origin: 100% 100%;
   transform-origin :100% 100%;
}

Yin Yang

#yin-yang {
   width: 96px;
   height: 48px;
   background: #eee;
   border-color: red;
   border-style: solid;
   border-width: 2px 2px 50px 2px;
   border-radius: 100%;
   position: relative;
}
#yin-yang:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: #eee;
   border: 18px solid red;
   border-radius: 100%;
   width: 12px;
   height: 12px;
}
#yin-yang:after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: red;
   border: 18px solid #eee;
   border-radius:100%;
   width: 12px;
   height: 12px;
} 

Octagon

#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
   position:relative;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}