MAK E WORDPRESS RE ALTIME

THERE WILL BE <CODE> ON SCREEN

@_joshhillier
DEVELOPER DESIGNER

ADMIN
A JA X API
E XPRESS
SOCKET.IO

A JA X

ADMIN A JA X API. JS .PHP

E X AMPLE _ AC TION
WP_ A JA X _ E X AMPLE _ AC TION
WP_ A JA X _ NOPRIV_ E X AMPLE _ AC TION

<CODE>
<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>

<CODE>
<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>

<CODE>
<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>

<CODE>
<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>

<CODE>
FUNC TIONS.PHP
<?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 X
SUCCESS
PHP
ON REFRESH

REAL TIME
LOOPS

[A JA X ]

- T H E -
P OST M A N
A NA L O GY

YOUR SERVER
POR T:80POR T:8080

PACK AGE . JSON
APP. JS

<CODE>
/HOME /APP/PACK AGE. JSON
{
“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
<SHELL>

E XPRESS. JS //NODE FR AME WORK
BODY- PARSER //MIDDLE WARE FOR E XPRESS
SOCKET.IO //RE ALTIME MODULE
NPM

<CODE>
/HOME /APP/APP. JS
var express = require(‘express’);
var bodyParser = require(‘body-parser’);
var app = express();
var io = require(‘socket.io’).listen(app.listen(8080));
//Logs Into Terminal
console.log(‘connected’);
app.get(‘/’, function(req, res){
res.send(‘hello world’);
});

/home/app $ nodejs app.js
> connected!
<SHELL>

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

<CODE>
FUNC TIONS.PHP 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);
...

<CODE>
FUNC TIONS.PHP 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;
}

<CODE>
SERVER. 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);
});

<CODE>
INDE X .PHP
<script>
jQuery(function($){
socket.on(‘bid’, function (data) {
//Do Stuff with Post Object
});
});
</script>

[SERVER SIDE]
[CLIENT SIDE]

[ EX AMPLE ]

QUESTIONS?
@_ JOSHHILLIER