正式项目未开始,先先自己练手,做一个你画我猜小游戏,先上一个不完善的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号正在画,请先围