changeset 59:72872a363e42 default tip

update html
author Yu Taninari <you@cr.ie.u-ryukyu.ac.jp>
date Mon, 26 Sep 2011 22:46:10 +0900
parents ca7ae1dc95cc
children
files jssst.html pix/reconnect1.png pix/reconnect2.png pix/reconnect3.png
diffstat 4 files changed, 464 insertions(+), 175 deletions(-) [+]
line wrap: on
line diff
--- a/jssst.html	Mon Sep 26 15:49:45 2011 +0900
+++ b/jssst.html	Mon Sep 26 22:46:10 2011 +0900
@@ -16,7 +16,7 @@
 .taninaritop {
    margin: auto;
    width: 95%;
-   font-weight: bold;
+//   font-weight: bold;
 }
 </style>
 <title>2011/9/27</title>
@@ -84,16 +84,15 @@
       <!-- PAGE -->
       <div class="slide">
  	<h1>目的と背景</h1>
-	<li>大学の講義中、スクリーンに映されている画面は後ろの席程見えずらい。 </li>
+	<li>大学の講義中、スクリーンに映されている画面は後ろの席ほど見えづらい。 </li>
 	<li>その問題を手元のPCにも写せるようにすることで解決しようと考えた。</li>
-	<li class="incremental">60人以上での画面共有を行うシステムを目標とする。</li>
+	<li>60人以上で画面共有を行うシステムを目標とする。</li>
       </div>
       <!-- PAGE -->
       <div class="slide">
         <h1>VNCによる画面共有</h1>
-	<li>今回、VNCを用いて画面共有システムを作成する。</li>
 	<li>VNC: Virtual Network Computing </br>ネットワークを介してコンピュータを遠隔操作するプログラム </li>
-	<li class="incremental">VNC用いた授業用画面共有システムTreeVNCの設計と実装を行った。</li>
+	<li>VNC用いた授業用画面共有システムTreeVNCの設計と実装を行った。</li>
 	</div>
       <!-- PAGE -->
       <div class="slide">
@@ -139,171 +138,10 @@
 	    <td>100%</td>
 	  </tr>
 	</table>
-	<li>VNCに使われるCPUの使用率が100%になり、スループットが5分の1まで下がっている。</li>
+	<li>48台繋げる事によって、VNCに使われるCPUの使用率が100%になり、スループットが5分の1まで下がっている。</li>
 
       </div>
-      <!-- PAGE -->
-      <div class="slide">
-	<h1>通常のVNCの問題点</h1>
-	<li>サーバへのCPU負荷が高い</li>
-	<li>1本の通信網への負荷が高い</li>
-      </div>
-      <!-- PAGE -->
-<!--
-      <div class="slide">
-	<h1>VNCの問題点の解決策</h1>
-	<p style="text-align: center;">
-	<small>クライアントを木構造で接続させるTreeVNC</samll><br>
-	<img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"><br>
-	</p>
-	</div>
--->
-      <!-- PAGE -->
-      <div class="slide">
-	<h1>TreeVNCの設計</h1>
-	<table>
-	  <tr>
-	    <td>
-	      <li>木構造での接続</li>
-	      <li>クライアントの管理を行うTop Proxyを置く。</li>
-	      <li>データは木の下へと流していくようにする。</li>
-	    </td>
-	    <td>
-<!--	<li>tightVNC ViewerのJava版を元にTreeVNCの実装を行う。</li> -->
-	<p style="text-align: center;">
-	  <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500">
-	    </p>
-	</td>
-	</tr>
-	  </table>
-	</div>
 
-      <!-- PAGE -->
-      <div class="slide">
-	<div class="taninaritop">
-	  <h1>木の構成手順</h1>
-	  <table class="tanitable">
-	    <tr>
-	      <td width=50%>
-		<center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree1.png" alt=""></center>
-		</td>
-	      <td valign="top">
-		<Font size="6">
-		   2分木の場合の木の構成について説明する。<br>
-		    クライアントは一旦Top Proxyに接続して、自分の接続先をProxyから取得する。<br>
-		  </td>
-		</tr>
-	      </table>
-	      </div>
-	    </div>
-	    
-	    <!-- PAGE -->
-	    <div class="slide">
-	      <div class="taninaritop">
-		<h1>木の構成手順</h1>
-		<table class="tanitable">
-		  <tr>
-		    <td width=50%>
-		      <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree2.png" alt=""></center>
-		      </td>
-		    <td valign="top" style="display: block; width: 100%; margin: auto;">
-		      <Font size="6">
-			親を決定する方法はTop Proxyで<br>
-			  <Font color="red">
-			    parentNumber = (myNumber - 1) / treeBranch<br>
-			    </Font>
-			    を計算してクライアントにどの親に接続すればよいかを知らせる。
-	               </td>
-	              </tr>
-                    </table>
-                   </div>
-                </div>
-
-	    <!-- PAGE -->
-	    <div class="slide">
-	      <div class="taninaritop">
-		<h1>木の構成手順</h1>
-		<table class="tanitable">
-		  <tr>
-		    <td width=50%>
-		      <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree3.png" alt=""></center>
-		      </td>
-		    <td valign="top" style="display: block; width: 100%; margin: auto;">
-		      <Font size="6">
-			親を決定する方法はTop Proxyで<br>
-			  <Font color="red">
-			    parentNumber = (myNumber - 1) / treeBranch<br>
-			    </Font>
-			    を計算してクライアントにどの親に接続すればよいかを知らせる。
-	               </td>
-	              </tr>
-                    </table>
-                   </div>
-                </div>
-
-	    <!-- PAGE -->
-	    <div class="slide">
-	      <div class="taninaritop">
-		<h1>木の構成手順</h1>
-		<table class="tanitable">
-		  <tr>
-		    <td width=50%>
-		      <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree4.png" alt=""></center>
-		      </td>
-		    <td valign="top" style="display: block; width: 100%; margin: auto;">
-		      <Font size="6">
-			親を決定する方法はTop Proxyで<br>
-			  <Font color="red">
-			    parentNumber = (myNumber - 1) / treeBranch<br>
-			    </Font>
-			    を計算してクライアントにどの親に接続すればよいかを知らせる。
-	               </td>
-	              </tr>
-                    </table>
-                   </div>
-                </div>
-
-<!--PAGE-->
-<div class="slide">
- <div class="taninaritop">
-   <h1>木の再構成手順</h1>
-   <table class="tanitable">
-     <tr>
-     <td>
-       <center><img class="scale" src="pix/reconnection1.png" alt=""></center>
-     </td>
-     <td valign="top">
-   <Font size="6">
-     クライアント1が落ちたときの説明<br>
-     クライアント1が落ちたとき子供のリーダー(クライアント3)がTop Proxyに親が落ちたことを報告する。<br>
-     Top Proxyからラストノードに対して、落ちたノードの代わりをするように命令が行く。<br>
-   </Font>
-   </Font>
-     </td>
-   </tr>
-   </table>
- </div>
-</div>
-
-<!--PAGE-->
-<div class="slide">
- <div class="taninaritop">
-   <h1>木の再構成手順</h1>
-   <table class="tanitable">
-     <tr>
-     <td>
-       <center><img class="scale" src="pix/reconnection2.png" alt=""></center>
-     </td>
-     <td valign="top">
-   <Font size="6">
-     命令を受けたラストノードが落ちたノードの代わりとなる。<br>
-     子供たちが新しい親に対して接続を行う。
-   </Font>
-     </td>
-   </tr>
-   </table>
- </div>
-</div>
 
       <!-- PAGE -->
       <div class="slide">
@@ -327,6 +165,7 @@
 	<li>通信網1本に対する負荷が減り、安定した通信ができる(有線)。</li>
 	</div>
       </div>
+
       <!-- PAGE -->
       <div class="slide">
 	<h1>TreeVNCの設計</h1>
@@ -361,9 +200,410 @@
 	</div>
       </div>
 
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>通常のVNCの問題点</h1>
+	<li>サーバへのCPU負荷が高い</li>
+	<li>1本の通信網への負荷が高い</li>
+      </div>
+      <!-- PAGE -->
+<!--
+      <div class="slide">
+	<h1>VNCの問題点の解決策</h1>
+	<p style="text-align: center;">
+	<small>クライアントを木構造で接続させるTreeVNC</samll><br>
+	<img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"><br>
+	</p>
+	</div>
+-->
+
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>今回の主な内容</h1>
+	<ul>
+	  <li>木の構成</li>
+	  <li>木の再構築</li>
+	  <li>MulticastQueue</li>
+	  <li>ZRLE Encodingの問題</li>
+	</ul>
+	</div>
+
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>TreeVNCの設計</h1>
+	<table>
+	  <tr>
+	    <td>
+	      <li>木構造での接続</li>
+	      <li>クライアントの管理を行うTop Proxyを置く。</li>
+	      <li>データは木の上から下へと流していくようにする。</li>
+	    </td>
+	    <td>
+<!--	<li>tightVNC ViewerのJava版を元にTreeVNCの実装を行う。</li> -->
+	<p style="text-align: center;">
+	  <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500">
+	    </p>
+	</td>
+	</tr>
+	  </table>
+	</div>
+
+<!-- PAGE -->
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml1.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     requestHostName();
+   </Font>
+     <br>
+     プロキシに対してホストのアドレスを要求する関数。
+   </Font>
+     </td>
+   </tr>
+   </table>
+ </div>
+</div>
+
+      <!-- PAGE -->
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml2.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     transferParentAddress();
+     </Font>
+     <br>
+       クライアントに接続先を教える関数。
+       <br>
+       <br>
+       実際にクライアントにおくっているデータは
+       <br>
+         parentAddress
+       <br>
+         parentNum
+       <br>
+	 treeNum
+   <br>
+	 leaderFlag
+       <br>
+         の4つである。
+       <br>
+         リーダーは子供の中で一番若い番号の人がなる。
+       <br>
+         リーダーフラグは木の再構成の際に使用する。
+   </Font>
+     </td>
+       </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml3.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     connectAndAuthenticate();
+     </Font>
+     <br>
+       プロキシから受け取ったデータをもとに接続を開始する関数。
+   </Font>
+     </td>
+   </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml4.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+     新しいクライアントが来るたびに今まで説明した3つの関数を呼び出す。
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml5.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml6.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml7.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml8.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/uml9.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+     ここで接続先がクライアント1になっているがこれはプロキシ側で
+     <br>
+     <Font color="red">
+     親の番号 = (自分の番号 - 1) / 親に対する子どもの数
+     </Font>
+     <br>
+     を計算してどの親に接続させれば良いかを決めてクライアントに報告している。
+     <br>
+       このように番号で木を管理している。
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の再構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/reuml1.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+     クライアント1が落ちた時の再接続の処理についての説明。
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の再構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/reuml2.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     lostHost();
+     </Font>
+     <br>
+       木を構成する際にリーダを決めたが、そのリーダだけが呼び出す関数。
+     <br>
+       プロキシに対し落ちた親(クライアント1)の情報を報告する。
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の再構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/reuml3.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     reportLastNode();
+     </Font>
+     <br>
+     ラストノードに対し落ちたクライアントの代わりをするように命令を出す。
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の再構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/reuml4.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     connectAndAuthenticate();
+     </Font>
+     <br>
+      プロキシから受け取ったデータをもとに接続を開始する関数。
+     <br>
+       この時クライアント6がクライアント1に変わる。
+
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の再構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/reuml5.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     transferParentAddress();
+     </Font>
+     <br>
+       落ちた親の子供たちに対し新しい親のアドレスを報告する関数。
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
+
+
+<div class="slide">
+ <div class="taninaritop">
+   <h1>木の再構成手順</h1>
+   <table class="tanitable">
+     <tr>
+     <td>
+   <center><img class="scale" src="pix/reuml6.png" alt=""></center>
+     </td>
+     <td valign="top">
+   <Font size="6">
+   <Font color="red">
+     connectAndAuthenticate();
+     </Font>
+     <br>
+      プロキシから受け取ったデータをもとに接続を開始する関数。
+
+   </Font>
+     </td>
+     </tr>
+   </table>
+ </div>
+</div>
 
 <!--RFBPROTOCOL説明-->
-
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>RFB protocol</h1>
+	<li>Remote Frame Buffer Protocol : <br>GUI操作によるリモートアクセス用の通信プロトコル。VNCで用いられている。</li>
+	<li><font color=blue>1~5</font>まではinitial seaquenceとなる。</li>
+	<li><font color=orange>6</font>以降は繰り返し行われる処理。画面のデータが転送されてくる。</li>
+	</div>
 
       <!-- PAGE -->
       <div class="slide">
@@ -394,16 +634,47 @@
  	<p class="textcenter">
 	  <img  src="./pix/MulticastQueue3.png">
 	  </p>
-	<li class="incremental">MulticastQueueクラスを用いた並列な転送を行った。</li>
+	<li>MulticastQueueクラスを用いた並列な転送を行った。</li>
       </div>
 
    <!--MulticastQueueが必要になった経緯-->
+<!--
 	<div class="slide">
 	<h1>MulticastQueue</h1>
 	<li>クライアントは、自分のペースでデータを読み込みたい。</li>
 	<li></li>
 	<li class="incremental">TreeVNCではVNCサーバとの接続はこのZRLEを扱う。</li>
       </div>
+-->
+
+<!--PAGE-->
+      <div class="slide">
+	<h1>MulticastQueue</h1>
+	<li>MulticastQueue:データを順序よく読み込ませるクラス</li>
+	  <table class="textcenter" border=1 cellspacing="0" width=100%>
+	    <tr>
+	      <td width=50%>
+		<img src="./pix/MulticastQueue2.png">
+		</td>
+	      <td>
+		<img src="./pix/MulticastQueue.png">
+	      </td>
+	      </tr>
+
+	      <tr>
+		<td>
+		  次のデータがなければwaitする
+		</td>
+		<td>
+		  データがputされ次第読み込みを再開する
+		</td>
+	      </tr>
+	    </table>
+	      <p><small>
+		  MulticastQueueは、java.util.CountDownnLatchにより実装されている。
+	      </small></p>
+	</div>
+
 
       <!-- PAGE -->
       <div class="slide">
@@ -464,9 +735,9 @@
       <!-- PAGE -->
       <div class="slide">
 	<h1>エンコード</h1>
-	<li>MAC OS XではZRLEを使ってVNCを行うことができる</li>
+	<li>Mac OS XではZRLEを使ってVNCを行うことができる</li>
 	<li>ZRLEはデータ量がRAWデータの約4分の1ですむ。</li>
-	<li class="incremental">TreeVNCではVNCサーバとの接続はこのZRLEを扱う。</li>
+	<li>TreeVNCではVNCサーバとの接続はこのZRLEを扱う。</li>
       </div>
       <!-- PAGE -->
       <div class="slide">
@@ -495,9 +766,27 @@
 	    </tr>
 	  </table>
 	  </small>
-	<li class="incremental">Zlibデータは辞書を元にデータの解凍を行う</li>
-	<li class="incremental">辞書がなければデータを正しく解凍できない</li>
+	<li>Zlibデータは辞書を元にデータの解凍を行う</li>
+	<li>辞書がなければデータを正しく解凍できない</li>
       </div>
+      <!--PAGE-->
+      <div class="slide">
+	<h1>ZRLEの問題</h1>
+	<li>辞書はZlibデータの最初に送られてくる。</li>
+	<li>もしも、ZRLEのデータを最初から送っているのなら、辞書も送ることができる。</li>
+	<li>データの途中から送ると辞書は送られず、正しく解凍を行うことができない。</li>
+	<table class="textcenter" width=100%>
+	  <tr>
+	    <td>
+	  <img src="./pix/ZRLE.png" width="600" >
+	  </td>
+	<td>
+	    <img src="./pix/ZRLE2.png" width="600" >
+	  </td>
+	</tr>
+	  </table>
+	</div>
+
       <!-- PAGE -->
       <div class="slide">
 	<h1>ZRLEE</h1>
@@ -615,13 +904,13 @@
 	<li>VNC Reflector</li>
 	<ul>
 	  <li>tightVNCの作者が作成したプログラム</li>
-	  <li>VNC Reflecotrにクライアントが接続することでVNCを行うことができる</li>
+	  <li>VNC Reflector(Proxy)にクライアントが接続することでVNCを行うことができる</li>
 	</ul>
 	</div>
       <!-- PAGE -->
       <!-- PAGE -->
       <div class="slide">
-	<h1>質問タイム</h1>
+	<h1>質問</h1>
 	</div>
 </body>
 </html>
Binary file pix/reconnect1.png has changed
Binary file pix/reconnect2.png has changed
Binary file pix/reconnect3.png has changed