|
27
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta charset='utf-8'>
|
|
|
5 <title>Presentation</title>
|
|
|
6 <script src='slides.js'></script>
|
|
|
7 <style media='screen,projection'>
|
|
|
8 /****
|
|
|
9 * Add your styles here.
|
|
|
10 */
|
|
|
11
|
|
|
12 body { font-size: 175%; }
|
|
|
13
|
|
|
14 .step { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
|
|
|
15
|
|
|
16 .slide {
|
|
|
17 font-family: 'Open Sans', Arial, sans-serif;
|
|
|
18
|
|
|
19 color: rgb(102, 102, 102);
|
|
|
20 text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
|
|
21 }
|
|
|
22
|
|
|
23 .slide h1, .slide h2, .slide h3 {
|
|
|
24 color: rgb(51, 51, 51);
|
|
|
25 }
|
|
|
26
|
|
|
27 .slide pre {
|
|
|
28 font-family: 'Droid Sans Mono', 'Courier New', monospace;
|
|
|
29 font-size: 80%;
|
|
|
30
|
|
|
31 padding: 5px 10px;
|
|
|
32
|
|
|
33 margin-top: 40px;
|
|
|
34 margin-bottom: 40px;
|
|
|
35
|
|
|
36 color: black;
|
|
|
37 background: rgb(240, 240, 240);
|
|
|
38 border: 1px solid rgb(224, 224, 224);
|
|
|
39 box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);
|
|
|
40 overflow: hidden;
|
|
|
41 }
|
|
|
42
|
|
|
43 .slide code {
|
|
|
44 font-family: 'Droid Sans Mono', 'Courier New', monospace;
|
|
|
45 color: black;
|
|
|
46 }
|
|
|
47 </style>
|
|
|
48 </head>
|
|
|
49 <body>
|
|
|
50
|
|
|
51 <section class='slides'>
|
|
|
52 <!-- Add your slides here. Delete or comment out the slides below. -->
|
|
|
53
|
|
|
54 <article class='cover'>
|
|
|
55 <h1>
|
|
|
56 授業やゼミ向けの画面共有システム
|
|
|
57 <br>
|
|
|
58 TreeVNCの設計と実装
|
|
|
59 </h1>
|
|
|
60 <p>
|
|
|
61 谷成 雄
|
|
|
62 <br>
|
|
|
63 Feb 4, 2014
|
|
|
64 </p>
|
|
|
65 </article>
|
|
|
66
|
|
|
67 <article class='smaller'>
|
|
|
68 <h3>概要</h3>
|
|
|
69 <p>
|
|
|
70 大学の講義、プロジェクタなどの投影機を用いて授業を行っているが、スクリーンに写されている画面は後ろの席に行けば行くほど見えづらくなる。
|
|
|
71 </p>
|
|
|
72 <p>
|
|
|
73 その問題を画面共有ソフトVNCを用いて、手元のコンピュータに講師の画面を表示することで解決しようと考えた。
|
|
|
74 </p>
|
|
|
75 <p>
|
|
|
76 しかし、通常のVNCを用いて多人数が同時に接続するとサーバ側の処理性のが低下し、授業の進行について行かなくなってしまう。
|
|
|
77 </p>
|
|
|
78 <p>
|
|
|
79 本研究では、多人数で使用しても処理性能が低下することない画面共有システムTreeVNCの設計と実装を行い、更にゼミなどで使用しやすいようにUIの提案と実装も行った。
|
|
|
80 </p>
|
|
|
81 </article>
|
|
|
82
|
|
|
83 <article>
|
|
|
84 <h3>
|
|
|
85 VNCについて
|
|
|
86 </h3>
|
|
|
87 <p>
|
|
|
88 VNC(Virtual Network Computing)とは、RFBプロトコルというプロトコルを用いて画面共有を実現することのできるアプリケーションである。
|
|
|
89 </p>
|
|
|
90 <p>
|
|
|
91 RFBプロトコルはGUI操作によるリモートアクセス用の通信プロトコルである。
|
|
|
92 </p>
|
|
|
93 <p>
|
|
|
94 ソースコードはオープンソースとして公開されているため、多数の派生ソフトが存在する。
|
|
|
95 </p>
|
|
|
96 <p>
|
|
|
97 派生ソフトには、RealVNCやTightVNCなどがある。
|
|
|
98 </p>
|
|
|
99 </article>
|
|
|
100
|
|
|
101 <article class='smaller'>
|
|
|
102 <h3>
|
|
|
103 多人数でVNCを使用する場合の問題点
|
|
|
104 </h3>
|
|
|
105 <p>
|
|
|
106 VNC Serverに対して、一極集中型で接続してしまうので、VNC ServerへのCPU負荷が高い。
|
|
|
107 </p>
|
|
|
108 <p>
|
|
|
109 VNC Server側の通信網1本への通信負荷が高い。
|
|
|
110 </p>
|
|
|
111 <p style="text-align: center">
|
|
|
112 <img style="height:250px" src="./images/vnc.png"/>
|
|
|
113 </p>
|
|
|
114 </article>
|
|
|
115
|
|
|
116 <article>
|
|
|
117 <h3>
|
|
|
118 多人数でVNCを使用する場合の問題点
|
|
|
119 </h3>
|
|
|
120 <p>
|
|
|
121 1台と48台でVNC Serverに接続した時のCPU使用率とスループット
|
|
|
122 </p>
|
|
|
123 <table class="center" class="incremental" border=1>
|
|
|
124 <tr>
|
|
|
125 <td></td>
|
|
|
126 <td>スループット(単位:bps)</td>
|
|
|
127 <td>CPU使用率</td>
|
|
|
128 </tr>
|
|
|
129 <tr>
|
|
|
130 <td>1台</td>
|
|
|
131 <td>20M<small>(VNCでの最大速度)</small></td>
|
|
|
132 <td>55%</td>
|
|
|
133 </tr>
|
|
|
134 <tr>
|
|
|
135 <td>48台</td>
|
|
|
136 <td>4M(1台あたり)</td>
|
|
|
137 <td>100%</td>
|
|
|
138 </tr>
|
|
|
139 </table>
|
|
|
140 <p>
|
|
|
141 48台でVNC Serverに接続した際、CPU使用率が100%になりスループットが5分の1まで下がってしまう。
|
|
|
142 </p>
|
|
|
143 </article>
|
|
|
144
|
|
|
145 <article>
|
|
|
146 <h3>
|
|
|
147 TreeVNCの設計
|
|
|
148 </h3>
|
|
|
149 <p>
|
|
|
150 多人数でVNCを使用する際は、VNC Serverに一極集中で接続してしまうのが問題であったので、集中している負荷を分散できないか考えた。
|
|
|
151 </p>
|
|
|
152 <p>
|
|
|
153 VNC Serverに負荷が集中しているので、クライントに負荷を分散するようにクライアント同士でのデータをやりとりすることで負荷分散ができる。
|
|
|
154 </p>
|
|
|
155 <p>
|
|
|
156 クライント同士の接続を木構造に行って、データを上から下へと流しすようにすることで、すべてのクライアントへデータを届ける。
|
|
|
157 今後、木構造に接続されたクライアントのことをNodeと呼ぶ。
|
|
|
158 </p>
|
|
|
159 </article>
|
|
|
160
|
|
|
161 <article class='smaller'>
|
|
|
162 <h3>
|
|
|
163 TreeVNCの設計
|
|
|
164 </h3>
|
|
|
165 <p>
|
|
|
166 Nodeを木構造に接続させるために、トポロジを管理する特別なNodeが必要になる。今後このノードのことをRoot Nodeと呼ぶ。
|
|
|
167 </p>
|
|
|
168 <p>
|
|
|
169 RootNodeはVNC Serverに接続し、Nodeの接続に対して木構造にNodeを接続するように命令を出す。
|
|
|
170 </p>
|
|
|
171 <p style="text-align: center">
|
|
|
172 <img style="height:250px" src="./images/treevnc.png"/>
|
|
|
173 </p>
|
|
|
174 </article>
|
|
|
175 <article>
|
|
|
176 <h3>
|
|
|
177 TreeVNCの原理
|
|
|
178 </h3>
|
|
|
179 <p>
|
|
|
180 TreeVNCでは、接続が分散していて、通信網1本に対する負荷が減少するのでNodeが増えても高いスループットを保つことができる。
|
|
|
181 </p>
|
|
|
182 <p style="text-align: center">
|
|
|
183 <img style="height:250px" src="./images/structureofTreeVNC.png"/>
|
|
|
184 </p>
|
|
|
185 </article>
|
|
|
186
|
|
|
187 <article>
|
|
|
188 <h3>
|
|
|
189 木の構成方法
|
|
|
190 </h3>
|
|
|
191 <ul>
|
|
|
192 <li>
|
|
|
193 Nodeは接続を行う時にRoot Nodeに接続し、Root Nodeから接続するべき場所のIPアドレスをもらう。
|
|
|
194 </li>
|
|
|
195 <li>
|
|
|
196 Root Nodeは接続してきたNodeのIPアドレスを自身が持つリストに登録し、接続先のIPアドレスを返す。
|
|
|
197 </li>
|
|
|
198 <li>
|
|
|
199 Nodeは指定されたNodeに接続を行う。
|
|
|
200 </li>
|
|
|
201 <p>
|
|
|
202 Nodeが接続される度に、この手順を繰り返すことで、木を構成することができる。
|
|
|
203 </p>
|
|
|
204 </ul>
|
|
|
205 </article>
|
|
|
206
|
|
|
207 <article>
|
|
|
208 <h3>
|
|
|
209 画面切り替えの実装
|
|
|
210 </h3>
|
|
|
211 <p>
|
|
|
212 授業ではなくゼミなどの多数発表者がいる場面で、TreeVNCを用いるためには、発表者が変わる度にRoot NodeとNodeがアプリケーションを立ち上げなおさなければならない。
|
|
|
213 発表者が大勢いると切り替えだけで時間を取られてしまう。
|
|
|
214 </p>
|
|
|
215 <p>
|
|
|
216 そこで、ボタンひとつで画面を切り替えることのできるように実装を行った。
|
|
|
217 </p>
|
|
|
218 </article>
|
|
|
219
|
|
|
220 <article>
|
|
|
221 <h3>
|
|
|
222 画面の切り替え
|
|
|
223 </h3>
|
|
|
224 <p>
|
|
|
225 画面の切替手順は以下のとおりである。
|
|
|
226 </p>
|
|
|
227 <ul>
|
|
|
228 <li>
|
|
|
229 Node側が、アプリケーションのWindowに配置された、切り替えボタンを押すと、Root Nodeに対してボタンを押したNodeのIPアドレスが渡される。
|
|
|
230 </li>
|
|
|
231 <li>
|
|
|
232 Root Nodeは受け取ったIPアドレスのNodeに対して、接続要求を出す。
|
|
|
233 </li>
|
|
|
234 <li>
|
|
|
235 Nodeが要求を認証するとRoot Nodeは現在使用しているストリームを閉じて、すべてのNodeに対して画面が切り替わったことを知らせる。
|
|
|
236 </li>
|
|
|
237 <li>
|
|
|
238 Nodeは切り替わった画面への接続を行う。
|
|
|
239 </li>
|
|
|
240 </ul>
|
|
|
241 </article>
|
|
|
242
|
|
|
243
|
|
|
244 <article>
|
|
|
245 <h3>
|
|
|
246 マルチディスプレイの対応
|
|
|
247 </h3>
|
|
|
248 <p>
|
|
|
249 マルチディスプレイを使用してTreeVNCを使用する場合、Nodeにすべてのディスプレイのデータが送られてしまう。
|
|
|
250 しかし、実際、発表する際には一つのディスプレイしか使用しない場合が多いので、無駄なデータが流れていることになる。
|
|
|
251 Node側も見たい画面へとスクロールする手間が出てくる。
|
|
|
252 </p>
|
|
|
253 <p>
|
|
|
254 一つのディスプレイのデータを送ることができるように実装を行った。
|
|
|
255 </p>
|
|
|
256 </article>
|
|
|
257
|
|
|
258 <article>
|
|
|
259 <h3>
|
|
|
260 マルチディスプレイの対応
|
|
|
261 </h3>
|
|
|
262 <p>
|
|
|
263 RFBプロトコルの中ではFrameBufferUpdateで、画像データの送信を行っている。
|
|
|
264 画像のやりとりの手順は以下の表である。
|
|
|
265 </p>
|
|
|
266 <table>
|
|
|
267 <tr>
|
|
|
268 <th>
|
|
|
269 バイト数
|
|
|
270 <th>
|
|
|
271 説明
|
|
|
272 <tr>
|
|
|
273 <td>
|
|
|
274 2
|
|
|
275 <td>
|
|
|
276 message-type and padding
|
|
|
277 <tr>
|
|
|
278 <td>
|
|
|
279 2
|
|
|
280 <td>
|
|
|
281 number-of-rectangle
|
|
|
282 <tr>
|
|
|
283 <td>
|
|
|
284 2
|
|
|
285 <td>
|
|
|
286 x-position
|
|
|
287 <tr>
|
|
|
288 <td>
|
|
|
289 2
|
|
|
290 <td>
|
|
|
291 y-position
|
|
|
292 <tr>
|
|
|
293 <td>
|
|
|
294 2
|
|
|
295 <td>
|
|
|
296 width
|
|
|
297 <tr>
|
|
|
298 <td>
|
|
|
299 2
|
|
|
300 <td>
|
|
|
301 height
|
|
|
302 <tr>
|
|
|
303 <td>
|
|
|
304 4
|
|
|
305 <td>
|
|
|
306 encoding-type
|
|
|
307
|
|
|
308 </table>
|
|
|
309 </article>
|
|
|
310
|
|
|
311 <article class='smaller'>
|
|
|
312 <h3>
|
|
|
313 マルチディスプレイの対応
|
|
|
314 </h3>
|
|
|
315 <p>
|
|
|
316 流れてきたx-position,y-position,width,heightで画像の位置と大きさがわかる。
|
|
|
317 </p>
|
|
|
318 <p>
|
|
|
319 ２つディスプレイがある場合は、２つのディスプレイにまたがった画像のデータが来ることはない。
|
|
|
320 </p
|
|
|
321 <p style="text-align: center">
|
|
|
322 <img style="height:200px" src="./images/sendscreenimage.png"/>
|
|
|
323 </p>
|
|
|
324 <p>
|
|
|
325 そこで、Root Nodeでフィルタリングしてやることで一つのディスプレイの情報を送ることができる。
|
|
|
326 例えば上の図で左側の画面の画像を送信したい場合は、x-positionが1920以下の画像だけを、Nodeに送ることでひとつのディスプレイデータを送ることが実現できる。
|
|
|
327 </p>
|
|
|
328 </article>
|
|
|
329
|
|
|
330 <article>
|
|
|
331 <h3>
|
|
|
332 MulticastとBroadcastについて
|
|
|
333 </h3>
|
|
|
334 <p>
|
|
|
335 TreeVNCでは、TCPコネクションを用いて、通信を行っているので、クライアント数の通信が必要である。
|
|
|
336 </p>
|
|
|
337 <p>
|
|
|
338 BroadcastやMulticastを用いると、データ送信は一回だけで良い。
|
|
|
339 </p>
|
|
|
340 <p>
|
|
|
341 しかし、BroadcastとMulticastのは、パケットの確実性は保証していないので、パケットが消失してしまうことがある。
|
|
|
342 </p>
|
|
|
343 </article>
|
|
|
344
|
|
|
345 <article>
|
|
|
346 <h3>
|
|
|
347 MulticastとBroadcastについて
|
|
|
348 </h3>
|
|
|
349 <p>
|
|
|
350 どの程度パケットが消失しているのかをテストしてみた。
|
|
|
351 以下の表は100packetデータを送信してデータのロス率を調べた表である。
|
|
|
352 </p>
|
|
|
353 <table class="center" class="incremental" border=1>
|
|
|
354 <tr>
|
|
|
355 <td></td>
|
|
|
356 <td>256byte</td>
|
|
|
357 <td>4000byte</td>
|
|
|
358 </tr>
|
|
|
359 <tr>
|
|
|
360 <td>Broadcast</td>
|
|
|
361 <td>47%</td>
|
|
|
362 <td>87%</td>
|
|
|
363 </tr>
|
|
|
364 <tr>
|
|
|
365 <td>Multicast</td>
|
|
|
366 <td>0%</td>
|
|
|
367 <td>37%</td>
|
|
|
368 </tr>
|
|
|
369 </table>
|
|
|
370 <p>
|
|
|
371 Multicastを使用しても、4000byteで1000packetを送信して37%のデータをロスしているので、予想以上にロス率が高い。
|
|
|
372 </p>
|
|
|
373 </article>
|
|
|
374
|
|
|
375 <article>
|
|
|
376 <h3>
|
|
|
377 MulticastとBroadcast
|
|
|
378 </h3>
|
|
|
379 <p>
|
|
|
380 MulticastとBroadcastは、一回のデータ送信で、約64000byteのデータしか送信することができない。
|
|
|
381 </p>
|
|
|
382 <p>
|
|
|
383 1920*1080の画像で送られてくるデータは6220800byteである。つまりデータを約100個に分割しなければならない。
|
|
|
384 </p>
|
|
|
385 <p>
|
|
|
386 分割するテストプログラムを書いてみたところ、分割と送信に画面共有に支障をきたすほど処理が遅くなってしまった。
|
|
|
387 </p>
|
|
|
388 </article>
|
|
|
389
|
|
|
390 <article>
|
|
|
391 <h3>
|
|
|
392 TreeVNCの評価
|
|
|
393 </h3>
|
|
|
394 <p>
|
|
|
395 TreeVNCを評価するために複数のNodeが必要となる、そこで今回は学科で提供されている並列計算環境を利用して、実験を行った。
|
|
|
396 使用した並列計算環境の性能は以下の図に示す。
|
|
|
397 </p>
|
|
|
398 <table>
|
|
|
399 <tr>
|
|
|
400 <th>
|
|
|
401 名前
|
|
|
402 <th>
|
|
|
403 概要
|
|
|
404 <tr>
|
|
|
405 <td>
|
|
|
406 CPU
|
|
|
407 <td>
|
|
|
408 Intel(R) CPU X5650@2.67GHz
|
|
|
409 <tr>
|
|
|
410 <td>
|
|
|
411 物理コア数
|
|
|
412 <td>
|
|
|
413 2
|
|
|
414 <tr>
|
|
|
415 <td>
|
|
|
416 物理コア数
|
|
|
417 <td>
|
|
|
418 4
|
|
|
419 <tr>
|
|
|
420 <td>
|
|
|
421 OS
|
|
|
422 <td>
|
|
|
423 CentOS 5.8
|
|
|
424 <tr>
|
|
|
425 <td>
|
|
|
426 台数
|
|
|
427 <td>
|
|
|
428 48台
|
|
|
429 </table>
|
|
|
430 </article>
|
|
|
431
|
|
|
432 <article>
|
|
|
433 <h3>
|
|
|
434 TreeVNCの評価
|
|
|
435 </h3>
|
|
|
436 <p>
|
|
|
437 TreeVNCは木構造で構成されているので、一番上のノードから一番下のノードまで、データが届くのに時間がかかってしまう可能性がある。
|
|
|
438 </p>
|
|
|
439 <p>
|
|
|
440
|
|
|
441 </p>
|
|
|
442 <table>
|
|
|
443 <tr>
|
|
|
444 <th>
|
|
|
445 段数
|
|
|
446 <th>
|
|
|
447 遅延
|
|
|
448 <tr>
|
|
|
449 <td>
|
|
|
450 2
|
|
|
451 <td>
|
|
|
452 約1ミリ秒
|
|
|
453 <tr>
|
|
|
454 <td>
|
|
|
455 4
|
|
|
456 <td>
|
|
|
457 約58ミリ秒
|
|
|
458 <tr>
|
|
|
459 <td>
|
|
|
460 6
|
|
|
461 <td>
|
|
|
462 約139ミリ秒
|
|
|
463 </fgtable>
|
|
|
464 </article>
|
|
|
465
|
|
|
466 <article class='slide nobackground'>
|
|
|
467 <iframe src='http://slideshow-s9.github.io'></iframe>
|
|
|
468 </article>
|
|
|
469
|
|
|
470 <article class='fill'>
|
|
|
471 <h3>
|
|
|
472 Full-slide embed with (optional) slide title on top
|
|
|
473 </h3>
|
|
|
474 <iframe src='http://slideshow-s9.github.io'></iframe>
|
|
|
475 </article>
|
|
|
476
|
|
|
477 <article>
|
|
|
478 <h3>
|
|
|
479 Thank you!
|
|
|
480 </h3>
|
|
|
481
|
|
|
482 <ul>
|
|
|
483 <li>
|
|
|
484 <a href='http://www.example.com'>example.com</a>
|
|
|
485 </li>
|
|
|
486 </ul>
|
|
|
487 </article>
|
|
|
488
|
|
|
489 </section>
|
|
|
490
|
|
|
491 </body>
|
|
|
492 </html>
|
