theoleschool - nodejs http://theoleschool.com/tags/nodejs en Using Drupal Content Channel Tokens with Nodejs http://theoleschool.com/blog/using-drupal-content-channel-tokens-nodejs <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>You've decided to add a bit of Node.js functionality to your Drupal site using the <a href="https://drupal.org/project/nodejs">Drupal Nodejs Module</a>. After <a href="http://theoleschool.com/blog/module-development-nodejs-integration">some reading</a> you realize you need to be setting up user message channels using <span class="geshifilter"><code class="php geshifilter-php">hook_nodejs_user_channels</code></span> or possibly <span class="geshifilter"><code class="php geshifilter-php">nodejs_add_user_to_channel</code></span>. This allows your application to send socket messages to groups of users. Great! But you're writing no simple application. You want to go one step further and manage these channels based not only on some property of the user object, but all users who may be currently viewing a particular Drupal served page. Suddenly the typical user channels no longer cut it. Try as you might, you'll find yourself quickly descending into channel management hell. There has got to be a better way. Thankfully content token channels are here to help.</p> <h3>Send a Message Based on the Content Being Viewed</h3> <p>You can think of content token channels as a per page (or piece of content) channel subscription. This differs from the user channels in that it targets users who are currently viewing a specific page rather than users targeted by some property of the user object (regardless of where they are on the site).</p> <p>There are two main PHP functions to implement a token channel. <span class="geshifilter"><code class="php geshifilter-php">nodejs_send_content_channel_token</code></span> to generate a token channel for a given piece of content, and <span class="geshifilter"><code class="php geshifilter-php">nodejs_send_content_channel_message</code></span> to send a message to users subscribed to a given content channel.</p> <p>To illustrate this lets assume we want to create a channel to send user messages when they are viewing a Drupal node of type <em>page</em>. To begin we will need to setup our content channel for that node type. A good place to do this would be <span class="geshifilter"><code class="php geshifilter-php">hook_node_view</code></span> which fires when a user views a node.</p> <div class="geshifilter"><div class="php geshifilter-php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> example_node_view<span style="color: #009900;">&#40;</span><span style="color: #000088;">$node</span><span style="color: #339933;">,</span> <span style="color: #000088;">$view_mode</span><span style="color: #339933;">,</span> <span style="color: #000088;">$langcode</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br /> &nbsp; <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$node</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">type</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;page&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br /> &nbsp; &nbsp; nodejs_send_content_channel_token<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'page_node_channel'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br /> &nbsp; <span style="color: #009900;">&#125;</span><br /> <span style="color: #009900;">&#125;</span></div></div> <p>Now every time a node of type <em>page</em> is viewed the Node.js server is notified of the <em>page&#95;node&#95;channel</em> content channel. Node.js then adds the channel to the user for whom the page was rendered.</p> <p>From here if we wish to send a message to all of the users viewing a node of type <em>page</em> we make a simple call to <span class="geshifilter"><code class="php geshifilter-php">nodejs_send_content_channel_message</code></span>. When and where you choose to fire this message is up to you. Possibly you want to notify users if the page they are viewing has been updated (<span class="geshifilter"><code class="php geshifilter-php">hook_node_update</code></span>), a user logs in (<span class="geshifilter"><code class="php geshifilter-php">hook_user_login</code></span>), or some new content was added (<span class="geshifilter"><code class="php geshifilter-php">hook_node_insert</code></span>).</p> <div class="geshifilter"><div class="php geshifilter-php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Build a message object</span><br /> <span style="color: #000088;">$message</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br /> <span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">channel</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'page_node_channel'</span><span style="color: #339933;">;</span><br /> <span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">data</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'body'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'Hello World!'</span><span style="color: #339933;">;</span><br /> <br /> <span style="color: #666666; font-style: italic;">// Send the message to the channel we created</span><br /> nodejs_send_content_channel_message<span style="color: #009900;">&#40;</span><span style="color: #000088;">$message</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div> <p>And that's about it! When <span class="geshifilter"><code class="php geshifilter-php">nodejs_send_content_channel_message</code></span> fires our message will be broadcast to all users subscribed to the page_node_channel. In this case all users who are currently viewing a node of type <em>page</em>. This message behaves like any other on the Node.js side, so you could send it to a custom callback handler, as mentioned <a href="http://theoleschool.com/blog/module-development-nodejs-integration">in an earlier post</a>.</p> <h3>Token Messages From an Node.js Extension</h3> <p>If you are writing a Node.js server extension and wish to send a message to a content channel, it is worth noting that there is no immediately exposed functionality to do this. However, Node.js server extensions are aware of what the content channels are via <span class="geshifilter"><code class="php geshifilter-php">config<span style="color: #339933;">.</span>tokenChannels</code></span>. This allows us to mimic the functionality of the Drupal Node.js server with a helper method in our server extension.</p> <div class="geshifilter"><div class="jquery geshifilter-jquery" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> sendMessageToTokenChannel<span style="color: #009900;">&#40;</span>message<span style="color: #339933;">,</span> config<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br /> &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>message.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'channel'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br /> &nbsp; &nbsp; console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'publishMessageToContentChannel: An invalid message object was provided.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br /> &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span><br /> &nbsp; <span style="color: #009900;">&#125;</span><br /> &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>config.<span style="color: #660066;">tokenChannels</span>.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>message.<span style="color: #660066;">channel</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br /> &nbsp; &nbsp; console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'publishMessageToContentChannel: The channel &quot;'</span> <span style="color: #339933;">+</span> message.<span style="color: #660066;">channel</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; doesn<span style="color: #000099; font-weight: bold;">\'</span>t exist.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br /> &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span><br /> &nbsp; <span style="color: #009900;">&#125;</span><br /> <br /> &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> socketId <span style="color: #000066; font-weight: bold;">in</span> config.<span style="color: #660066;">tokenChannels</span><span style="color: #009900;">&#91;</span>message.<span style="color: #660066;">channel</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">sockets</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br /> &nbsp; &nbsp; config.<span style="color: #660066;">publishMessageToClient</span><span style="color: #009900;">&#40;</span>socketId<span style="color: #339933;">,</span> message<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br /> &nbsp; <span style="color: #009900;">&#125;</span><br /> <span style="color: #009900;">&#125;</span></div></div> <p>Adding this method to your server extension, will allow you to send messages to a content channel, by passing the message and config objects from within your <span class="geshifilter"><code class="php geshifilter-php">exports<span style="color: #339933;">.</span>setup</code></span> function.</p> <p>Using content token channels has greatly simplified several of the Drupal/Node.js projects I have done. However, it wasn't immediately apparent that this functionality existed. So I hope this helps to further clarify the capabilities of this module.</p> </div></div></div> Mon, 28 Apr 2014 17:29:06 +0000 rho 165 at http://theoleschool.com Hubot Drush me Drupal http://theoleschool.com/blog/hubot-drush-me-drupal <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Recently the company I work for shifted the bulk of our instant message communications over to <a href="http://campfirenow.com/">Campfire</a>, and established a series of rooms to discuss our various projects. This transition seemed to go fairly well, once everyone settled on their preferred client interface. I was used to using IRC and found a <a href="https://github.com/zerowidth/camper_van">nice little Ruby gem</a> that piped Campfire through my IRC client. Chatting in this environment quickly had me missing Druplicon, the friendly Drupal fueled chat bot that tirelessly serves the Drupal IRC community. I decided to look for a replacement, and after some searching I stumbled upon <a href="http://hubot.github.com/">Hubot</a>, a Node.js powered chat bot. It was initially built by the folks at GitHub and includes a long list of <a href="http://hubot-script-catalog.herokuapp.com/">plugin scripts</a> added by community developers. This was immediately appealing for several reasons:</p> <ul> <li>It is built using Node.js</li> <li>It is written in Coffeescript (something I have wanted to try my hand at for a while)</li> <li>Additional scripts appeared easy to write, and plugin simply</li> <li>It has built in Campfire integration</li> </ul> <p>So I installed Hubot on a small server, with a handful of scripts that I thought would be useful and fun for our team. Adding the bot to our Campfire rooms was fairly painless, and after writing a small init script we were good to go. This sparked some discussion among our team about how the bot was deployed, cool ways it could be extended, and methods of use. A fellow developer, <a href="http://davidfells.net/">David Fells</a>, mentioned that it would be handy if we could tell Hubot to execute <a href="http://drupal.org/project/drush">Drush</a> commands. This gave me pause, and after a quick:</p> <p>"That's a great idea! You mind if I implement that?"<br /> "Sure, go for it."</p> <p>I found myself firing up my editor, trying a few test methods, and reading up on <a href="http://coffeescript.org/">CoffeeScript</a>. Things moved fairly quickly, once I got going. I realized <a href="http://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options"><code>child_process.spawn()</code></a>was going to be my friend, a core Node method that I had yet to use. Generally CoffeeScript proved to be the biggest challenge. While writing the initial prototype I actually used a <a href="http://js2coffee.org/">JavaScript to CoffeScript translator</a> and was cursing the whole time. However, by the time I was putting the finishing touches on my methods and objects I found myself smiling as I wrote in this almost comical syntax. Simply put, CoffeeScript is fun! I still find myself favoring the comforting structure of the curly braces and semicolons when working with JavaScript, but now that all seems somewhat gray and drab, knowing there is something much more playful out there.</p> <p>As you can imagine there were, and are, several security concerns. The early prototype actually had user commands pipe right into Drush which is a security nightmare. Any user with access to the bot could escape or pipe in any old Bash command directly through the bot. Further, any Drupal installation that Drush is aware of would be at the mercy of users who may or may not have the best intentions at heart. Needless to say this approach was quickly abandoned in favor of a hand picked list of commands made available to the bot. This caused the code to be a bit more tedious, and likely less elegant, but I needed to insure that Drush would be executing the allowed commands, and nothing more. After some discussion I also decided to weed the available commands down to a relatively innocuous set (giving information vs. actually changing something). I attempted to structure the code in a way that it would not be difficult for another developer to add commands. Overall, I'm pretty happy with the <a href="https://github.com/github/hubot-scripts/blob/master/src/scripts/drush.coffee">end result</a>, and the pull request was soon accepted. You can find this script along with all of the other <a href="http://hubot-script-catalog.herokuapp.com/#drush.coffee">Hubot scripts on GitHub</a>.</p> <p><em><strong>tl;dr</strong> If you're looking for a fun chatbot for campfire (or otherwise) check out <a href="http://hubot.github.com/">Hubot</a> and enable <a href="http://hubot-script-catalog.herokuapp.com/#drush.coffee">drush.coffee</a> if you'd like that bot to have cool Drush functionality.</em></p> </div></div></div> Wed, 08 May 2013 04:15:48 +0000 rho 163 at http://theoleschool.com Talking to Drupal with Node.js http://theoleschool.com/blog/talking-drupal-nodejs <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>As I've mentioned in a <a href="/blog/module-development-nodejs-integration">previous post</a> sending messages from Drupal to Node is fairly easy to accomplish. However, that is only part of the equation. If we're really wanting to build a larger, more complex Node application, it won't be long before we need the client to talk to the Node server and possibly the Node server to talk to Drupal. At a glance it isn't terribly obvious how to do this with the <a href="http://drupal.org/project/nodejs">nodejs integration module</a>, but it turns out there are a few tools tucked in the module code that come to the rescue.</p> <p>This post will assume some familiarity with the use of the server extension functionality built into the nodejs module. If you are unfamiliar with this, have a look at the <a href="http://drupalcode.org/project/nodejs.git/blob/4dd8f7808feb70d2f71c6978336ffeaed7eef65a:/nodejs.server.extension.js.example">example server extension</a> included with the module. In short it does what you might think, allowing other modules to extend the nodejs server setup by the nodejs module. For context I've posted a fully commented <a href="https://github.com/rh0/node_to_drupal">example module</a> to GitHub from which the code snippets of this post are taken.</p> <p>If you are familiar with writing node apps with <a href="http://socket.io/">Socket.io</a> then you are likely already familiar with client side communication back to the node server. Typically you will have a <span class="geshifilter"><code class="php geshifilter-php">socket<span style="color: #339933;">.</span>emit</code></span> on the client side, and a listener to handle the message event on the server side. The same is true when using the nodejs module. In this example I'm building a very simple form with Drupal and displaying it on a page. When the submit button is hit, a bit of client side javascript emits a message through socket.io which is in the <span class="geshifilter"><code class="php geshifilter-php">Drupal<span style="color: #339933;">.</span>Nodejs</code></span> object. </p> <div class="geshifilter"><div class="jquery geshifilter-jquery" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// A simple message.  The listener on the server side does not like us to</span><br /><span style="color: #006600; font-style: italic;">// specify 'messageType' so we're calling it 'type' for now.</span><br /><span style="color: #003366; font-weight: bold;">var</span> message <span style="color: #339933;">=</span> <span style="color: #009900;">{</span><br />   type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'nodeToDrupal'</span><span style="color: #339933;">,</span><br />   messageBody<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Hello from the client side!'</span><br /><span style="color: #009900;">}</span><span style="color: #339933;">;</span><br /><br /> Drupal.<span style="color: #660066;">behaviors</span>.<span style="color: #660066;">sendDrupalMessage</span> <span style="color: #339933;">=</span> <span style="color: #009900;">{</span><br />   attach<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><a href="http://docs.jquery.com/Core/context"><span style="color: #000066;">context</span></a><span style="color: #339933;">,</span> settings<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />     <span style="color: #006600; font-style: italic;">// Have our message emitter fire on form submission.</span><br />     <span style="color: #000066;">$</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"#node-to-drupal-form"</span><span style="color: #009900;">)</span>.<a href="http://docs.jquery.com/Events/submit"><span style="color: #000066;">submit</span></a><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />       Drupal.<span style="color: #660066;">Nodejs</span>.<span style="color: #660066;">socket</span>.<span style="color: #660066;">emit</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'message'</span><span style="color: #339933;">,</span> message<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />       <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span><br />     <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #009900;">}</span><br /><span style="color: #009900;">}</span></div></div> <p>On the server side, in our server extension file, we need to catch our message. This is done in a fairly standard way, the event we are listening for is <span class="geshifilter"><code class="php geshifilter-php">client<span style="color: #339933;">-</span>message</code></span>.</p> <div class="geshifilter"><div class="jquery geshifilter-jquery" style="font-family:monospace;"> <br /> exports.<span style="color: #660066;">setup</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">(</span>config<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />   process.<span style="color: #660066;">on</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'client-message'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">(</span>sessionId<span style="color: #339933;">,</span> message<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />     <span style="color: #006600; font-style: italic;">// Logging the message to the console.</span><br />     console.<span style="color: #660066;">log</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Got a message from the client.  Take a look: '</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />     console.<span style="color: #660066;">log</span><span style="color: #009900;">(</span>message<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br /><span style="color: #009900;">}</span></div></div> <p>If a client message comes through, we log it to the console. For a lot of node applications our worries are over. We have a way for the client to send a message to the node server. From there we can have the node server do whatever we would like with it. Maybe spit a message back out to the client, to a different session, to a Redis store, or any number of other things. Now the big question. What if we want the node server to send a message to Drupal? There are several reasons we may want to do this, but chief among them would be a database write. The idea of having node write directly to the Drupal database, while possible, would surely harm large baskets full of kittens. It's a bad idea. So we need node to tell Drupal to do its bidding, and for that we need to look at a <span class="geshifilter"><code class="php geshifilter-php">hook_nodejs_message_callback</code></span>. This hook allows us to assign handler functions to various message types that being emitted from the node server, and is wonderfully simple.</p> <div class="geshifilter"><div class="drupal6 geshifilter-drupal6" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> node_to_drupal_nodejs_message_callback<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$type</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span><br />   <span style="color: #b1b100;">switch</span><span style="color: #66cc66;">(</span><span style="color: #0000ff;">$type</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span><br />     <span style="color: #b1b100;">case</span> <span style="color: #ff0000;">'nodeToDrupal'</span>:<br />       <span style="color: #b1b100;">return</span> <a href="http://www.php.net/array"><span style="color: #000066;">array</span></a><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'node_to_drupal_handler'</span><span style="color: #66cc66;">)</span>;<br />   <span style="color: #66cc66;">}</span><br />   <span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">false</span>;<br /><span style="color: #66cc66;">}</span></div></div> <p>The hook is fired on an <span class="geshifilter"><code class="php geshifilter-php">sendMessageToBackend</code></span> call from the node server and passes in <span class="geshifilter"><code class="php geshifilter-php">messageType</code></span> from the message. In our case the type is <span class="geshifilter"><code class="php geshifilter-php">nodeToDrupal</code></span> (more on this in a bit). The hook is expected to return and array of function names, that will subsequently be called. In this case <span class="geshifilter"><code class="php geshifilter-php">node_to_drupal_handler</code></span>.</p> <div class="geshifilter"><div class="drupal6 geshifilter-drupal6" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> node_to_drupal_handler<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$message</span>, <span style="color: #66cc66;">&amp;</span><span style="color: #0000ff;">$responce</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span><br />   <span style="color: #808080; font-style: italic;">// Grab our messageBody from the client message and post it to the watchdog.</span><br />   <a href="http://api.drupal.org/api/function/watchdog/6"><span style="color: #000066;">watchdog</span></a><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'node_to_drupal'</span>, <span style="color: #0000ff;">$message</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'messageBody'</span><span style="color: #66cc66;">]</span>, <a href="http://www.php.net/array"><span style="color: #000066;">array</span></a><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>, <a href="http://api.drupal.org/api/constant/WATCHDOG_INFO/6"><span style="color: #000000; font-weight: bold;">WATCHDOG_INFO</span></a><span style="color: #66cc66;">)</span>;<br />   <span style="color: #808080; font-style: italic;">// Tell node we got the message.</span><br />   <span style="color: #0000ff;">$responce</span> = <span style="color: #ff0000;">'Message logged to Watchdog!'</span>;<br /><span style="color: #66cc66;">}</span></div></div> <p>The handler functions called from <span class="geshifilter"><code class="php geshifilter-php">hook_nodejs_message_callback</code></span> expect two parameters. The message from node (as an array), and a response passed by reference. In this example we're make a simple watchdog entry of the <span class="geshifilter"><code class="php geshifilter-php">messageBody</code></span>, and adding a string to the response stating that Drupal got the message.</p> <p>Going back to our node server extension, we're going to fire the message we got from the client over to Drupal. To do this were going to use a handy function in our config variable called <span class="geshifilter"><code class="php geshifilter-php">sendMessageToBackend</code></span>. Our server extension code is now looking like: </p><div class="geshifilter"><div class="jquery geshifilter-jquery" style="font-family:monospace;">exports.<span style="color: #660066;">setup</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">(</span>config<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />   process.<span style="color: #660066;">on</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'client-message'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">(</span>sessionId<span style="color: #339933;">,</span> message<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />     <span style="color: #006600; font-style: italic;">// Logging the message to the console.</span><br />     console.<span style="color: #660066;">log</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Got a message from the client.  Take a look: '</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />     console.<span style="color: #660066;">log</span><span style="color: #009900;">(</span>message<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br /><br />     <span style="color: #006600; font-style: italic;">// Insuring that messageType is set before passing along.</span><br />     message.<span style="color: #660066;">messageType</span> <span style="color: #339933;">=</span> message.<span style="color: #660066;">type</span><span style="color: #339933;">;</span><br />     <span style="color: #006600; font-style: italic;">// Send the message to Drupal.</span><br />     config.<span style="color: #660066;">sendMessageToBackend</span><span style="color: #009900;">(</span>message<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><a href="http://docs.jquery.com/Events/error"><span style="color: #000066;">error</span></a><span style="color: #339933;">,</span> responce<span style="color: #339933;">,</span> body<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />       <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span><a href="http://docs.jquery.com/Events/error"><span style="color: #000066;">error</span></a><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />         console.<span style="color: #660066;">log</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Error sending message to backend.'</span><span style="color: #339933;">,</span> <a href="http://docs.jquery.com/Events/error"><span style="color: #000066;">error</span></a><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />         <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span><br />       <span style="color: #009900;">}</span><br />       <span style="color: #006600; font-style: italic;">// Drupal got it! Output the responce.</span><br />       console.<span style="color: #660066;">log</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Response from drupal: '</span><span style="color: #339933;">,</span> body<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />     <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #009900;">}</span><span style="color: #009900;">)</span><br /><span style="color: #009900;">}</span><span style="color: #339933;">;</span></div></div> <p>We grab our message from the client and send it to the Drupal backend, then upon success log Drupal's response to the console. Now our little message chain is complete! We have a message coming from the client side to the node server upon a user action. Then node passes that message along to Drupal which records it in the watchdog. This means that not only can we have our node server interacting back and forth with the client, but also have tremendous flexibility over how the node server can interact with Drupal.</p></div></div></div> Mon, 29 Oct 2012 01:36:31 +0000 rho 162 at http://theoleschool.com Module Development with NodeJS Integration http://theoleschool.com/blog/module-development-nodejs-integration <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>I've been spending some time experimenting with <a href="http://nodejs.org/">NodeJS</a> in relation to the Drupal environment. In many of these Node/Drupal interactions the <a href="http://drupal.org/project/nodejs">NodeJS Integration module</a> has become a key player. There is a very helpful pdf from <a href="http://www.drupalcampnj.org/sessions/drupal-and-nodejs">a talk that beejeebus gave at Drupal camp New Jersey</a> that gives few great visualizations of the underlying principles of how this module works. In essence it "takes care of the plumbing," leaving you, the developer, free to focus on how you would like to integrate. The module is easy to use, and provides a nice set of functions to quickly get rolling. To that point I would like to give a very simple example demonstrating the use of the nodejs integration module.</p> <p>It's perhaps easiest to think of this integration as allowing Drupal to send messages (data) to a client via NodeJS "plumbing." I feel that the simplest and most transparent example is to allow the user to control what that message is and when it is sent. In this demonstration we build a simple form. This form allows a user to enter a message into a text field. Then on submit, it sends that message to all connected sockets and replaces a bit of <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #339933;">&lt;</span>h3<span style="color: #339933;">&gt;</span></code></span> markup within the form. This is very similar to the "broadcast notifications" form included with the NodeJS integration module, but much simpler.</p> <p>To help visualize this I've setup an install to show <a href="http://demo.theoleschool.com/swap">this demo in action</a>. If no one else is viewing the demo page while you are, which very likely will be the case, then I encourage you to open another session (open the page in another browser) and arrange the browser windows so you can see them both at once. This way, when you submit in one session, you can see the text in the header change on the other. I've also checked in <a href="https://github.com/rh0/swapit_demo">the code on github</a> to help fill in the gaps from the snippets I provide here, and hopefully help to make sense of my yammering. So with that, lets get into a bit more detail...</p> <h3 id="considerations">Begin with a few considerations.</h3> <p>When you set out to create your module using NodeJS integration it may help to ask yourself some simple questions.</p> <ul><li>Who receives the message?</li> <li>What is the message?</li> <li>How is the message triggered?</li> <li>What will be done with the message once it is received?</li> </ul><h3 id="who-receives">Who receives the message?</h3> <p>After a user has requested a connection to socket.io, NodeJS sends this authentication token to Drupal. Drupal then sends back a list of channels the user can "listen" on. To manage which channels a user is assigned to we can use <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #000000; font-weight: bold;">function</span> hook_nodejs_user_channels<span style="color: #009900;">(</span><span style="color: #000088;">$auth_user</span><span style="color: #009900;">)</span></code></span>. The <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #000088;">$auth_user</span></code></span> parameter is the user that is being authenticated. Any checks you might need to perform on the user to determine if they should be assigned a channel can be done here.</p><p> </p><p>In our example we're keeping this really simple. We want to send the message to all users so we give everyone who authenticates the 'swapit_demo' channel.</p> <div class="geshifilter"><div class="php geshifilter-php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> swapit_demo_nodejs_user_channels<span style="color: #009900;">(</span><span style="color: #000088;">$auth_user</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />   <span style="color: #000088;">$channels</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">'swapit_demo'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #b1b100;">return</span> <span style="color: #000088;">$channels</span><span style="color: #339933;">;</span><br /><span style="color: #009900;">}</span></div></div> <h3 id="what-sends">What is the message and how is it triggered?</h3> <p>The message itself is a small object that contains the data it is intended to send, along with some information on how/where to send it. The trigger could really be anything and will likely be pretty obvious based on your use case. In our example module, we're providing the users a form to allow them to write the message that will then be sent on submit. So all of the magic happens in our submit function.</p> <div class="geshifilter"><div class="php geshifilter-php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> swapit_demo_swap_submit<span style="color: #009900;">(</span><span style="color: #000088;">$form</span><span style="color: #339933;">,</span> <span style="color: #339933;">&amp;</span><span style="color: #000088;">$form_state</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />   <span style="color: #000088;">$user_msg</span> <span style="color: #339933;">=</span> check_plain<span style="color: #009900;">(</span><span style="color: #000088;">$form_state</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'values'</span><span style="color: #009900;">]</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'user_message'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #666666; font-style: italic;">//just doing a quick variable set to store the string.</span><br />   variable_set<span style="color: #009900;">(</span><span style="color: #0000ff;">'demo_message'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$user_msg</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #666666; font-style: italic;">//broadcasting the string to our listening javascript in waiting</span><br />   <span style="color: #000088;">$message</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />   <span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">channel</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'swapit_demo'</span><span style="color: #339933;">;</span><br />   <span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">broadcast</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #339933;">;</span><br />   <span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">data</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'body'</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$user_msg</span><span style="color: #339933;">;</span><br />   <span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">callback</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'swapIt'</span><span style="color: #339933;">;</span><br />   nodejs_send_message<span style="color: #009900;">(</span><span style="color: #000088;">$message</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br /><span style="color: #009900;">}</span></div></div> <p>Here we are grabbing the form data from our textfield, and inserting it into a message object. <em>Note how we are setting the channel to the one we set back in <span class="geshifilter"><code class="php geshifilter-php">hook_nodejs_user_channels</code></span>.</em> Passing this object to <span class="geshifilter"><code class="php geshifilter-php">node_send_message</code></span> will get NodeJS to broadcast to all connected sockets having the 'swapit_demo' channel. The <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">data</span></code></span> array contains our user submitted message. The <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #0000ff;">'body'</span></code></span> key is arbitrary.</p><p> </p><h3 id="what-will-be-done">What will be done with the message?</h3> <p>Now that we have a message being broadcast we need to have a bit of javascript on the client side that will receive and do something with it. In our case, we simply want to replace the text in our given HTML element.</p> <div class="geshifilter"><div class="jquery geshifilter-jquery" style="font-family:monospace;">Drupal.<span style="color: #660066;">Nodejs</span>.<span style="color: #660066;">callbacks</span>.<span style="color: #660066;">swapIt</span> <span style="color: #339933;">=</span> <span style="color: #009900;">{</span><br />   <span style="color: #006600; font-style: italic;">//grab the message and inject into the header</span><br />   callback<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">(</span>message<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />     <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>message.<span style="color: #660066;">channel</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'swapit_demo'</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />       <span style="color: #000066;">$</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'form #nodejs-selector'</span><span style="color: #009900;">)</span>.<a href="http://docs.jquery.com/Attributes/html"><span style="color: #000066;">html</span></a><span style="color: #009900;">(</span>message.<a href="http://docs.jquery.com/Core/data"><span style="color: #000066;">data</span></a>.<span style="color: #660066;">body</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />     <span style="color: #009900;">}</span><br />   <span style="color: #009900;">}</span><br /><span style="color: #009900;">}</span><span style="color: #339933;">;</span></div></div> <p>We first define a callback function to receive the message. Note how the callback name is passed to the message object in the submit function in the previous snippet. Our function now verifies the channel on the message object, and uses the message data to replace the text in the <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #666666; font-style: italic;">#nodejs-selector</span></code></span> element. Notice how <span class="geshifilter"><code class="php geshifilter-php"><span style="color: #000088;">$message</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">data</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'body'</span><span style="color: #009900;">]</span></code></span> has translated to <span class="geshifilter"><code class="jquery geshifilter-jquery">message.<a href="http://docs.jquery.com/Core/data"><span style="color: #000066;">data</span></a>.<span style="color: #660066;">body</span></code></span> in the javascript. All that remains is to tell the nodejs integration module about the file containing our client side javascript.</p> <div class="geshifilter"><div class="php geshifilter-php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> swapit_demo_nodejs_handlers_info<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br />   <span style="color: #b1b100;">return</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">(</span><br />     drupal_get_path<span style="color: #009900;">(</span><span style="color: #0000ff;">'module'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'swapit_demo'</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'/swapit_demo.client.js'</span><span style="color: #339933;">,</span><br />   <span style="color: #009900;">)</span><span style="color: #339933;">;</span><br /><span style="color: #009900;">}</span></div></div> <p>That about sums it up in the simplest way I knew how. I welcome any questions, and would love to hear of others experience with this useful module</p> <h3>Resources:</h3> <ul><li>NodeJS Integration module ( <a href="http://drupal.org/project/nodejs">http://drupal.org/project/nodejs</a> )</li> <li>beejeebus' talk at Drupalcamp NJ ( <a href="http://www.drupalcampnj.org/sessions/drupal-and-nodejs">http://www.drupalcampnj.org/sessions/drupal-and-nodejs</a> )</li> <li>Demonstration of this module ( <a href="http://demo.theoleschool.com/swap">http://demo.theoleschool.com/swap</a> )</li> <li>This code on github ( <a href="https://github.com/rh0/swapit_demo">https://github.com/rh0/swapit_demo</a> )</li> </ul></div></div></div> Sat, 21 Apr 2012 15:49:34 +0000 rho 160 at http://theoleschool.com