comparison presen/slide.html @ 34:a55afdfb536b

Add presen
author Tatsuki IHA <e125716@ie.u-ryukyu.ac.jp>
date Thu, 18 Feb 2016 02:44:11 +0900
parents
children 8cf792825826
comparison
equal deleted inserted replaced
33:f85aef510a85 34:a55afdfb536b
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
5 <title>PC画面配信システムTreeVNCの NAT への対応</title>
6
7 <meta name="generator" content="Slide Show (S9) v2.5.0 on Ruby 2.3.0 (2015-12-25) [x86_64-darwin15]">
8 <meta name="author" content="Tatsuki IHA, Shinji KONO" >
9
10 <!-- style sheet links -->
11 <link rel="stylesheet" href="s6/themes/projection.css" media="screen,projection">
12 <link rel="stylesheet" href="s6/themes/screen.css" media="screen">
13 <link rel="stylesheet" href="s6/themes/print.css" media="print">
14 <link rel="stylesheet" href="s6/themes/blank.css" media="screen,projection">
15
16 <!-- JS -->
17 <script src="s6/js/jquery-1.11.3.min.js"></script>
18 <script src="s6/js/jquery.slideshow.js"></script>
19 <script src="s6/js/jquery.slideshow.counter.js"></script>
20 <script src="s6/js/jquery.slideshow.controls.js"></script>
21 <script src="s6/js/jquery.slideshow.footer.js"></script>
22 <script src="s6/js/jquery.slideshow.autoplay.js"></script>
23
24 <!-- prettify -->
25 <link rel="stylesheet" href="scripts/prettify.css">
26 <script src="scripts/prettify.js"></script>
27
28 <script>
29 $(document).ready( function() {
30 Slideshow.init();
31
32 $('code').each(function(_, el) {
33 if (!el.classList.contains('noprettyprint')) {
34 el.classList.add('prettyprint');
35 el.style.display = 'block';
36 }
37 });
38 prettyPrint();
39 } );
40
41
42 </script>
43
44 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
45 <!--[if IE]>
46 <script src="s6/js/jquery.microsoft.js"></script>
47 <![endif]-->
48
49
50
51 </head>
52 <body>
53
54 <div class="layout">
55 <div id="header"></div>
56 <div id="footer">
57 <div align="right">
58 <img src="s6/images/logo.svg" width="200px">
59 </div>
60 </div>
61 </div>
62
63 <div class="presentation">
64
65 <div class='slide cover'>
66 <table width="90%" height="90%" border="0" align="center">
67 <tr>
68 <td>
69 <div align="center">
70 <h1><font color="#808db5">PC画面配信システムTreeVNCの NAT への対応</font></h1>
71 </div>
72 </td>
73 </tr>
74 <tr>
75 <td>
76 <div align="left">
77 Tatsuki IHA, Shinji KONO
78
79 <hr style="color:#ffcc00;background-color:#ffcc00;text-align:left;border:none;width:100%;height:0.2em;">
80 </div>
81 </td>
82 </tr>
83 </table>
84 </div>
85
86 <div class='slide '>
87 <!-- === begin markdown block ===
88
89 generated by markdown/1.2.0 on Ruby 2.3.0 (2015-12-25) [x86_64-darwin15]
90 on 2016-02-18 02:42:16 +0900 with Markdown engine kramdown (1.9.0)
91 using options {}
92 -->
93
94 <!-- _S9SLIDE_ -->
95 <h1 id="section">画面共有を利用したコミュニケーション</h1>
96 <ul>
97 <li>授業やゼミ等で、それぞれが PC 端末を持っている場合では、PC の機能を活かした コミュニケーションが可能である</li>
98 <li>画面配信システム TreeVNC は参加したクライアントをバイナリツリー状に接続し、配信コストを分散させる 仕組みを取っている。そのため, 多人数が参加しても処理性能が下がらない</li>
99 <li>ツリー のルートが参照している VNC サーバーを変更することで、ケーブルの差し替えなしに画面の切替が行える</li>
100 </ul>
101
102
103 </div>
104 <div class='slide '>
105 <!-- _S9SLIDE_ -->
106 <h1 id="treevnc-">TreeVNC の問題点</h1>
107 <ul>
108 <li>TreeVNC を実際に使用していく中で様々な問題が発生</li>
109 <li>講義等を大学外の遠隔地から受けたい場合がある</li>
110 <li>TreeVNC は NAT を越えた接続が行うことができない</li>
111 </ul>
112
113
114 </div>
115 <div class='slide '>
116 <!-- _S9SLIDE_ -->
117 <h1 id="treevnc--1">TreeVNC の問題点</h1>
118 <ul>
119 <li>ゼミ等で発表者毎に画面切り替えを行う際、デュアルディスプレイを使っている学生がいた</li>
120 <li>その際 VNC サーバーからはすべての画面データが送信されており、発表とは関係ない画面も配信されていた</li>
121 </ul>
122
123 <p><img src="./images/multidisplay.svg" alt="message" width="500" /></p>
124
125
126 </div>
127 <div class='slide '>
128 <!-- _S9SLIDE_ -->
129 <h1 id="section-1">この発表は</h1>
130 <ul>
131 <li>TreeVNC の概要
132 <ul>
133 <li>構造</li>
134 <li>原理</li>
135 <li>画面切り替え</li>
136 </ul>
137 </li>
138 <li>今回の改良
139 <ul>
140 <li>NAT を越えた通信</li>
141 <li>マルチディスプレイの対応</li>
142 </ul>
143 </li>
144 <li>TreeVNC の評価
145 <ul>
146 <li>画像データ送信の遅延</li>
147 <li>ネックになってるノードへの対処</li>
148 </ul>
149 </li>
150 </ul>
151
152
153 </div>
154 <div class='slide '>
155 <!-- _S9SLIDE_ -->
156 <h1 id="treevnc">TreeVNC</h1>
157 <ul>
158 <li>TreeVNC は本研究室で開発している VNC を利用した画面配信システム</li>
159 <li>参加したクライアントをバイナリツリー状で接続することで配信コストを分散させる</li>
160 <li>スムーズな配信画面の切替を行う</li>
161 </ul>
162
163 <p><img src="./images/treeVnc.svg" alt="message" width="400" /></p>
164
165
166 </div>
167 <div class='slide '>
168 <!-- _S9SLIDE_ -->
169 <h1 id="vnc">VNC</h1>
170 <ul>
171 <li>VNC(Virtual Network Computing) は RFBプロトコルを用いて遠隔操作を行うソフトウェア</li>
172 <li>サーバー側とクライアント側に分かれており、サーバーを起動し、クライアントがサーバーに接続を行うことで遠隔操作を可能とする</li>
173 </ul>
174
175 <p><img src="./images/vnc.svg" alt="message" width="600" /></p>
176
177
178 </div>
179 <div class='slide '>
180 <!-- _S9SLIDE_ -->
181 <h1 id="rfb-">RFB プロトコル</h1>
182 <ul>
183 <li>RFB(Remote Frame Buffer)プロトコルは VNC で用いられているプロトコル</li>
184 <li>自身の画面をネットワーク越しに他者の画面に表示する</li>
185 <li>Framebuffer と呼ばれるメモリ上に置かれた画像データを使用して画面表示を行う</li>
186 <li>サーバーは Framebuffer が更新されるたびにクライアントに対して変更部分だけを送信する。</li>
187 </ul>
188
189
190 </div>
191 <div class='slide '>
192 <!-- _S9SLIDE_ -->
193 <h1 id="treevnc--2">TreeVNC の構造</h1>
194 <ul>
195 <li>Java で作成されたTightVNC(Tight Virtual Network Computing) を元に作成されている</li>
196 <li>様々なメッセージで通信を行う</li>
197 <li>クライアント同士をバイナリツリー状に接続する</li>
198 <li>バイナリツリーのルートのノードをRoot Nodeと呼び、 Root Node に接続されるノードを Node と呼ぶ</li>
199 </ul>
200
201
202 </div>
203 <div class='slide '>
204 <!-- _S9SLIDE_ -->
205 <h1 id="treevnc-1">TreeVNCの原理</h1>
206 <ul>
207 <li>ポート一本あたりの負荷
208 <ul>
209 <li>従来のVNC : Node数 * データ量</li>
210 <li>TreeVNC : (2(子供の数) + 1) * データ量</li>
211 </ul>
212 </li>
213 <li>従来のVNCはNode数に比例</li>
214 <li>TreeVNCはNode数に関係なく一定</li>
215 </ul>
216
217 <p><img src="./images/treeVncTheory.svg" alt="message" width="600" /></p>
218
219
220 </div>
221 <div class='slide '>
222 <!-- _S9SLIDE_ -->
223 <h1 id="section-2">切断時の木の再構成</h1>
224 <ul>
225 <li>TreeVNC はバイナリーツリーという特性上 Node の切断を検知できずにいると、Node 同士で構成された木構造が崩れてしまう</li>
226 <li>TreeVNC は Node 切断の検知を LOST_CHILD というメッセージで行っている</li>
227 </ul>
228
229 <p><img src="./images/lostChild.svg" alt="message" width="800" /></p>
230
231
232 </div>
233 <div class='slide '>
234 <!-- _S9SLIDE_ -->
235 <h1 id="section-3">共有画面切り替え</h1>
236 <ul>
237 <li>TreeVNC の Root Node は配信者の VNC サーバーと通信を行っている</li>
238 <li>画面を配信されている側のビューワにある Share Screen ボタンが押す</li>
239 <li>Root Node に SERVER_CHANGE_REQUEST を木構造を辿りながら送信</li>
240 <li>Root Node は Share Screen ボタンを押したクライアントの VNC サーバーと通信を開始</li>
241 </ul>
242
243
244 </div>
245 <div class='slide '>
246 <!-- _S9SLIDE_ -->
247 <h1 id="direct-connection">Direct Connection</h1>
248 <ul>
249 <li>NATを越えたネットワークからの接続は直接配信側の Root Node に接続を行うことで実現する</li>
250 <li>Direct Connection した Node はそのネットワークの Root Node になる</li>
251 <li>Direct Connection された Root Node では NAT を越えたネットワーク先の Node の管理を行わない</li>
252 </ul>
253
254 <p><img src="./images/directConnection.svg" alt="message" width="800" /></p>
255
256
257 </div>
258 <div class='slide '>
259 <!-- _S9SLIDE_ -->
260 <h1 id="section-4">マルチディスプレイ</h1>
261 <ul>
262 <li>画面切り替えの際のSERVER_CHANGE_REQUESTに共有するディスプレイの座標を付加する</li>
263 <li>Root Node は 接続した VNC サーバーから画像データを要求する FRAME_BUFFER_UPDATE_REQUEST に受け取った座標を付加する</li>
264 <li>VNC サーバーは要求された座標内の画像データを FRAME_BUFFER_UPDATE で Root Node に送信する</li>
265 </ul>
266
267 <p><img src="./images/shareScreenToMultiDisplay.svg" alt="message" width="800" /></p>
268
269
270 </div>
271 <div class='slide '>
272 <!-- _S9SLIDE_ -->
273 <h1 id="treevnc-2">TreeVNCの評価</h1>
274 <ul>
275 <li>木の深さによる画像データの遅延を調べる</li>
276 <li>実験環境
277 <ul>
278 <li>実際に講義を受講している学生が TreeVNC を使用</li>
279 <li>約20名の接続</li>
280 </ul>
281 </li>
282 </ul>
283
284
285 </div>
286 <div class='slide '>
287 <!-- _S9SLIDE_ -->
288 <h1 id="section-5">実測方法</h1>
289 <ul>
290 <li>Root Node は 送信時間と画像データを持った CHECK_DELAY を 末端 Node まで木構造を辿りながら伝達する</li>
291 <li>CHECK_DELAY を受け取った各 Node は 付加された送信時間を CHECK_DELAY_REPLY に付加し、 Root Node に送信する</li>
292 <li>CHECK_DELAY_REPLY を受け取った Root Node は CHECK_DELAY の送信にどれだけ時間がかかったかの計算を行う</li>
293 </ul>
294
295 <pre lang="java"><code>// 遅延時間の計算
296 Long delay = System.currentTimeMillis() - time;
297 </code></pre>
298
299
300 </div>
301 <div class='slide '>
302 <!-- _S9SLIDE_ -->
303 <h1 id="section-6">深さ1, 2</h1>
304 <p><img src="./images/depth1.svg" alt="message" width="450" />
305 <img src="./images/depth2.svg" alt="message" width="450" /></p>
306
307
308 </div>
309 <div class='slide '>
310 <!-- _S9SLIDE_ -->
311 <h1 id="section-7">深さ3, 4</h1>
312 <p><img src="./images/depth3.svg" alt="message" width="450" />
313 <img src="./images/depth4.svg" alt="message" width="450" /></p>
314
315
316 </div>
317 <div class='slide '>
318 <!-- _S9SLIDE_ -->
319 <h1 id="section-8">結果から</h1>
320 <ul>
321 <li>画像データの伝達はほぼ1秒以内に収まっている</li>
322 <li>容量が小さい場合でも時間がかかる場合がある。 それはその送信の前に大容量の画像を送信した後の回線の遅延が残っているためだと考えられる</li>
323 <li>深さ3が遅い原因として1つの Node がボトルネックになっている事が判明した。</li>
324 <li>ネックになった Node をそのままにするとその子Nodeに影響を及ぼしてしまう。 そのためその Node に何らかの対応を行う必要がある</li>
325 </ul>
326
327
328 </div>
329 <div class='slide '>
330 <!-- _S9SLIDE_ -->
331 <h1 id="section-9">ネックになっているノードへの対処</h1>
332 <ul>
333 <li>CHECK_DELAY_REPLY で Root Node は ネックかどうかのを判断をする</li>
334 <li>ネックになっているなら、そのノードを木構造のリストから削除</li>
335 <li>最後のノードを削除したnodeの場所に移動</li>
336 <li>ネックになったところは三分木になる</li>
337 </ul>
338
339 <p><img src="./images/fixTree.svg" alt="message" width="800" /></p>
340
341
342 </div>
343 <div class='slide '>
344 <!-- _S9SLIDE_ -->
345 <h1 id="section-10">まとめと課題</h1>
346 <ul>
347 <li>今回TreeVNCの様々な問題点の解決を行った</li>
348 <li>実験を行うことによりさらなる問題点が判明した</li>
349 <li>実測で判明したネックになっているNodeへの対処</li>
350 <li>NATを越えた画面切り替え</li>
351 <li>追加した機能の評価方法を思考し、評価を行う</li>
352 </ul>
353
354 <!-- === end markdown block === -->
355 </div>
356
357
358 </div><!-- presentation -->
359 </body>
360 </html>