MAK E WORDPRESS RE ALT IME

THERE WILL BE <CODE> ON SCREEN

@_joshhillier

DEVELOPER DES IGNER

ADMINA JA X API

E XPRESSSOCK ET. IO

A JA X

ADMIN A JA X API. JS . PH P

E X AMPLE _ AC T ION

WP_ A JA X _ E X AMPLE _ AC T ION

WP_ A JA X _ NOPR IV_ E X AMPLE _ AC T ION

<CO D E>

<script>jQuery(function($)) { $(document).on(‘click’,’a.toc-goodbye’, function() { $.ajax({ url: ajaxurl, data: { id:’<?php echo get_current_user_id(); ?>’, action: ‘update_toc_meta’, security:$(‘.toc-goodbye’).data(‘nonce’), }, success: function(data) { $(‘.toc-box’).fadeOut(250); } }) })});</script>

<CO D E>

<script>jQuery(function($)) { $(document).on(‘click’,’a.toc-goodbye’, function() { $.ajax({ url: ajaxurl, data: { id:’<?php echo get_current_user_id(); ?>’, action: ‘update_toc_meta’, security:$(‘.toc-goodbye’).data(‘nonce’), }, success: function(data) { $(‘.toc-box’).fadeOut(250); } }) })});</script>

<CO D E>

<script>jQuery(function($)) { $(document).on(‘click’,’a.toc-goodbye’, function() { $.ajax({ url: ajaxurl, data: { id:’<?php echo get_current_user_id(); ?>’, action: ‘joshy_update_toc_meta’, security:$(‘.toc-goodbye’).data(‘nonce’), }, success: function(data) { $(‘.toc-box’).fadeOut(250); } }) })});</script>

<CO D E>

<script>jQuery(function($)) { $(document).on(‘click’,’a.toc-goodbye’, function() { $.ajax({ url: ajaxurl, data: { id:’<?php echo get_current_user_id(); ?>’, action: ‘update_toc_meta’, security:$(‘.toc-goodbye’).data(‘nonce’), }, success: function(data) { $(‘.toc-box’).fadeOut(250); } }) })});</script>

<CO D E>

F U N C T I O NS . PH P

<?php function update_toc_meta() { check_ajax_referer(‘toc-goodbye’, ‘security’); update_user_meta( $_REQUEST[‘id’], ’toc_goodbye’, true);}add_action(‘wp_ajax_update_toc_meta’, ‘update_toc_meta’);?>

[ EX AMPLE ]

=A JA XSUCCESS

PHPON REFRESH

REAL T IME LOOPS

[A JA X ]

- T H E -

P O S T M A NA N A L O G Y

YOUR SERVER

POR T:80POR T:8080

PACK AGE . JSONAPP. JS

<CO D E>

/ H O M E /A PP/ PAC K AGE. JS O N

{ “name”: “RealTimeTalk”, “version”: “0.0.1”, “description”: “WPBrum Realtime talk”, “dependencies”: { “socket.io”: “latest”, “express”: “latest”, “body-parser”:”latest” }, “author”: “joshy”}

$ cd /home/app

$ npm install

<SH EL L >

E XPRESS . JS // N O D E FR A M E W O R KBODY- PAR SER // M I D D L E WA R E F O R E X PR E S SSOCK ET. IO // R E A LT I M E M O D U L E

NPM

<CO D E>

/ H O M E /A PP/A PP. JS

var express = require(‘express’);var bodyParser = require(‘body-parser’);var app = express();var io = require(‘socket.io’).listen(app.listen(8080));//Logs Into Terminalconsole.log(‘connected’);

app.get(‘/’, function(req, res){ res.send(‘hello world’);});

/home/app $ nodejs app.js

> connected!

<SH EL L >

IO.EMIT( ‘EVENT’ ) IO.ON( ‘EVENT’ )

SER V ER C L I EN T

<CO D E>

F U N C T I O NS . PH P 1/ 2

add_action(‘wp_ajax_place_bid’,’place_bid’);function place_bid() { check_ajax_referer(‘bid-nonce’,’bid_nonce’);

$id = get_current_user_id();

$info = array ( ‘username’ => $userName = get_user_by(‘id’,$id)->user_nicename, ‘price’ => $_REQUEST[‘price’], ‘post_ID’ => $_REQUEST[‘post_id’] ); //Save to DB update_post_meta($_REQUEST[‘post_id’], ‘bid’, $info);

...

<CO D E>

F U N C T I O NS . PH P 2 / 2

...

//Send to Node. $data = json_encode($info); $api_url = ‘http://localhost:8080/emit/bid/’; $headers = array( ‘Content-Type’ => ‘application/json’, ‘Content-Length’ => strlen($data) );

$request = new WP_Http; $result = $request->request( $api_url , array( ‘method’ => ‘POST’, ‘body’ => $data, ‘headers’ => $headers ) );

die;}

<CO D E>

SER V ER . JS

app.use(bodyParser.json())

io.on(‘connection’, function (socket) {app.post(‘/emit/bid/’, function(req,res){ res.send(‘thanks’); io.emit(‘new-post’, req.body);});

<CO D E>

I N D E X . PH P

<script> jQuery(function($){ socket.on(‘bid’, function (data) {

//Do Stuff with Post Object }); });</script>

[SERVER S IDE]

[CL IENT S IDE]

[ EX AMPLE ]

QUESTIONS?

@_ JOSHHILL IER