4

I've had a thought of using Wordpress as a CMS backend, because well a lot of people know it and it is easy to use and then using Node.JS as the front-end. You're probably thinking now why would I want to do that in the first place, what is the advantage?

I want to use websockets and the wonderful Socket.io library for Node.JS provides beautiful cross-browser websockets support. Essentially I want a user to come to a site, a websocket is created and then content is fed to the frontend asynchronously as JSON and then decoded on the frontend all without page refreshing.

Effectively I am making Wordpress become a real-time CMS. You visit a site, but every link you click fetches the page as JSON and returns it via a websocket to save multiple requests and of course, page size.

How do I go about getting Node.JS talking to a MySQL database, pulling out info and then showing it? Any tutorials, resources and other useful tips would be gratefully appreciated. A few of my colleagues have wondered the same thing, so I think the answers will be a big help to everyone.

Dwayne Charrington
  • 6,524
  • 7
  • 41
  • 63
  • Node.js is a server side technology. Of course, if you want to develop command prompt or a thick client app you can use it but not within the browser. – Sandeep G B Dec 14 '11 at 10:22
  • See below my comments on Vahur's answer which explain things a bit better. I somewhat worded my question wrong by asking to use Node.JS as the frontend. – Dwayne Charrington Dec 14 '11 at 11:07

4 Answers4

10

To be exact, you can't use Node.js for a front-end solution, since it runs on the server, not the browser (think of it like any other server-side language such as PHP, JSP etc).

You can, however, create the described solution with jQuery or any other Javascript library, you just have to implement data transfer with Socket.IO. On the server-side you'd need something to handle websockets, so the most native way would be to use Node.js, but since you want to use Wordpress, it gets really complicated, as Wordpress is not meant to be used in the way you described, so I'm afraid you'd have to write your CMS from ground up in Node.

Also, the way you described has a huge flaw. Search engine crawlers are still unable to parse and run Javascript, so if all of your content is loaded dynamically, it would seem empty to Google and others, so it would be impossible to ever make it in the search results rendering your site pretty much useless.

For MySQL and other modules for Node, you should check NPM registry and the Node modules page.

EDIT After Dwayne explained his solution in comments, this is how I'd do it:

  1. I'd use jQuery for front-end. Binding the document with .on(), and setting the selector to 'a', so that every anchor on the webpage would fire the handler.
  2. The handler parses the a.href attribute and figures out whether it's an external link, which shouldn't be handled by Javascript, or if it's a link to the next page, to an article etc. You can prevent the default action by calling e.preventDefault() in the handler, which prevents the browser from redirecting to the location.
  3. Then the handler would get the content in JSON by calling .getJSON() to the URL based on the article. The easiest way would be to have a certain pattern (such as all urls like www.domain.com/api) redirect to the Node service via .htaccess, to prevent cross-domain problems.
  4. Node would then see the request, extract the parameters and figure out what the user wants. Then connect to the MySQL database with this module (it's as simple as it can get) and return the corresponding content formatted as JSON. Don't forget to set the Content-Type headers to 'application/json'.
  5. jQuery gets the response, figure out the type of the request and updates the content accordingly. Profit.

As you can see, I wouldn't use WebSockets in this case, since you wouldn't really benefit much from it. They are mostly meant for small real-time updates (no huge HTTP headers to reduce the bandwidth) that are both-ways. This means that the server could also push data into the browser, without the browser asking for it. In a blog context, this is not required, and you won't have too many request, so the difference in bandwidth wouldn't be noticeable anyway. If, however, you would like to use it for educational purposes, just basically replace the getJSON part with SocketIO, I'm not sure whether Apache supports proxying WebSockets, though. Extra information about SocketIO basics are here.

Community
  • 1
  • 1
zatatatata
  • 4,761
  • 1
  • 20
  • 41
  • Ah, of course. I had this silly idea that pages would support both in that on the frontend you load a page via its link and you get the non-JSON/dynamic page but if you click a link (path is still correct and crawlable) it appends /output/json on the end of the URL and returns JSON. So it's not possible to have Node.JS return JSON via a websocket if a URL has /output/json on the end and then use something like jQuery on the frontend to sort through the JSON array. Is something like that possible? – Dwayne Charrington Dec 14 '11 at 11:02
  • Also I'd like to add that I just want to use Wordpress as an admin backend, then use something like Node.JS to query the database if JSON is being request by looking in the posts table itself without using any Wordpress functions or anything like that. So use Node.JS to connect to the Wordpress table and pull out the required table rows myself. Does that make a bit more sense? So my question of using Node.JS on the frontend is somewhat a wrong way of putting it, I want Node.JS to return the JSON only and keep connection open via websockets to make things faster. – Dwayne Charrington Dec 14 '11 at 11:06
  • So the frontend is still a normal Wordpress website working the normal way, however all links have an onclick event binded to them that load pages (unless specified as external) if clicked via JSON which I want returned via a websocket to save multiple requests and keep things fast only pushing through content not images and whatnot. If a user or Google comes across the link they can still follow and the page will render like normal and act the same. – Dwayne Charrington Dec 14 '11 at 11:09
  • That makes sense, you could use Node.js (Socket.IO specifically) for that. All the link in my post are still valid, you can definitely use Node.js (& SIO) specifically for that. Also, with Socket.IO you don't have to worry is a user doesn't have a browser that supports WS, since Socket.IO can downgrade to long-polling or something else as a transport. – alessioalex Dec 14 '11 at 11:41
  • Fantastic, thanks Alessioalex. For some reason in my head I thought you had to render the HTML from Node.JS to use things like Socket.IO and whatnot, but that's not true. As you can probably tell I am knew to Node.JS, not server side programming but where Node.JS is a good fit and what I should be using it for type of thing. I appreciate you and Vahur's patience. – Dwayne Charrington Dec 14 '11 at 12:23
  • What you want is perfectly ok(the proof is that there is even a Drupal module for what you want). What you need to do is to start a Socket.IO server and include the Socket.IO client JavaScript code in your Wordpress pages. No need to render any html code or something else. – alessioalex Dec 14 '11 at 12:28
  • @Dwayne I updated the answer to give you the idea how I'd do it. – zatatatata Dec 14 '11 at 12:39
  • Thanks Vahur, excellent explanation. I'd be using websockets for more of a test if anything because I want to use them for something, haha. But definitely agree it would give no advantage really using it instead of an AJAX call. – Dwayne Charrington Dec 14 '11 at 13:34
  • @Dwayne As I mentioned, you might have problems regarding Apache proxying websockets, so I googled and found this http://serverfault.com/questions/290121/configuring-apache2-to-proxy-websocket Might be helpful. – zatatatata Dec 14 '11 at 13:48
  • Thanks Vahur, once again quite a lot of help. From reading that link and a few other places, would it make sense to have a Node.JS server running on a different port alongside Apache specifically for websockets? That way using a crafty .htaccess rule I redirect all requests with /json at the end of the URL or something to http://mydomain.com:8181/page-title and that Node.JS websocket server knows to query the MySQL database and return the content? Any potential problems you can see with that regarding performance and security limitations? – Dwayne Charrington Dec 14 '11 at 20:59
  • @Dwayne FYI Node simply can't use the same port as Apache at the same time, so you must use a different port anyway(such as 8080, 8181 etc). If you use the Apache modules mentioned in my link, you should be able to proxy WebSockets via Apache, so what you described should work. For extra large scale applications I'd recommend Ngnix instead of Apache, but no need to worry about that. – zatatatata Dec 14 '11 at 21:22
2

You should check out Wordscript which I recently added a Node JS example which can act as a simple front end for doing basic post retrieval from a Wordpress database.

It uses a common mysql library for node, and generates MySQL queries from get parameters and renders data as it is retrieved from the database; including tags.

Wordscript aims to free backend/frontend developers from being forced to work with the Wordpress PHP codebase, but still allows for Wordpress'es administrative interface to be used when needed (and prudent to do so). API's have been written in Ruby and PHP that both return JSON feeds and function generally the same way the node version does; so thats an additional option where a scripting language is available.

redcap3000
  • 928
  • 1
  • 8
  • 15
2

Edit: I overlooked the part with 'using Node.js on the front-end'. As Vahur Roosimaa said, Node.js is on the server-side (think of it as Nginx / Apache + PHP combination). Node isn't a frontend library like jQuery. If you want you can use it just for the websockets functionality (I suggest using Socket.IO).

Nice tutorials about Node.js and MySQL:

http://www.giantflyingsaucer.com/blog/?p=2596
http://mclear.co.uk/2011/01/26/very-simple-nodejs-mysql-select-query-example/
http://www.hacksparrow.com/using-mysql-with-node-js.html

This SO question might also help: MySQL with Node.js

Also check the examples from the github repo of node-mysql.

If you want something more advanced like an ORM, I recommend Sequelize.
Another good question from SO: Which ORM should I use for Node.js and MySQL?

Community
  • 1
  • 1
alessioalex
  • 62,577
  • 16
  • 155
  • 122
0

One option you have, if you want to have wordpress as the CMS and keep its admin UI, is to write your wordpress templates to output JSON instead of HTML.

In contrast to Wordscript, this is more solution specific, since you will need to write your JSON output for every template/data you want. The upside is that you can create the JSON specifically for your needs.

On the node side, you write a small server that will consume the JSON, letting you use whatever javascript template language you want. Nodejs will also help out with performance, since you can save the rendered content and/or the JSON output in memory, saving you roundtrips to the wordpress templates.

I wrote a blog about this, which describes more of the benefits of using nodejs and wordpress together.

http://www.1001.io/improve-wordpress-with-nodejs/

camme
  • 96
  • 6