花几分钟用Socket.io写一个简单的你画我猜小应用

socket.io 是一个为nodejs开发的socket通讯用的lib
要使用 socket.io , 首先要安装nodejs , mac下面我直接用brew安装了(或者ports 以及 源码编译):

brew install nodejs

安装好了之后 , 我们需要安装一下express, express提供一点基础工具来开发一个页面:

sudo npm install --save express

安装完成能看到提醒 没有安装好的话 会出现一堆ERROR , 一般是目录写入权限问题 , 别忘了 sudo 。

有了express之后 先写一个基本页面: ( index.js )

var express = require('express');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.get('/' , function(req , res){
    res.sendFile(__dirname + '/index.html');
});

这里我用了 bower来安装页面需要用到的jquery bootstrap , 由于静态文件目录解析的需要 所以加了

app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

这行代码。

接下来我要要创建 模板文件: (index.html)
这个之前我们要用bower安装前端模板需要的js库
raphael raphael.sketchpad jquery json2

bower install http://libs.baidu.com/jquery/1.8.3/jquery.js
bower install http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js
bower install http://ianli.com/sketchpad/javascripts/raphael.sketchpad.js
bower install bootstrap
bower install [email protected]:douglascrockford/JSON-js.git

如果你还没安装bower 那就赶紧装一个吧(不用bower不要意思说自己做web开发的):

sudo npm install -g bower

然后就是index.html模板的内容:

这是客户端的操作 , 已经完成了 , 可以发送数据 , 可以接收数据 。

服务端我们需要一个类似的操作 ， 即接收客户端emit来的数据 然后用相同的方法发送到所有的客户端:

io.on('connection' , function(socket){

    //接收然后再发送
    socket.on('drawing' , function(data){
        io.emit('drawing_back' , data);
    });
});

这个操作跟客户端的差不多

完整的index.js :

var express = require('express');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.get('/' , function(req , res){
    res.sendFile(__dirname + '/index.html');
});

io.on('connection' , function(socket){
    socket.on('drawing' , function(data){
        io.emit('drawing_back' , data);
    });
});

http.listen('12138' , function(){
    console.log('server start at :12138');
});

然后启动:

node index.js
//或者用forever 安装方法 sudo npm install forever
forever start index.js

就可以看到效果了