项目最后放完整 demo 源码连接
https://download.csdn.net/download/qq_38652871/12016509
马上要年会了,有个什么总突然过来找我们部门后端负责人(我们公司后端用的PHP),询问是否能做个摇一摇的小游戏,大家一起摇一摇,有个类似比赛的小游戏互动,谁摇的次数多,谁靠前,最终前几名获奖,后端负责人直接来一句,这前端能做,你找前端吧,就这么着,把我叫了过去,问我能不能做,我说:以前没做过,我试试先做个小 demo 吧,没做过的东西真就不一定能整出来
自己先想了个游戏环节和互动流程:
看人家那架势,想让后端配合你做socket连接及相关逻辑的编写,估计是不可能了,幸亏咱有大前端“爸爸”,nodejs
没有用数据库,做了全局缓存,最终排名数据存储在 result.txt 里面,导出是读取的 result.txt 文件的数据
第一步:用express脚手架生成个nodejs项目
不会?点这里【GO】
或者自行去官网查看:http://www.expressjs.com.cn/starter/generator.html,
第二步:建立路由 router,ejs 模板,app.js 引入对应路由
第三步:手机访问 separate 先实现摇一摇功能
有一个第三方的库 shake.js 直接拿来用就行了,之前试过自己写了个摇一摇,利用x,y,z加速度,写算法计算摇一摇次数,发现不怎么灵光,要么不灵敏,要么太灵敏,后来干脆直接拿 shake.js 来用就行了
我的静态文件都放在了 public 下,包括 js css icon 都在,shake.js 就是第三方的 shake 库
https://github.com/alexgibson/shake.js/
//实例化 Shake
let myShakeEvent = new Shake();
shakeFlag = myShakeEvent.hasDeviceMotion; //当前设备是否支持摇一摇
if (!shakeFlag) { //如果当前设备不支持摇一摇功能,将不支持样式显示出来,其他的都隐藏掉
changeElStatus(1);
return;
}
// start listening to device motion
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
/**
* 摇一摇回调函数,每次摇动都回调
*/
function shakeEventDidOccur() {
console.log("摇动手机");
}
第四步:前后端建立socket连接
项目里用的 socket.io
官网地址:https://socket.io/docs/
npm install socket.io --save-dev
看一个例子就好了,其他的连接直接(有句话怎么说来着?如有雷同******),在这里就其他的直接 雷同 就好
看 controls 怎么连接和发送接收消息的,其他的自行下载 demo 查看,
提示:这儿代码可能连贯不起来,只为举例怎么用,比如前端有发送事件,后端没有接收事件,后端没有发送事件,前端确接收,这样代码肯定是错的,运行不起来的,但是,我想说的是但是,你知道怎么发送事件,怎么接收事件,然后去写自己的逻辑就行
服务端:
// io.js
var socket_io = require('socket.io');
// 获取io
socketio.getSocketio = function (server) { // http(s) server
var io = socket_io.listen(server);
var controlsIo = io.of('/controls');
controls(controlsIo);
};
// www
var io = require('./io');
//在这儿的上一行引入 io
var server = http.createServer(app);
//在这儿将创建的服务 server 传给 io
io.getSocketio(server);
// bin/controls.js
controlsIo.on('connection', function (socket) {
//on 用来接收(响应)事件
socket.on('start', function (data) {
// console.log("this.hashData.separate",hashData.separate);
var time = data.time;
var people = data.people;
var identifier = data.identifier;
hashData.time = time;
hashData.people = people;
hashData.identifier = identifier;
for (let key in hashData) {
if (key == 'separate') {
hashData[key].map(el => {
el.status = 2;
})
}
}
//emit 用来发送事件
uniteIo.emit("start", data);
separateIo.emit("start", data);
})
socket.on('disconnect', function (reason) {
console.log('controls disconnect');
})
})
// controls.ejs 对应的 前端 js
let host = window.location.origin; //当前域名地址
socket = io.connect(host + '/controls'); //用 socet.io 的 namespace 方式连接
socket.on('connect', function () {
console.log('connect successful');
//on来接收后台发出的事件
socket.on('end', function () {
console.log('accept end emit')
})
})
第五步:就可以摇一摇了,后续的才是什么完善功能的时候了,这里只将用法,shake.js的用法,socket.io的用法,然后附上一个完整的 demo
// 前端 separate.ejs对应的js 文件方法
/**
* 摇一摇回调函数,每次摇动都回调
*/
function shakeEventDidOccur() {
console.log("摇动手机", count);
count += 1;//记录摇晃次数 +1
countEl.innerHTML = count; //记录当前总次数
speed = Math.ceil(count / (totalTime - time)); //总速度 次/秒
speedEl.innerHTML = speed; //展示总速度 次/秒
let tmpData = {
curCode,
count,
speed
}
socket.emit('shake', tmpData); // 一边摇一边发送数据
}
//服务端 不断的接收摇一摇数据,添加到对应的缓存用户数据上并发送给大屏幕,unite页面
socket.on('shake', function (data) { //摇动中随时统计摇动次数
let nowCode = data.curCode;
for (let i = 0; i < hashData.separate.length; i++) { //遍历 hashData.separate
if (hashData.separate[i].curCode == nowCode) { //更改当前 separate 数据
hashData.separate[i].count = data.count;
hashData.separate[i].speed = data.speed;
}
}
console.log("hashData.separate",hashData.separate);
let playList = cusSort(hashData.separate, hashData.people + 8);
hashData.playList = playList;
uniteIo.emit('shake', hashData.playList);
})
controls 页面
unite 页面
手机 separate 页面
摇一摇开始 unite 页面
摇一摇开始 separate 页面
摇一摇结束 unite 页面
样式超烂,旨在实现功能的小 demo
源码地址:https://download.csdn.net/download/qq_38652871/12082525
下载下来请先 npm install 一下,否则没法运行,搞前端的应该都知道,别问我为什么运行不起来,运行不起来一般就两个问题:
- 依赖没安装
- IP没设置
这个就是127也不存在IP设置的问题