Skip to content

Commit

Permalink
postmessage 双屏互动
Browse files Browse the repository at this point in the history
  • Loading branch information
@ksky521
ksky521 committed Dec 1, 2015
1 parent 8047722 commit a574776
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 138 deletions.
10 changes: 5 additions & 5 deletions assets/js/nodeppt.control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@
var fnName = json.fnName;
var args = json.args;
Slide.proxyFn(fnName, args);
}).on('from control update', function(json) {
Slide[json.direction](true);
// doSlide(json.direction, json.id, false);
}).on('from control updateItem', function(json) {
Slide[json.direction](true);
// }).on('from control update', function(json) {
// Slide[json.direction](true);
// // doSlide(json.direction, json.id, false);
// }).on('from control updateItem', function(json) {
// Slide[json.direction](true);
//doItem(json.direction) && doSlide(json.id, false);
}).on('from control key event', function(json) {
t.createKeyEvent_(json.keyCode);
Expand Down
74 changes: 34 additions & 40 deletions assets/js/nodeppt.control.postMessage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
* postMessage 只能单方面控制
*
*/
Slide.Control.add('postMessage', function(S, broadcast) {
Slide.Control.add('postMessage', function (S, broadcast) {
function parseQuery(url) {
var back = {};
(url || location.search.substring(1)).split('&').forEach(function(v) {
(url || location.search.substring(1)).split('&').forEach(function (v) {
v = v.split('=');
back[v[0].toLowerCase()] = v[1];
});
Expand All @@ -15,48 +15,41 @@ Slide.Control.add('postMessage', function(S, broadcast) {
var postWin, popup, timer;
var postMSG = {
role: '', //角色
broadcast: function(evtName, data) {
if (postWin) {
window.opener.postMessage({
action: evtName,
data: data
}, '*');
}
broadcast: function (evtName, data) {
(postWin ? postWin : popup).postMessage({
action: evtName,
data: data
}, '*');
},
update: function(id, direction) {
if (postWin) {
window.opener.postMessage({
action: 'update',
id: id,
direction: direction
}, '*');
}
update: function (id, direction) {
(postWin ? postWin : popup).postMessage({
action: 'update',
id: id,
direction: direction
}, '*');

},
updateItem: function(id, item, direction) {
if (postWin) {
window.opener.postMessage({
action: 'updateItem',
id: id,
item: item,
direction: direction
}, '*');
}
updateItem: function (id, item, direction) {
(postWin ? postWin : popup).postMessage({
action: 'updateItem',
id: id,
item: item,
direction: direction
}, '*');

},
keyEvent: function(keyCode) {
if (postWin) {
window.opener.postMessage({
action: 'keyEvent',
keyCode: keyCode
}, '*');
}
keyEvent: function (keyCode) {
(postWin ? postWin : popup).postMessage({
action: 'keyEvent',
keyCode: keyCode
}, '*');
},
// evtControl: function(e) {
// evtControl: function (e) {
// console.log('client 发来贺电', arguments);
// },
evtClient: function(e) {
evtHandler: function (e) {
var data = e.data;
// console.log(data);
switch (data.action) {
case 'update':
broadcast.fire('from control update', data);
Expand All @@ -80,13 +73,13 @@ Slide.Control.add('postMessage', function(S, broadcast) {
}

},
closeClient: function() {
closeClient: function () {
if (popup) {
popup.close();
}
timer && clearInterval(timer);
},
init: function(args) {
init: function (args) {
var t = this;
var params = parseQuery();

Expand All @@ -101,12 +94,12 @@ Slide.Control.add('postMessage', function(S, broadcast) {

var temp = 'height=' + tHeight + ',width=' + tWidth + ',top=' + 10 + ',left=' + (sWidth - tWidth) / 2 + ',toolbar=no,menubar=no,location=yes,resizable=yes,scrollbars=no,status=no';
popup = window.open(url, 'ppt', temp);
window.addEventListener('message', this.evtClient, false);
window.addEventListener('message', this.evtHandler, false);
window.addEventListener('beforeunload', this.closeClient, false);
} else if (params._multiscreen === 'control') {
this.role = 'control';
//如果是控制端，则重写proxyFn函数
Slide.proxyFn = function(fnName, args) {
Slide.proxyFn = function (fnName, args) {
args = JSON.stringify(args);
window.opener.postMessage({
action: 'userOrder',
Expand All @@ -123,7 +116,7 @@ Slide.Control.add('postMessage', function(S, broadcast) {
var hour = 0,
sec = 0,
min = 0;
timer2 = setInterval(function() {
timer2 = setInterval(function () {
sec++;
if (sec === 60) {
sec = 0;
Expand All @@ -136,6 +129,7 @@ Slide.Control.add('postMessage', function(S, broadcast) {
$timer.innerHTML = ['时间：' + time2str(hour), time2str(min), time2str(sec) + ' 幻灯片：' + Slide.current + '/' + Slide.count].join(':');
}, 1000);
postWin = window.opener;
window.addEventListener('message', this.evtHandler, true);
}
}
};
Expand Down
55 changes: 33 additions & 22 deletions assets/js/nodeppt.control.socket.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
var socketIOURL = '//' + location.host + '/socket.io/socket.io.js';

Slide.Control.add('socket', function(S, broadcast) {
Slide.Control.add('socket', function (S, broadcast) {
S.clientUID = 0;

function time2str(time) {
time = '00' + time;
return time.substr(-2);
}
var showQrcode;
var qrcodeLink = function() {
var qrcodeLink = function () {
//按 q显示控制区域二维码
document.addEventListener('keydown', function(e) {
document.addEventListener('keydown', function (e) {
if (e.keyCode === 81) {
showQrcode(e);
}
Expand All @@ -23,7 +23,7 @@ Slide.Control.add('socket', function(S, broadcast) {
$body.appendChild($layer);
var $container = document.getElementById('container');

showQrcode = function(e) {
showQrcode = function (e) {
if (showQrcode.isShow) {
// $container.style.display = 'block';
$layer.style.display = 'none';
Expand All @@ -34,16 +34,17 @@ Slide.Control.add('socket', function(S, broadcast) {
showQrcode.isShow = true;
}
};
showQrcode();
};

var webSocket;

var Socket = {
host: '',
role: '', //角色
clientConnect: function() {
clientConnect: function () {
//角色是client，即被控制端，则连控制端服务器
webSocket.on('data from another client', function(data) {
webSocket.on('data from another client', function (data) {
var action = data.action;
switch (action) {
case 'from control order':
Expand All @@ -59,20 +60,23 @@ Slide.Control.add('socket', function(S, broadcast) {
case 'from control key event':
broadcast.fire(action, data);
break;
case 'sync status':
console.log('sync status', data);
break;
default:
broadcast.fire(action, data.data);
}
});

},
controlConnect: function() {
controlConnect: function () {
webSocket.emit('add client', {
targetUid: this.clientUID
});

//控制端不在直接运行函数，而是变成发送socket给client
//注意参数，进行了json处理哦~
Slide.proxyFn = function(fnName, args) {
Slide.proxyFn = function (fnName, args) {
args = JSON.stringify(args);
webSocket.emit('repost data', {
action: 'from control order',
Expand All @@ -82,7 +86,7 @@ Slide.Control.add('socket', function(S, broadcast) {
};
//角色是控制端，则连被控制端（client）服务器

webSocket.on('data from another client', function(data) {
webSocket.on('data from another client', function (data) {
var action = data.action;
if (action.indexOf('client') !== -1) {
return;
Expand All @@ -93,13 +97,13 @@ Slide.Control.add('socket', function(S, broadcast) {
});

},
connect: function() {
connect: function () {
webSocket = io.connect(location.host + '/ppt');
// console.log(io);
webSocket.on('UUID', function(uid) {
webSocket.on('UUID', function (uid) {
webSocket.uid = uid;
if (Socket.role === 'client') {
MixJS.loadJS('/js/qrcode.js', function() {
MixJS.loadJS('/js/qrcode.js', function () {
qrcodeLink();
var url = location.href.split('#')[0];
url += (!~url.indexOf('?')) ? '?' : '&';
Expand All @@ -113,44 +117,51 @@ Slide.Control.add('socket', function(S, broadcast) {
});
}
});
webSocket.on('system', function(data) {
webSocket.on('system', function (data) {
// console.log(data);
if (showQrcode && showQrcode.isShow) {
showQrcode();
}
if (data.action === 'join') {
webSocket.emit('repost data', {
action: 'sync status',
id: S.current,
item: S.buildItem
})
}
});

this[this.role + 'Connect']();
},
broadcast: function(evtName, data) {
broadcast: function (evtName, data) {
webSocket.emit('repost data', {
action: 'from control ' + evtName,
data: data
});
},
update: function(id, direction) {
update: function (id, direction) {
webSocket.emit('repost data', {
action: 'from ' + Socket.role + ' update',
id: id,
direction: direction
});
},
updateItem: function(id, item, direction) {
updateItem: function (id, item, direction) {
webSocket.emit('repost data', {
action: 'from ' + Socket.role + ' updateItem',
id: id,
item: item,
direction: direction
});
},
keyEvent: function(keyCode) {
keyEvent: function (keyCode) {
webSocket.emit('repost data', {
action: 'from ' + Socket.role + ' key event',
keyCode: keyCode
});
},

init: function(args) {
init: function (args) {
this.host = args.host || location.href;
this.clientUID = args.clientId;
// console.log(this.clientUID);
Expand All @@ -166,7 +177,7 @@ Slide.Control.add('socket', function(S, broadcast) {
var hour = 0,
sec = 0,
min = 0;
timer2 = setInterval(function() {
timer2 = setInterval(function () {
sec++;
if (sec === 60) {
sec = 0;
Expand All @@ -183,9 +194,9 @@ Slide.Control.add('socket', function(S, broadcast) {
}
if (args.shake) {
//添加shake
MixJS.loadJS(Slide.dir + 'shake.js', function() {
MixJS.loadJS(Slide.dir + 'shake.js', function () {
var lastTime = Date.now();
window.addEventListener('shake', function() {
window.addEventListener('shake', function () {
var now = Date.now();
if (now - lastTime > 3000) {
lastTime = now;
Expand All @@ -200,7 +211,7 @@ Slide.Control.add('socket', function(S, broadcast) {
//已经存在
Socket.connect();
} else {
MixJS.loadJS(socketIOURL, function() {
MixJS.loadJS(socketIOURL, function () {
Socket.connect();
});
}
Expand Down
Loading

0 comments on commit a574776

Please sign in to comment.