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

时间 2019-12-12

原文原文链接

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

brew install nodejs

安装好了以后 , 咱们须要安装一下express, express提供一点基础工具来开发一个页面:css

sudo npm install --save express

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

有了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 , 因为静态文件目录解析的须要因此加了java

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

这行代码。node

接下来我要要建立模板文件: (index.html)
这个以前咱们要用bower安装前端模板须要的js库
raphael raphael.sketchpad jquery json2jquery

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开发的):git

sudo npm install -g bower

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

<!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>

这是客户端的操做 , 已经完成了 , 能够发送数据 , 能够接收数据。web

服务端咱们须要一个相似的操做，即接收客户端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

就能够看到效果了