Mercurial > hg > Members > nobuyasu > presen

view OpenSourceConference/index.html @ 1:5ec6fc187191

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add some files
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Thu, 08 Sep 2011 01:14:58 +0900
parents 7451f481250b
children b332c1050979
line wrap: on
line source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style>
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<title>2011/9/6</title>
<!-- metadata -->
    <meta name="generator" content="S5" />
    <meta name="version" content="S5 1.1" />
    <meta name="presdate" content="20110906" />
    <meta name="author" content="Nobuyasu Oshiro" />
    <meta name="company" content="University of the Ryukyu" />
<!-- meta temporary -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- configuration extensions -->
<meta name="tranSitions" content="true" />
<meta name="fadeDuration" content="500" />
<meta name="incrDuration" content="250" />
<!-- configuration autoplay extension -->
<meta name="autoMatic" content="false" />
<meta name="playLoop" content="true" />
<meta name="playDelay" content="10" />
<!-- configuration audio extension -->
<meta name="audioSupport" content="false" />
<meta name="audioVolume" content="100" />
<meta name="audioError" content="false" />
<!-- configuration audio debug -->
<meta name="audioDebug" content="false" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default_utf/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default_utf/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default_utf/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default_utf/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- embedded styles -->
<style type="text/css" media="all">
.imgcon {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 33%; height: 320px; position: relative;}
#anim img {position: absolute; top: 0px; left: 0px;}
</style>
<!-- S5 JS -->
<script src="ui/default_utf/slides.js" type="text/javascript"></script>
</head>
<body>

<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>ゼミ: 2011/ 9/ 6</h1>
<h2>並列信頼研</h2>
</div>
</div>

<div class="presentation">


      <div class="slide">
        <h1>Java による授業向け画面共有システムの設計と実装 </li>
        <h3></h3>
	<li>大城 信康  谷成 雄</li>
        <h4><a href="http://ie.u-ryukyu.ac.jp/" rel="external">琉球大学 並列信頼研究室</a></h4>
        <div class="handout"></div>
      </div>


      <!-- PAGE -->
      <div class="slide">
	<h1>目的と背景</h1>
	<li>大学の講義中、スクリーンに映されている画面は後ろの席程見えずらい。 </li>
	<li>その問題を手元のPCにも写せるようにすることで解決しようと考えた。</li>
	<li class="incremental">60人以上での画面共有を行うことを目標とする。</li>
      </div>
      <!-- PAGE -->
      <div class="slide">
        <h1>VNCを用いての画面共有</h1>
	<li>画面を共有する方法 -> VNC</li>
	<li>VNC: Virtual Network Computing </br>ネットワークを介してコンピュータを遠隔操作するプログラム </li>
	<li>VNCのリモートPCの画面を写す機能を利用する。</li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>通常のVNCの問題点</h1>
	<table class="center">
	  <tr>
	    <td width=50% >
	      <p style="text-aline: center;" >
	      <img clas="scale" src="./pix/NormalVNC3.png" width="450">
	      </p>
	      </td>
	    <td width=50%>
	      <li><small>VNC Serverの負荷が重い。</small></li>
	      <li><small>Server側の通信網1本への通信負荷が高い。</small></li>
	  </td>
	</tr>
	</table>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>通常のVNCの問題点</h1>
	<p style="text-align: center;">
	  <li>
	  <samll>1台と48台でVNCをかけた時のスループットとサーバ側のCPU使用率</small>
	  </li>
	</p>
	<table class="center" class="incremental" border=1>
	  <tr>
	    <td></td>
	    <td>スループット(単位:Byte)</td>
	    <td>CPU使用率</td>
	  </tr>

	  <tr>
	    <td>1台</td>
	    <td>20M</td>
	    <td>15%</td>
	  </tr>

	  <tr>
	    <td>48台</td>
	    <td>0.4M</td>
	    <td>100%</td>
	  </tr>
	</table>
	<li>VNCに使われるCPUの使用率が100%になり、スループットが5分の1まで下がっている。</li>

      </div>
      <!-- PAGE -->
      <div class="slide">
	<h1>VNCの問題点の解決策</h1>
	<p style="text-align: center;">
	<small>クライアントを木構造で接続させる</samll><br>
	<img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"><br>
	</p>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>TreeVNCの利点</h1>
	<li>クライアントが増えてもかかる負荷一定。</li>
	<li>通信網1本に対する負荷が減り、安定した通信ができる(有線)。</li>
	<table class="center" width=80% style="text-align: center;">
	  <tr>
	    <td><small>通常のVNC</small></td>
	    <td><small>TreeVNC</small></td>
	  </tr>
	  <tr>
	    <td>
		<img class="scale" src="./pix/NormalVNC3.png" width="450">
	      </td>
	    <td>
	      <img src="./pix/TreeVNC3.png" width="450">
	    </td>
	  </tr>
	    </p>
	</table>
	</div>
      </div>
      <!-- PAGE -->
      <div class="slide">
	<h1>TreeVNCの設計</h1>
	<li>TreeVNCのクライアントは最初にTop Proxyに接続を行う。</li>
	<li>データは木の下へと流していく。</li>
	<li>tightVNC ViewerのJava版(ver 1.3)を元にTreeVNCの実装を行う。</li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>発表内容</h1>
	<ul>
	  <li>RFB Protocol</li>
	  <li>データ量の見積もり</li>
	  <li>データ転送に用いたMulticastQueueについての説明</li>
	  <li>TreeVNCのデモ</li>
	  <li>木構造の再構築</li>
	  <li>ZRLE Encodingの問題</li>
	</ul>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>RFB protocol</h1>
	<li>Remote Frame Buffer Protocol : <br>GUI操作によるリモートアクセス用の通信プロトコル。VNCで用いられる。</li>
	<li>転送される画面(フレームバッファ)のデータは変更があった部分(差分)だけが矩形単位で送られる。</li>
	<table class="center">
	  <tr>
	    <td>
	      <img src="./pix/before.png">
	      </td>
	    <td>
	      <img src="./pix/rightArrow.png">
	      </td>
	    <td>
	      <img src="./pix/after2.png">
	      </td>
	    </tr>
	    </table>
	    <small>
	    <p style="text-align: center;"><font color=blue>□ </font>で囲まれている矩形のデータだけが送られてくる。 </p>
	    </small>
<!--	    
	<p style="text-align: center;">
	  <img class="sclae" src="./pix/rfb1.png" width=80%>
	</p>
-->
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>VNC のシーケンス図</h1>
       <table class="scale" width=100% >
	 <tr>
	   <td width=50%>
	     <img class="scale" src="./pix/VNC-Sequence-.png"  height=80%>
	     </td>
	     <td width=50% align="left">
	       <small>
	       <li><font color=blue>1~5</font>まではinitial seaquenceとなる。</li>
	       <li><font color=orange>6</font>以降は繰り返し行われる処理。画面のデータが転送されてくる。</li>
	       </small>
	     </td>
	 </tr>
	 </table>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>RFB Protocol</h1>
	<li>FramebufferUpdateRequestの内容</li>
<small>
<table>
<td width=50%>
<table border=1>
  <tr>
    <td>バイト数</td>
   <td><pre>型　　　[値]</pre></td>
    <td>説明 </td>
  </tr>

  <tr>
    <td>1</td>
    <td><pre>U8         3</pre></td>
    <td>message-type </td>
  </tr>

  <tr>
    <td>1</td>
    <td><pre>U8<pre></td> 
    <td>incremental</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>x-position</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>y-position</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>width</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>height</td>
  </tr>

</table>
</td>
<td>
<table>

<tr>
<font color=blue >
incrementalについて
</font>
</tr>
<tr>
<li>0の場合、VNC Serverは指定された領域の矩形データを送ってくる。</li>
<li>0以外の場合はその領域内で差分が発生した時に矩形データを送る。</li>
</tr>
</table>
</td>

</table>
</small>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>RFB Protocol</h1>
	<li>FramebufferUpdate</li>
<small>
<table>
<td width=100%>
<table>
    <tr>
    <td>バイト数</td>
   <td><pre>型　　　[値]</pre></td>
    <td>説明 </td>
  </tr>

  <tr>
    <td>1</td>
    <td><pre>U8         0</pre></td>
    <td>message-type </td>
  </tr>

  <tr>
    <td>1</td>
    <td><pre>U8<pre></td> 
    <td>padding</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>number-of-rectangles</td>
  </tr>

</table>
   <li>以下number-of-rectanglesの数だけ矩形のデータが続く</li>
<table width=100%>
  <tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>x-position</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>y-position</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>width</td>
  </tr>

  <tr>
    <td>2</td>
    <td><pre>U16<pre></td> 
    <td>height</td>
  </tr>

  <tr>
    <td>4</td>
    <td><pre>U32<pre></td> 
    <td>encoding-type</td>
  </tr>

</table>
</td>

</table>
</small>
	</div>
      <!-- PAGE -->
      <!-- PAGE -->
      <div class="slide">
	<h1>RFB Protocol</h1>
	<li>図を入れる</li>
	<li>指定された領域の矩形を更新しているのが分かる図 </li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>RFB Protocol</h1>
	<li>RFB ProtocolにはFramebufferUpdateRequestだけではなく、キーボード・マウスポインタの入力を伝えるkeyEventやPointerEvent等もある。</li>
	<li>TreeVNCでは画面の共有を行いたいのでそれらのイベントに対しての実装は行っていない。</li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>負荷分散</h1>
	<li>負荷分散を行う上で重要： -> 転送するデータ量を見積もること </li>
	<li>ネットワークの帯域やswtichにかかる負荷を把握するため。負荷を把握していないと負荷分散できているかどうかも解らない。</li>
	<li>RFB Protocolで送られてくるデータ量: -> 先頭の20バイトを読むことで見積もることができる。 </li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>データ量の見積もり</h1>
	<li>FramebufferUpdate(以下update)毎にデータを扱うためには、update1回分で送られてくるバイト量を知る必要がある
	  <br>（どこまで読みこめば終わりなのか知る必要がある）。 </li>
	<li>先頭の20バイトを読むことでupdate1回分のバイト量を知ることができる(厳密にはエンコード次第だが...)。 </li>
	<li>updateは最初に送られてくる情報に矩形の横と縦幅(width,height)が含まれていてそれと扱われるエンコードによって全体のデータ量を計算することができる。</li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>データ量の見積もり</h1>
	<li>ZRLEエンコードの場合</li>
	  <li>最初の4bitにどれだけのデータ量が送られてくるのかという情報が送られてくる。</li>
	  <small>
	  <table border=1 width=50%>
	    <tr>	
      <td>バイト数</td>
	      <td><pre>型　　　[値]</pre></td>
	      <td>説明 </td>
	    </tr>
	    
	    <tr>
	      <td>4</td>
	      <td>U32</td>
	      <td>length</td>
	    </tr>
	    
	    <tr>
	      <td>length</td>
	      <td>U8 array</td>
	      <td>zlibData</td>
	    </tr>

	  </table>
	  </small>
	  <small>
	<ul>
	  <li>ZlibDataはgzipされたデータのこと</li>
	  <li></li>
	</ul>
	</small>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>データ量の見積もり</h1>
	<li>先頭20バイトを読みupdate一回分のデータ量を調べる。</li>
	<li>update1回分のデータを読み込み次のクライアントに送信する。</li>
	<li>また、描画データを送信すると同時に画面の更新を行うようにする。</li>
	<li class="incremental">描画データの管理はMulticastQueueで行った。 </li>
      </div>
      <!-- PAGE -->
      <div class="slide">
	<h1>MulticastQueue</h1>
	<li>MulticastQueueはjava.util.CountDownLatchを用いて実装されたクラスである。 </li>
	<li>クライアントから接続されると、データ転送用のスレッド(sender)が走る。 </li>
	<li>このスレッドは次に流すデータが来るまでは待機して置かなければならない。そして流すべきデータがくるとまた動き始めなければならない。</li>
	<li>このスレッドの待機・解放を行うのがMulticastQueueとなる。 </li>
<!--
	<small>
	  <li>CountDownLatchはカウントを用いてスレッドの待機と解放を行えるクラスである。</li>
	</small>
-->
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>MulticastQueue</h1>
	<li>MulticastQueueの図を入れる。 </li>
	<p style="text-align: center;">
	<small>
	  接続されてきた時点からデータの送信が始まる。データは読み込まれるまでメモリ上に残っている。
	</small>
	</p>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>MulticastQueueの問題点</h1>
	<li>Clientがデータを読み込まないとデータが溜まりメモリを圧迫してしまう。 </li>
	<p style="text-align: center;">
	<img src="./pix/TimeOut1.png">
	</p>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>MulticastQueueの問題点</h1>
	<li style="text-align: center;">解決策</li>
	<p style="text-align: center;">
	<img src="./pix/TimeOut2.png">
	</p>
	  <small>
	  <li>TimeOut(TO)スレッドを走らせ、一定の時間データを読み込まなければ代わりにこのTOが読み込むようにする。</li>
	  </small>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>TreeVNCのデモ</h1>
	<li>では実際に動かしてみる。</li>
	<li></li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>エンコードの問題　</h1>
	<li>ZRLE : Zlib Run-Length Encoding </li><br>データをZlib圧縮扱うエンコーディング。
	  <br><small>Macintoshでもこのエンコードは使うことができる。</small></li>
	<li>Rawエンコードより約1/8倍少ないデータ量ですむ。</li>
	<li>解凍器(Deflater)は辞書を持っていて、その辞書を元に解凍を行う。</li>
	<li class="incremental">この辞書を吐き出す(flush)する機能がJavaにはなかった。</li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>ZRLEの問題</h1>
	<li>解凍に必要な辞書を取り出すことができないため、ZRLEのデータはそのまま投げるだけでは正しく解凍されない。</li>
	<li>そこで、VNC Serverへ接続するTop ProxyはZRLEで送られてきたデータを毎回新しく圧縮し直すという方法をとった。</li>
	<li>一度圧縮し直されたデータはそのまま流すことができる。よってクライアント側では圧縮し直す必要はない。 </li>
     	<li>このエンコードはZRLEE(Economy)として扱うことにした。</li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>TreeVNCの利点と欠点</h1>
	<ul>
	  <li>ケーブル1本への負荷が減る。一極集中型よりスループットを維持できる。</li>
	  <li>無線を使われると遅くなる。</li>
	</ul>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>テスト環境について</h1>
	<li>CUI版のVNCクライアントを作成</li>
	<li>48台あるクラスタでCUI版のクライアントをはしらせてVNCをかけさせる。</li>
	<li>最初の1台目と50台めをGUI版のクライアントで接続を行い見比べてみる。 </li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1></h1>
	<li></li>
	<li></li>
	</div>
      <!-- PAGE -->
      <div class="slide">
	<h1>既存のプログラムとの比較</h1>
	<li>VNC Reflector</li>
	<ul>
	  <li>tightVNCの作者が作成したプログラム</li>
	  <li>VNC Reflecotrにクライアントが接続することでVNCを行うことができる</li>
	</ul>
	</div>
      <!-- PAGE -->
      <div class="slide">
        <h1></h1>
	<li></li>
	</div>
      <!-- PAGE -->
</div>
</body>
</html>