用Web socket和Node.js实现HTML 5画布的实时绘图(1)(2)

时间:2013-03-06 14:58来源:未知作者:admin 点击: 次

分享到：

画到画布函数由于画到画布需要建立、移动和关闭路径，我创建了一个短小的函数，用来连接到jQuery拖动开始事件和拖动事件。 #绘图函数 App.draw =(x,y,t

画到画布函数

由于画到画布需要建立、移动和关闭路径，我创建了一个短小的函数，用来连接到jQuery拖动开始事件和拖动事件。

# 绘图函数  
App.draw = (x,y,type) -> 
    if type is "dragstart"  
        App.ctx.beginPath()  
        App.ctx.moveTo(x,y)  
    else if type is "drag"  
        App.ctx.lineTo(x,y)  
        App.ctx.stroke()  
    else  
        App.ctx.closePath()  
return

设置客户端Web套接字

由于我们已将文件添加到http://localhost:4000/socket.io/socket.io.js，我们就能创建一个对象，以便通过该对象发送数据。只编写了几行代码，我们就创建了App.socket对象，并且绑定到名为“draw”的任何入站Web套接字事件。我们稍后对此会有介绍。

# 套接字!  
App.socket = io.connect('http://localhost:4000')  
 
App.socket.on 'draw', (data) -> 
    App.draw(data.x,data.y,data.type)

画布绘图事件

激动人心的一刻就出现在这里。现在我们想把几个事件绑定到我们的元素。其工作方式是，有人在画布上绘图时，我们立即使用draw()函数，画到当前画布上，并且使用socket.io的emit，通过Web套接字发送x和y坐标。稍后我们会看一下这个事件的服务器端部分，看看服务器如何将该数据发送到所有打开的窗口。

###  
    绘图事件  
###  
$('canvas').live 'drag dragstart dragend', (e) -> 
    type = e.handleObj.type  
    offset = $(this).offset()  
 
    ee.offsetX = e.layerX - offset.left  
    ee.offsetY = e.layerY - offset.top  
    x = e.offsetX  
    y = e.offsetY  
    App.draw(x,y,type)  
    App.socket.emit('drawClick', { x : x, y : y, type : type})  
    return

回到服务器端

由于我们知道通过Web套接字发送x、y和事件类型，我们需要在服务器端进行一番处理。我们要做的就是，把该数据回过头来发送到浏览器打开的另外每个人。

我们更新后的server.coffee文件现在看来像这样。我们先等待连接事件，然后等待由浏览器发送的“drawClick”事件。发送完毕后，我们把数据发送到浏览器打开的另外每个人。我们之前编写的服务器端脚本然后就会绘制画布。

io = require('socket.io').listen(4000)  
 
io.sockets.on 'connection', (socket) -> 
    socket.on 'drawClick', (data) -> 
        socket.broadcast.emit 'draw',{ x : data.x, y : data.y, type: data.type}  
        return  
    return