[NaCl SDK] nacl_io: Add flow control the JavaScript pipes.

native_client_sdk/src/examples/demo/nacl_io/example.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 function moduleDidLoad() {
   common.hideModule();
 }
 
 function $(id) {
   return document.getElementById(id);
@@ skipping 22 matching lines @@
   var functionEls = document.querySelectorAll('.function');
   for (var i = 0; i < functionEls.length; ++i) {
     var functionEl = functionEls[i];
     var id = functionEl.getAttribute('id');
     var buttonEl = functionEl.querySelector('button');
 
     // The function name matches the element id.
     var func = window[id];
     buttonEl.addEventListener('click', func);
   }
+
+  $('pipe_input_box').addEventListener('keypress', onPipeInput)
+  $('pipe_output').disabled = true;
+
+  var onChange = function(e) {

[binji, 2014/05/01 20:22:31]

this function is small enough to inline, IMO

[Sam Clegg, 2014/05/01 22:16:55]

Done.

+    $('pipe_output').value = '';
+  }
+  $('pipe_name').addEventListener('change', onChange);
+}
+
+// Called with keypress events on the pipe input box
+function onPipeInput(e) {
+  // Create an arraybuffer containing the 16-bit char code
+  // from the keypress event.
+  var buffer = new ArrayBuffer(1*2);
+  var bufferView = new Uint16Array(buffer);
+  bufferView[0] = e.charCode;
+
+  // Pass the buffer in a dictionary over the NaCl module
+  var pipeSelect = $('pipe_name');
+  var pipeName = pipeSelect[pipeSelect.selectedIndex].value;
+  var message = {};
+  message[pipeName] = ['write', buffer];
+  nacl_module.postMessage(message);
+  e.preventDefault();
+  return false;
 }
 
 function onRadioClicked(e) {
   var divId = this.id.slice(5);  // skip "radio"
   var functionEls = document.querySelectorAll('.function');
   for (var i = 0; i < functionEls.length; ++i) {
     var visible = functionEls[i].id === divId;
     if (functionEls[i].id === divId)
       functionEls[i].removeAttribute('hidden');
     else
@@ skipping 219 matching lines @@
 function postCall(func) {
   var callback = arguments[arguments.length - 1];
   funcToCallback[func] = callback;
 
   nacl_module.postMessage({
     cmd: func,
     args: Array.prototype.slice.call(arguments, 1, -1)
   });
 }
 
+function ArrayBufferToString(buf) {
+  return String.fromCharCode.apply(null, new Uint16Array(buf));

[binji, 2014/05/01 20:22:31]

probably not an issue here, but this fails for large array buffers.

+}
+
 // Called by the common.js module.
 function handleMessage(message_event) {
   var data = message_event.data;
   if ((typeof(data) === 'string' || data instanceof String)) {
     common.logMessage(data);
+  } else if (data instanceof Object) {
+    var channelName = Object.keys(data)[0]

[binji, 2014/05/01 20:22:31]

This seems clunky to me. It would be nicer to have a fixed key that you could
check to get the channel name:
{"channel": "jspipe1", "data": <ArrayBuffer>}

In any case, you can reverse this check and look for "cmd". It is always defined
in a response message.

[Sam Clegg, 2014/05/01 22:16:55]

I guess it will make the code slightly large and the objects slightly larger..
but I think I agree with you.  I'll give it a go.

+    if (channelName == 'jspipe1' ||

[binji, 2014/05/01 20:22:31]

nit: === here and everywhere

[Sam Clegg, 2014/05/01 22:16:55]

Done.

+        channelName == 'jspipe2' ||
+        channelName == 'jspipe3') {
+      // Message for JavaScript I/O pipe
+      var command = data[channelName];
+      if (command[0] == 'write') {
+        $('pipe_output').value += ArrayBufferToString(command[1]);
+      } else if (command[0] == 'ack') {
+        common.logMessage(channelName + ": ack:" + command[1]);
+      } else {
+        common.logMessage('Got unexpected command: ' + command);
+      }
+    } else {
+      // Result from a function call.
+      var params = data.args;
+      var funcName = data.cmd;
+      var callback = funcToCallback[funcName];
+
+      if (!callback) {
+        common.logMessage('Error: Bad message ' + funcName +
+                          ' received from NaCl module.');
+        return;
+      }
+
+      delete funcToCallback[funcName];
+      callback.apply(null, params);
+    }
   } else {
-    // Result from a function call.
-    var params = data.args;
-    var funcName = data.cmd;
-    var callback = funcToCallback[funcName];
-
-    if (!callback) {
-      common.logMessage('Error: Bad message ' + funcName +
-                        ' received from NaCl module.');
-      return;
-    }
-
-    delete funcToCallback[funcName];
-    callback.apply(null, params);
+    common.logMessage('Error: Unknow message `' + data +
+                      '` received from NaCl module.');
   }
 }