Node.js + 处理（.js）答案

【问题标题】：Node.js + Processing(.js)Node.js + 处理（.js）
【发布时间】：2013-02-05 06:03:34
【问题描述】：

node.js 新手

我试图通过 node.js 与 processing 和 processing.js 交互失败。

如果我直接在浏览器中打开我的 index.html，我的测试工作正常但是当我尝试使用节点（localhost:8080 上的节点 sample.js）时，activity.pde 无法正确加载

我有一个这样的 sample.js：

var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    io = require('socket.io'),
    sys = require(process.binding('natives').util ? 'util' : 'sys');

send404 = function(res) {
    res.writeHead(404);
    res.write('404');
    res.end();
};

server = http.createServer(function(req, res) {
    // your normal server code
    var path = url.parse(req.url).pathname;
    switch(path) {
        //case '/json.js':
    case '/':
        fs.readFile(__dirname + "/index.html", function(err, data) {
            if(err) return send404(res);
            res.writeHead(200, {
                'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'
            })
            res.write(data, 'utf8');
            res.end();
        });
        break;
    }
});
server.listen(8080);

// socket.io
var socket = io.listen(server);

一个简单的 index.html：

<html>
  <head>
    <title></title>
  </head>
  <body>
  <script type="text/javascript" src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
  <canvas id="pippo" data-processing-sources="activity.pde"></canvas>

  <script type="application/javascript">
  function doIT() {
    var processingInstance;
    processingInstance = Processing.getInstanceById('pippo');
    processingInstance.myTest(0.8,51.5);
    processingInstance.myTest(9.19,45.27);
  }
  </script>

  <button onclick="doIT();">doit</button>

</body>
</html>

还有一个像这样的简单 .pde 文件：

// @pjs preload must be used to preload the image

/* @pjs preload="image.png"; */
PImage backgroundMap;

float mapScreenWidth,mapScreenHeight;  // Dimension of map in pixels.

void setup()
{
 size(600,350);
 smooth();
 noLoop();
 backgroundMap   = loadImage("image.png");
 mapScreenWidth  = width;
 mapScreenHeight = height;
}

void draw()
{
 image(backgroundMap,0,0,mapScreenWidth,mapScreenHeight);
}

void myTest(float a, float b) {
 ellipse(a,b,5,5);
}

如果我尝试将我的 sample.js 更新为：

case '/':
fs.readFile(__dirname + "/index.html", function(err, data) {
    if(err) return send404(res);
    res.writeHead(200, {
        'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'
    })
    res.write(data, 'utf8');
    res.end();
});
break;
case '/activity.pde':
fs.readFile(__dirname + "/activity.pde", function(err, data) {
    if(err) return send404(res);
    res.writeHead(200, {
        'Content-Type': 'plain/text'
    })
    res.write(data, 'utf8');
    res.end();
});
break;

活动 pde 似乎加载正确（200 OK 128ms），但是当我尝试使用“doIT”按钮时，我收到此错误： "TypeError: processingInstance.myTest 不是函数 processingInstance.myTest(0.8,51.5);"

您对使用此设置有什么建议吗？

PS：此代码不使用节点，通过处理加载图像并在按下按钮时在加载的图像上绘制一个椭圆

提前致谢。

【问题讨论】：

Processing.getInstanceById('pippo') 是否成功返回实例？

标签： node.js processing

【解决方案1】：

出于调试目的，您可能希望将 doIT 函数更改为：

<script type="application/javascript">
function doIT() {
  var processingInstance = Processing.getInstanceById('pippo');
  if(!processingInstance) {
    console.log("'pippo' instance not loaded (yet)");
    return;
  }
  if(!processingInstance.myTest) {
    console.log("'pippo' instance started loading, but hasn't completed yet");
    return;
  }
  // if we do get here, the instance should be ready to go.
  processingInstance.myTest(0.8,51.5);
  processingInstance.myTest(9.19,45.27);
}
</script>

doIT 函数失败有几个原因，第一个通常是在初始化之前尝试访问草图实例。当草图的引用被添加到实例列表中时也有短暂的间隔，但它还没有完成绑定所有函数，所以这就是为什么你通常想要测试你要调用的函数的原因。另一种选择是：

<script type="application/javascript">
var pippoSketch = false;

(function bindSketch() {
  pippoSketch = Processing.getInstanceById('pippo');
  if(!pippoSketch || !pippoSketch.myTest) {
    setTimeout(bindSketch, 250); }
}());

function doIT() {
  if (!pippoSketch) {
    console.log("pippoSketch not ready yet.");
    return;
  }
  pippoSketch.myTest(0.8,51.5);
  pippoSketch.myTest(9.19,45.27);
}
</script>

这将尝试获取对您的草图的完整初始化引用，直到它通过每 250 毫秒安排一次尝试来表示引用。

【讨论】：