Dx.Yang

Programmer

© 2014. Dx.Yang All rights reserved.

Node.js - 利用进程通信实现Cluster共享内存

Node.js的标准API没有提供进程共享内存,然而通过IPC接口的send方法和对message事件的监听,就可以实现一个多进程之间的协同机制,通过通信来操作共享内存。

IPC的基本用法:

// worker进程 发送消息
process.send('读取共享内存');

// master进程 接收消息 > 处理 > 发送回信
cluster.on('online', function (worker) {
     // 有worker进程建立,即开始监听message事件
     worker.on('message', function(data) {
          // 处理来自worker的请求
          // 回传结果
          worker.send('result')
     });
});

在Node.js中,通过send和on('message', callback)实现的IPC通信有几个特点。首先,master和worker之间可以互相通信,而各个worker之间不能直接通信,但是worker之间可以通过master转发实现间接通信。另外,通过send方法传递的数据,会先被JSON.stringify处理后再传递,接收后会再用JSON.parse解析。所以Buffer对象传递后会变成数组,而function则无法直接传递。反过来说,就是可以直接传递除了buffer和function之外的所有数据类型(已经很强大了,而且buffer和function也可以用变通的方法实现传递)。

基于以上特点,我们可以设计一个通过IPC来共享内存的方案:

1、worker进程作为共享内存的使用者,并不直接操作共享内存,而是通过send方法通知master进程进行写入(set)或者读取(get)操作。

2、master进程初始化一个Object对象作为共享内存,并根据worker发来的message,对Object的键值进行读写。

3、由于要使用跨进程通信,所以worker发起的set和get都是异步操作,master根据请求进行实际读写操作,然后将结果返回给worker(即把结果数据send给worker)。

数据格式

为了实现进程间异步的读写功能,需要对通信数据的格式做一点规范。

首先是worker的请求数据:

requestMessage = {
    isSharedMemoryMessage: true,  // 表示这是一次共享内存的操作通信
    method: 'set', // or 'get' 操作的方法
    id: cluster.worker.id,  // 发起操作的进程(在一些特殊场景下,用于保证master可以回信)
    uuid: uuid,  // 此次操作的(用于注册/调用回调函数)
    key: key,  // 要操作的键
    value: value  // 键对应的值(写入)
}

master在接到数据后,会根据method执行相应操作,然后根据requestMessage.id将结果数据发给对应的worker,数据格式如下:

responseMessage = {
    isSharedMemoryMessage: true,  // 标记这是一次共享内存通信
    uuid: requestMessage.uuid,  // 此次操作的唯一标示
    value: value  // 返回值。get操作为key对应的值,set操作为成功或失败
}

规范数据格式的意义在于,master在接收到请求后,能够将处理结果发送给对应的worker,而worker在接到回传的结果后,能够调用此次通信对应的callback,从而实现协同。

规范数据格式后,接下来要做的就是设计两套代码,分别用于master进程和worker进程,监听通信并处理通信数据,实现共享内存的功能。

User类

User类的实例在worker进程中工作,负责发送操作共享内存的请求,并监听master的回信。

var User = function() {
    var self = this;
    self.__uuid__ = 0;

    // 缓存回调函数
    self.__getCallbacks__ = {};

    // 接收每次操作请求的回信
    process.on('message', function(data) {
       
        if (!data.isSharedMemoryMessage) return;
        // 通过uuid找到相应的回调函数
        var cb = self.__getCallbacks__[data.uuid];
        if (cb && typeof cb === 'function') {
            cb(data.value)
        }
        // 卸载回调函数
        self.__getCallbacks__[data.uuid] = undefined;
    });
};

// 处理操作
User.prototype.handle = function(method, key, value, callback) {

    var self = this;
    var uuid = self.__uuid__++;

    process.send({
        isSharedMemoryMessage: true,
        method: method,
        id: cluster.worker.id,
        uuid: uuid,
        key: key,
        value: value
    });

    // 注册回调函数
    self.__getCallbacks__[uuid] = callback;

};

User.prototype.set = function(key, value, callback) {
    this.handle('set', key, value, callback);
};

User.prototype.get = function(key, callback) {
    this.handle('get', key, null, callback);
};

Manager类

Manager类的实例在master进程中工作,用于初始化一个Object作为共享内存,并根据User实例的请求,在共享内存中增加键值对,或者读取键值,然后将结果发送回去。

var Manager = function() {

    var self = this;
   
    // 初始化共享内存
    self.__sharedMemory__ = {};
       
    // 监听并处理来自worker的请求
    cluster.on('online', function(worker) {
        worker.on('message', function(data) {
            // isSharedMemoryMessage是操作共享内存的通信标记
            if (!data.isSharedMemoryMessage) return;
            self.handle(data);
        });
    });
};

Manager.prototype.handle = function(data) {
    var self = this;
    var value = this[data.method](data);

    var msg = {
        // 标记这是一次共享内存通信
        isSharedMemoryMessage: true,             
        // 此次操作的唯一标示
        uuid: data.uuid,
        // 返回值
        value: value
    };

    cluster.workers[data.id].send(msg);
};

// set操作返回ok表示成功
Manager.prototype.set = function(data) {
    this.__sharedMemory__[data.key] = data.value;
    return 'OK';
};

// get操作返回key对应的值
Manager.prototype.get = function(data) {
    return this.__sharedMemory__[data.key];
};

使用方法

if (cluster.isMaster) {

    // 初始化Manager的实例
    var sharedMemoryManager = new Manager();

    // fork第一个worker
    cluster.fork();

    // 1秒后fork第二个worker
    setTimeout(function() {
        cluster.fork();
    }, 1000);
     
} else {

    // 初始化User类的实例
    var sharedMemoryUser = new User();

    if (cluster.worker.id == 1) {
        // 第一个worker向共享内存写入一组数据,用a标记
        sharedMemoryUser.set('a', [0, 1, 2, 3]);
    }

    if (cluster.worker.id == 2) {
        // 第二个worker从共享内存读取a的值
        sharedMemoryUser.get('a', function(data) {
            console.log(data);  // => [0, 1, 2, 3]
        });
    }
  
}

以上就是一个通过IPC通信实现的多进程共享内存功能,需要注意的是,这种方法是直接在master进程的内存里缓存数据,必须注意内存的使用情况,这里可以考虑加入一些简单的淘汰策略,优化内存的使用。另外,如果单次读写的数据比较大,IPC通信的耗时也会相应增加。

完整代码:https://github.com/x6doooo/sharedmemory

HTML5 Canvas的事件处理

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个元素,可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。

Canvas的限制

在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,js也无法获取到已经绘制好的图形元素。比如:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect);     //undefined

这段代码在canvas标签里绘制了一个矩形,首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具,还可以看到canvas标签内部没有增加任何内容,而在js里获取到的canvas元素以及当前的上下文,也都没有任何表示新增图形的内容。

所以,前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形,实际点击的是整个Canvas元素。

给Canvas元素绑定事件

由于事件只能达到Canvas元素这一层,所以,如果想进一步深入,识别点击发生在Canvas内部的哪一个图形上,就需要增加代码来进行处理。基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形,该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里,就可以视为点击了该矩形,也就可以手动触发矩形需要处理的点击事件。思路其实比较简单,但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率,有些地方还需要重新判断事件类型,设置要重新定义一个Canvas内部的捕获和冒泡机制。

首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:

cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
  //...
}, false);

接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:

function getEventPosition(ev){
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x: x, y: y};
}
//注:使用上面这个函数,需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标,比如:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50);     //true
ctx.isPointInPath(5, 5);     //false

接下来增加一个事件判断,就可以判断一个点击事件是否发生在矩形上:

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  if(ctx.isPointInPath(p.x, p.y)){
    //点击了矩形
  }
}, false);

以上就是处理Canvas事件的基本方法,但是上面的代码还有局限,由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件,比如:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20);     //true
ctx.beginPath();
ctx.rect(110, 110, 100, 100);
ctx.stroke();
ctx.isPointInPath(150, 150);     //true
ctx.isPointInPath(20, 20);     //false

从上面这段代码可以看到,isPointInPath方法仅能识别当前上下文环境里的图形路径,而之前绘制的路径,无法回溯判断。这种问题的解决方法是:当点击事件发生时,重绘所有图形,每绘制一个就使用isPointInPath方法,判断事件坐标是否在该图形覆盖范围内。

循环重绘和事件冒泡

为了实现循环重绘,所以就要将图形的基本参数事先保存下来:

arr = [
  {x:10, y:10, width:100, height:100},
  {x:110, y:110, width:100, height:100}
];

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

draw();

function draw(){
  ctx.clearRech(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
  });
}

上面的代码事先将两个矩形的基本参数保存下来,每次调用draw方法,就会循环调用这些基本参数,用于绘制两个矩形。这里还使用了clearRect方法,用于在重绘时清空画布。接下来要做的是增加事件代理,以及在重绘时对每一个上下文环境使用isPointInPath方法:

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  draw(p);
}, false);

事件发生时,将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动:

function draw(p){
  var who = [];
  ctx.clearRech(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v, i){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
    if(p && ctx.isPointInPath(p.x, p.y)){
      //如果传入了事件坐标,就用isPointInPath判断一下
      //如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里
      who.push(i);
    }
  });
  //根据数组中的index值,可以到arr数组中找到相应的元素。
  return who;
}

在上面代码中,点击事件发生时draw方法会执行一次重绘,并在重绘过程中检查每一个图形是否覆盖了事件坐标,如果判断为真,则视为点击了该图形,并将该图形的index值放入数组,最后将数组作为draw方法的返回值。在这种处理机制下,如果Canvas里有N个图形,它们有一部分是重叠的,而点击事件恰巧发生在这个重叠区域上,那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况,数组的最后一个成员处于Canvas最上层,而第一个成员则在最下层,我们可以视为最上层的成员是e.target,而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法,如果真要模拟DOM处理,还要给图形设置父子级关系。

以上就是Canvas事件处理的基本方法。在实际运用时,如何缓存图形参数,如何进行循环重绘,以及如何处理事件冒泡,都还需要根据实际情况花一些心思去处理。另外,click是一个比较好处理的事件,相对麻烦的是mouseover、mouseout和mousemove这些事件,由于鼠标一旦进入Canvas元素,始终发生的都是mousemove事件,所以如果要给某个图形单独设置mouseover或mouseout,还需要记录鼠标移动的路线,给图形设置进出状态。由于处理的步骤变得复杂起来,必须对性能问题提高关注。

经纬度转平面坐标的算法(米勒投影)

地图组件是前端数据可视化非常重要的一个组成部分,根据geoJSON这种通用数据格式来生成地图是比较便捷的做法。不过对于地图坐标转换的算法,还是了解一些比较好,对于设定高阶地图组件会有帮助。这里介绍一下在米勒投影的地图上,如何将经纬度转换为平面坐标的算法,这个算法在生成世界地图的时候比较常见。(维基百科-米勒投影

// lon 经度,西经为负数
// lat 纬度,南纬是负数
function millerXY (lon, lat){
     var L = 6381372 * Math.PI * 2,     // 地球周长
         W = L,     // 平面展开后,x轴等于周长
         H = L / 2,     // y轴约等于周长一半
         mill = 2.3,      // 米勒投影中的一个常数,范围大约在正负2.3之间
         x = lon * Math.PI / 180,     // 将经度从度数转换为弧度
         y = lat * Math.PI / 180;     // 将纬度从度数转换为弧度
     // 这里是米勒投影的转换
     y = 1.25 * Math.log( Math.tan( 0.25 * Math.PI + 0.4 * y ) );
     // 这里将弧度转为实际距离
     x = ( W / 2 ) + ( W / (2 * Math.PI) ) * x;
     y = ( H / 2 ) - ( H / ( 2 * mill ) ) * y;
     // 转换结果的单位是公里
     // 可以根据此结果,算出在某个尺寸的画布上,各个点的坐标
     return {
          x : x,
          y : y
     };
}