Skip to content

Commit a574776

Browse files
ksky521ksky521
committed
postmessage 双屏互动
1 parent 8047722 commit a574776

6 files changed

+146
-138
lines changed

‎assets/js/nodeppt.control.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@
5353
var fnName = json.fnName;
5454
var args = json.args;
5555
Slide.proxyFn(fnName, args);
56-
}).on('from control update', function(json) {
57-
Slide[json.direction](true);
58-
// doSlide(json.direction, json.id, false);
59-
}).on('from control updateItem', function(json) {
60-
Slide[json.direction](true);
56+
// }).on('from control update', function(json) {
57+
// Slide[json.direction](true);
58+
// // doSlide(json.direction, json.id, false);
59+
// }).on('from control updateItem', function(json) {
60+
// Slide[json.direction](true);
6161
//doItem(json.direction) && doSlide(json.id, false);
6262
}).on('from control key event', function(json) {
6363
t.createKeyEvent_(json.keyCode);

‎assets/js/nodeppt.control.postMessage.js

+34-40
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
* postMessage 只能单方面控制
33
*
44
*/
5-
Slide.Control.add('postMessage', function(S, broadcast) {
5+
Slide.Control.add('postMessage', function (S, broadcast) {
66
function parseQuery(url) {
77
var back = {};
8-
(url || location.search.substring(1)).split('&').forEach(function(v) {
8+
(url || location.search.substring(1)).split('&').forEach(function (v) {
99
v = v.split('=');
1010
back[v[0].toLowerCase()] = v[1];
1111
});
@@ -15,48 +15,41 @@ Slide.Control.add('postMessage', function(S, broadcast) {
1515
var postWin, popup, timer;
1616
var postMSG = {
1717
role: '', //角色
18-
broadcast: function(evtName, data) {
19-
if (postWin) {
20-
window.opener.postMessage({
21-
action: evtName,
22-
data: data
23-
}, '*');
24-
}
18+
broadcast: function (evtName, data) {
19+
(postWin ? postWin : popup).postMessage({
20+
action: evtName,
21+
data: data
22+
}, '*');
2523
},
26-
update: function(id, direction) {
27-
if (postWin) {
28-
window.opener.postMessage({
29-
action: 'update',
30-
id: id,
31-
direction: direction
32-
}, '*');
33-
}
24+
update: function (id, direction) {
25+
(postWin ? postWin : popup).postMessage({
26+
action: 'update',
27+
id: id,
28+
direction: direction
29+
}, '*');
3430

3531
},
36-
updateItem: function(id, item, direction) {
37-
if (postWin) {
38-
window.opener.postMessage({
39-
action: 'updateItem',
40-
id: id,
41-
item: item,
42-
direction: direction
43-
}, '*');
44-
}
32+
updateItem: function (id, item, direction) {
33+
(postWin ? postWin : popup).postMessage({
34+
action: 'updateItem',
35+
id: id,
36+
item: item,
37+
direction: direction
38+
}, '*');
4539

4640
},
47-
keyEvent: function(keyCode) {
48-
if (postWin) {
49-
window.opener.postMessage({
50-
action: 'keyEvent',
51-
keyCode: keyCode
52-
}, '*');
53-
}
41+
keyEvent: function (keyCode) {
42+
(postWin ? postWin : popup).postMessage({
43+
action: 'keyEvent',
44+
keyCode: keyCode
45+
}, '*');
5446
},
55-
// evtControl: function(e) {
47+
// evtControl: function (e) {
5648
// console.log('client 发来贺电', arguments);
5749
// },
58-
evtClient: function(e) {
50+
evtHandler: function (e) {
5951
var data = e.data;
52+
// console.log(data);
6053
switch (data.action) {
6154
case 'update':
6255
broadcast.fire('from control update', data);
@@ -80,13 +73,13 @@ Slide.Control.add('postMessage', function(S, broadcast) {
8073
}
8174

8275
},
83-
closeClient: function() {
76+
closeClient: function () {
8477
if (popup) {
8578
popup.close();
8679
}
8780
timer && clearInterval(timer);
8881
},
89-
init: function(args) {
82+
init: function (args) {
9083
var t = this;
9184
var params = parseQuery();
9285

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

10295
var temp = 'height=' + tHeight + ',width=' + tWidth + ',top=' + 10 + ',left=' + (sWidth - tWidth) / 2 + ',toolbar=no,menubar=no,location=yes,resizable=yes,scrollbars=no,status=no';
10396
popup = window.open(url, 'ppt', temp);
104-
window.addEventListener('message', this.evtClient, false);
97+
window.addEventListener('message', this.evtHandler, false);
10598
window.addEventListener('beforeunload', this.closeClient, false);
10699
} else if (params._multiscreen === 'control') {
107100
this.role = 'control';
108101
//如果是控制端，则重写proxyFn函数
109-
Slide.proxyFn = function(fnName, args) {
102+
Slide.proxyFn = function (fnName, args) {
110103
args = JSON.stringify(args);
111104
window.opener.postMessage({
112105
action: 'userOrder',
@@ -123,7 +116,7 @@ Slide.Control.add('postMessage', function(S, broadcast) {
123116
var hour = 0,
124117
sec = 0,
125118
min = 0;
126-
timer2 = setInterval(function() {
119+
timer2 = setInterval(function () {
127120
sec++;
128121
if (sec === 60) {
129122
sec = 0;
@@ -136,6 +129,7 @@ Slide.Control.add('postMessage', function(S, broadcast) {
136129
$timer.innerHTML = ['时间：' + time2str(hour), time2str(min), time2str(sec) + ' 幻灯片：' + Slide.current + '/' + Slide.count].join(':');
137130
}, 1000);
138131
postWin = window.opener;
132+
window.addEventListener('message', this.evtHandler, true);
139133
}
140134
}
141135
};

‎assets/js/nodeppt.control.socket.js

+33-22
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
var socketIOURL = '//' + location.host + '/socket.io/socket.io.js';
22

3-
Slide.Control.add('socket', function(S, broadcast) {
3+
Slide.Control.add('socket', function (S, broadcast) {
44
S.clientUID = 0;
55

66
function time2str(time) {
77
time = '00' + time;
88
return time.substr(-2);
99
}
1010
var showQrcode;
11-
var qrcodeLink = function() {
11+
var qrcodeLink = function () {
1212
//按 q显示控制区域二维码
13-
document.addEventListener('keydown', function(e) {
13+
document.addEventListener('keydown', function (e) {
1414
if (e.keyCode === 81) {
1515
showQrcode(e);
1616
}
@@ -23,7 +23,7 @@ Slide.Control.add('socket', function(S, broadcast) {
2323
$body.appendChild($layer);
2424
var $container = document.getElementById('container');
2525

26-
showQrcode = function(e) {
26+
showQrcode = function (e) {
2727
if (showQrcode.isShow) {
2828
// $container.style.display = 'block';
2929
$layer.style.display = 'none';
@@ -34,16 +34,17 @@ Slide.Control.add('socket', function(S, broadcast) {
3434
showQrcode.isShow = true;
3535
}
3636
};
37+
showQrcode();
3738
};
3839

3940
var webSocket;
4041

4142
var Socket = {
4243
host: '',
4344
role: '', //角色
44-
clientConnect: function() {
45+
clientConnect: function () {
4546
//角色是client，即被控制端，则连控制端服务器
46-
webSocket.on('data from another client', function(data) {
47+
webSocket.on('data from another client', function (data) {
4748
var action = data.action;
4849
switch (action) {
4950
case 'from control order':
@@ -59,20 +60,23 @@ Slide.Control.add('socket', function(S, broadcast) {
5960
case 'from control key event':
6061
broadcast.fire(action, data);
6162
break;
63+
case 'sync status':
64+
console.log('sync status', data);
65+
break;
6266
default:
6367
broadcast.fire(action, data.data);
6468
}
6569
});
6670

6771
},
68-
controlConnect: function() {
72+
controlConnect: function () {
6973
webSocket.emit('add client', {
7074
targetUid: this.clientUID
7175
});
7276

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

85-
webSocket.on('data from another client', function(data) {
89+
webSocket.on('data from another client', function (data) {
8690
var action = data.action;
8791
if (action.indexOf('client') !== -1) {
8892
return;
@@ -93,13 +97,13 @@ Slide.Control.add('socket', function(S, broadcast) {
9397
});
9498

9599
},
96-
connect: function() {
100+
connect: function () {
97101
webSocket = io.connect(location.host + '/ppt');
98102
// console.log(io);
99-
webSocket.on('UUID', function(uid) {
103+
webSocket.on('UUID', function (uid) {
100104
webSocket.uid = uid;
101105
if (Socket.role === 'client') {
102-
MixJS.loadJS('/js/qrcode.js', function() {
106+
MixJS.loadJS('/js/qrcode.js', function () {
103107
qrcodeLink();
104108
var url = location.href.split('#')[0];
105109
url += (!~url.indexOf('?')) ? '?' : '&';
@@ -113,44 +117,51 @@ Slide.Control.add('socket', function(S, broadcast) {
113117
});
114118
}
115119
});
116-
webSocket.on('system', function(data) {
120+
webSocket.on('system', function (data) {
117121
// console.log(data);
118122
if (showQrcode && showQrcode.isShow) {
119123
showQrcode();
120124
}
125+
if (data.action === 'join') {
126+
webSocket.emit('repost data', {
127+
action: 'sync status',
128+
id: S.current,
129+
item: S.buildItem
130+
})
131+
}
121132
});
122133

123134
this[this.role + 'Connect']();
124135
},
125-
broadcast: function(evtName, data) {
136+
broadcast: function (evtName, data) {
126137
webSocket.emit('repost data', {
127138
action: 'from control ' + evtName,
128139
data: data
129140
});
130141
},
131-
update: function(id, direction) {
142+
update: function (id, direction) {
132143
webSocket.emit('repost data', {
133144
action: 'from ' + Socket.role + ' update',
134145
id: id,
135146
direction: direction
136147
});
137148
},
138-
updateItem: function(id, item, direction) {
149+
updateItem: function (id, item, direction) {
139150
webSocket.emit('repost data', {
140151
action: 'from ' + Socket.role + ' updateItem',
141152
id: id,
142153
item: item,
143154
direction: direction
144155
});
145156
},
146-
keyEvent: function(keyCode) {
157+
keyEvent: function (keyCode) {
147158
webSocket.emit('repost data', {
148159
action: 'from ' + Socket.role + ' key event',
149160
keyCode: keyCode
150161
});
151162
},
152163

153-
init: function(args) {
164+
init: function (args) {
154165
this.host = args.host || location.href;
155166
this.clientUID = args.clientId;
156167
// console.log(this.clientUID);
@@ -166,7 +177,7 @@ Slide.Control.add('socket', function(S, broadcast) {
166177
var hour = 0,
167178
sec = 0,
168179
min = 0;
169-
timer2 = setInterval(function() {
180+
timer2 = setInterval(function () {
170181
sec++;
171182
if (sec === 60) {
172183
sec = 0;
@@ -183,9 +194,9 @@ Slide.Control.add('socket', function(S, broadcast) {
183194
}
184195
if (args.shake) {
185196
//添加shake
186-
MixJS.loadJS(Slide.dir + 'shake.js', function() {
197+
MixJS.loadJS(Slide.dir + 'shake.js', function () {
187198
var lastTime = Date.now();
188-
window.addEventListener('shake', function() {
199+
window.addEventListener('shake', function () {
189200
var now = Date.now();
190201
if (now - lastTime > 3000) {
191202
lastTime = now;
@@ -200,7 +211,7 @@ Slide.Control.add('socket', function(S, broadcast) {
200211
//已经存在
201212
Socket.connect();
202213
} else {
203-
MixJS.loadJS(socketIOURL, function() {
214+
MixJS.loadJS(socketIOURL, function () {
204215
Socket.connect();
205216
});
206217
}

0 commit comments

Comments
 (0)