Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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: {
...
<CODE>
<script>
jQuery(function($)) {
$(document).on(‘click’,’a.toc-goodbye’, function() {
$.ajax({
url: ajaxurl,
data: {
...
<CODE>
<script>
jQuery(function($)) {
$(document).on(‘click’,’a.toc-goodbye’, function() {
$.ajax({
url: ajaxurl,
data: {
...
<CODE>
<script>
jQuery(function($)) {
$(document).on(‘click’,’a.toc-goodbye’, function() {
$.ajax({
url: ajaxurl,
data: {
...
<CODE>
FUNC TIONS.PHP
<?php
function update_toc_meta() {
	 check_ajax_referer(‘toc-goodbye’, ‘security’);
	update_user_met...
[ 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”...
$ 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();
...
/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-non...
<CODE>
FUNC TIONS.PHP 2 /2
...
//Send to Node.
	 $data = json_encode($info);
	 $api_url = ‘http://localhost:8080/emit/bid/...
<CODE>
SERVER. JS
app.use(bodyParser.json())
io.on(‘connection’, function (socket) {
app.post(‘/emit/bid/’, function(req,r...
<CODE>
INDE X .PHP
<script>
	jQuery(function($){
		socket.on(‘bid’, function (data) {
			//Do Stuff with Post Object
		
		...
[SERVER SIDE]
[CLIENT SIDE]
[ EX AMPLE ]
QUESTIONS?
@_ JOSHHILLIER
Make WordPress realtime.
Upcoming SlideShare
Loading in …5
×

Make WordPress realtime.

1,440 views

Published on

Talk I did at WordCamp Birmingham, Exploring ways to make Wordpress work without page refreshes, using the Admin Ajax API and Node.JS with Socket.IO and Express.js

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Make WordPress realtime.

  1. 1. MAK E WORDPRESS RE ALTIME
  2. 2. THERE WILL BE <CODE> ON SCREEN
  3. 3. @_joshhillier DEVELOPER DESIGNER
  4. 4. ADMIN A JA X API E XPRESS SOCKET.IO
  5. 5. A JA X
  6. 6. ADMIN A JA X API. JS .PHP
  7. 7. E X AMPLE _ AC TION WP_ A JA X _ E X AMPLE _ AC TION WP_ A JA X _ NOPRIV_ E X AMPLE _ AC TION
  8. 8. <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>
  9. 9. <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>
  10. 10. <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>
  11. 11. <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>
  12. 12. <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’); ?>
  13. 13. [ EX AMPLE ]
  14. 14. =A JA X SUCCESS PHP ON REFRESH
  15. 15. REAL TIME LOOPS
  16. 16. [A JA X ]
  17. 17. - T H E - P OST M A N A NA L O GY
  18. 18. YOUR SERVER POR T:80POR T:8080
  19. 19. PACK AGE . JSON APP. JS
  20. 20. <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” }
  21. 21. $ cd /home/app $ npm install <SHELL>
  22. 22. E XPRESS. JS //NODE FR AME WORK BODY- PARSER //MIDDLE WARE FOR E XPRESS SOCKET.IO //RE ALTIME MODULE NPM
  23. 23. <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’); });
  24. 24. /home/app $ nodejs app.js > connected! <SHELL>
  25. 25. IO.EMIT(‘EVENT’) IO.ON(‘EVENT’) SERVER CLIENT
  26. 26. <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); ...
  27. 27. <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; }
  28. 28. <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); });
  29. 29. <CODE> INDE X .PHP <script> jQuery(function($){ socket.on(‘bid’, function (data) { //Do Stuff with Post Object }); }); </script>
  30. 30. [SERVER SIDE] [CLIENT SIDE]
  31. 31. [ EX AMPLE ]
  32. 32. QUESTIONS? @_ JOSHHILLIER

×