花幾分鐘用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

就能夠看到效果了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。