Node學習筆記（三）：基於socket.io web版你畫我猜（二）

上一篇基礎實現的功能是客戶端canvas作圖，導出dataURL從而實現圖片信息推送，下面具體講下服務端的配置及客戶端的配置同步

首先先畫一個流程圖，講下大概思路

<canvas id="container" width="300px" height="200px"></canvas>
<img id="aaa" width="300px" height="200px">

首先為了顯示同步，做出img標簽顯示同步結果

服務器端：

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(8100);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('startConnect', function (data) {
    io.sockets.emit('news',data);
  });
});

這邊有很多坑，也是在自學的時候一個坑一個坑的踩過來的，首先websocket客戶端，服務器require socket.io模塊，這條路是走不通的，百度了下H5新的websocket api與node socket.io 協議不同（也是百度才知道的，是不是正確我也不清楚，反正沒行得通），於是客戶端只能采用引入socket.io.js，在做廣播時也有點要注意 socket.emit('news',data)與io.sockets.emit('news',data)效果也是不一樣的，后者可以實現廣播，而前者只能對響應的客戶端推送，當然安裝express，socket.io時的各種報錯，導致require失敗，這些坑太多了，只能建議一句，把基礎認真過一遍

var socket = io.connect('http://natureless.cn:8100');
	socket.on('news', function (data) {
		console.log("receive:"+data);
		$("#aaa").attr('src',data);
	});

這里初始化socket，並且將返回的data作為img 的src地址

下面就要做客戶端與服務器端的通訊

    var longPolling;
    function polling(){
        longPolling=setInterval(function(){canvas.returnData()},200);
    }

做一個200ms的輪詢，不停的執行canvas.returnData()這個function，即向服務器推送數據

var canvas={
        .....省略一部分
        returnData:function(){
            console.log("---------------");
            console.log("send:"+container.toDataURL());
            socket.emit('startConnect', container.toDataURL());
            console.log("---------------");
        }
    }

在處理交互的時候有很多問題，就是mouse事件會有很多沖突，遲滯，所以對mouse事件再進行一步優化

function mouseInit(){
        $("#container").mousedown(function(e){
            position.reset('mouseX','mouseY',e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
            polling();
            //console.log(mouseX+":"+mouseY);
        })
        $("#container").mousemove(function(e){
            if(paint){
                //console.log(mouseX+":"+mouseY);
                position.reset('nowX','nowY',e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
                canvas.draw(mouseX,mouseY,nowX,nowY);
            }
        })
        $("#container").mouseup(function(e){
            if(paint){
                canvas.returnData();
                position.init();
                clearInterval(longPolling);
            }
        })
        $("#container").mouseleave(function(e){
            if(paint){
                canvas.returnData();
                position.init();
                clearInterval(longPolling);
            }
        })
    }

在鼠標離開canvas或者mouseup時先做一步消息推送，在做一步clear輪詢

ok，到這里，最簡單畫圖共享就已經實現了，效果如下圖：

做到這，可以說基本功能實現了，但是下面迎面而來又有很多問題，房間分配，詞典，積分統計，哎，感覺這個游戲並不簡單，慢慢加油吧