socket + vue + canvas实践，你画我猜（一）

正式项目未开始，先先自己练手，做一个你画我猜小游戏，先上一个不完善的dome

在线地址 http://www.5rgame.com
1.node； 安装socket，启动服务

var io = require('socket.io').listen(server);

var messages = [];//暂时存放消息

//socket连接成功之后触发，用于初始化
io.sockets.on('connection', function(socket){
    socket.on('getAllMessages', function(){
        //用户连上后，发送messages
        socket.emit('allMessages', messages);
    });
    socket.on('createMessage', function(message){
        //用户向服务器发送消息，存放到messages
        //messages.push(message);
        //向除自己外的所有用户发送消息
        socket.broadcast.emit('messageAdded', message);
    });
})

2.vue 设置；先在index.html直接引入socket.io.js，此文件由node生成;

<script type='text/javascript' src='http://localhost:3000/socket.io/socket.io.js' charset='utf-8'></script>

//然后在vue对象上新增socket属性方便全局使用
//连接socket
Vue.prototype.socket = io.connect('http://localhost:3000/');

3.vue文件的画图与数据传输交互

    <template>
    <div id="gameRoom">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-arrowleft Hui-icon-left" v-on:tap="back()"></a>
            <h1 class="mui-title Hui-title"><p class="ellipsis">房间名字</p><i class="ellipsis">你画我猜</i></h1>
            <a class="Hui-icon-right mui-icon-extra mui-icon-extra-peoples Hui-icon"></a>
        </header>
        <nav class="mui-bar mui-bar-tab Hui-chat-bar" style="height:auto">
            <div class="sentNews">
                <a href="javascript:;"><i class="mui-icon mui-icon-mic"></i></a>
                <div contenteditable="true"></div>
                <a href="javascript:;"><i class="Hui-icon Hui-icon-face"></i></a>
                <a href="javascript:;"><i class="mui-icon mui-icon-plus"></i></a>
            </div>
            <div style="width:100%;height:200px;display:none"></div>
        </nav>
        <div class="gameRoom-canvas">
            <div class="canvas-bar"><span>1号正在画，请先围