花几分钟用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 git@github.com:douglascrockford/JSON-js.git

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

sudo npm install -g bower

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

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="/socket.io/socket.io.js"></script>
    <script src="/bower_components/jquery.min/index.js"></script>
    <script src="/bower_components/raphael-min/index.js"></script>
    <script src="/bower_components/raphael.sketchpad/index.js"></script>
    <script src="/bower_components/JSON-js/json2.js"></script>

</head>
<body>


<div class="container">

<div class="row">
    <div class="col-md-6">

        <div style="border: 1px solid #336699;border-radius: 10px;margin: 10px;" id="draw-pad"></div>

    </div>
    <div class="col-md-6" id="draw-pad-copy"></div>
</div>

</div>




<script>
    var socket = io();
    //渲染一个区域 然后让它可以随意被涂鸦
    var sketchpad = Raphael.sketchpad('draw-pad' , {
        width: "100%" ,
        height: 400 ,
        editing: true
    });
    //渲染一个相同的区域 用来同步显示数据
    var sketchpad_viewer = Raphael.sketchpad("draw-pad-copy", {
        width: "100%" ,
        height: 400 ,
        editing: false
    });
    //当画笔开始画画的时候 传递数据到socket
    sketchpad.change(function(){
        //传递数据的方法是 socket.emit()
        //sketchpad.json()是涂鸦之后生成的json数据 用这个json数据可以渲染出一样的图
        socket.emit('drawing' , sketchpad.json());
        //sketchpad_viewer.json(sketchpad.json());
    });
        
    //socket监听 如果服务器发送了新的数据 利用raphael.sketchpad插件马上渲染出来
    socket.on('drawing_back' , function(data){
        sketchpad_viewer.json(data);
        //console.log(data);
    });
</script>



</body>
</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

就可以看到效果了

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

mot

引用和评论

rails 4 在development环境下测试发送邮件模板