基於 X 視窗系統之遠端應用程式畫面呈現機制

Advisor : Jing Chen

Reporter : 林建宏Date : 2011/12/15

2

Outline

• 簡介• 動機與目標• 相關研究• 系統架構• 結論

3

簡介• WebOS– 使用瀏覽器操作遠端應用程式– 不需 plug-in– Thin client– 伺服器只分享單一應用程式– 多客戶端 V.S. 單一伺服器

4

簡介• 之前實作方法– 擷取應用程式畫面，儲存為圖片– 瀏覽器發出請求，請求圖片檔名– 瀏覽器下載圖片，顯示於網頁上

• 缺點– 以圖片方式傳送畫面，流量大– 以 client pull 方式更新畫面，延遲性高，互動性

差

5

動機與目標• 現有的遠端畫面呈現系統在行動裝置上效

率不佳• 互動性差• 目標– 改變畫面呈現方式，減少網路傳輸資料量– 改變伺服器客戶端溝通機制，減少系統延遲性

6

相關研究• X Window System• Canvas• WebSocket

7

X Window System

• 一種以點陣圖方式顯示軟體的顯示系統• 標準化軟體工具套件及顯示架構的運作協

定• 主從式架構– X Server– X Client– X Protocol

• 以網路為溝通的管道

8

X Window System

9

X Window System

Keyboard Mouse Screen

X Server

X Client X Client

Network

X Client

X Client

Local Machine

Remote Machine

10

X Protocol

• X 視窗系統的基礎協議• 透過網路傳送四種類型的封包– Request : original 127 個， extension 27 個– Reply– Event– Error

11

Canvas

• HTML 5 定義之新元素• 可視為一塊畫布• 透過 JavaScript 實現網頁繪圖功能• CanvasRenderingContext2D 提供繪圖 API• toDataURL()– 傳回以 data: 為首碼的 base 64 編碼表示的圖像

資料

12

WebSocket

• 一種 browser 與 server 之間的通訊協定• 透過 handshaking ，雙方建立一個快速通道，

實現雙方通訊• 傳統方式 : Client Pull• 傳統實現 client server 同步方法– Polling– Comet – 改良式 Comet - Long Polling

13

傳統方式比較• Client Pull– 由瀏覽器發出 HTTP Request ，伺服器返回最新

資料– 伺服器不主動傳送資料至瀏覽器

• Scenario : 網頁即時通訊

Network

Client A Client B

Network

Server

Message Message

14

Polling

• Polling– Client 固定時間發出 Request 向 Server 要求更

新資料

Network

Client A Client B

Network

Server

Message Message

Request

Message

15

Comet

• Comet– Server 端的 Polling– 永不中止的連線

Network

Client A Client B

Network

Server

Message Message

前次 Request

Polling

16

Long Polling

• Long Polling– 改良 comet– Client 發出一個較長時間等待之 Request ，當

Server 有資料回應，中斷連線並重新發送 Request

Network

Client A Client B

Network

Server

Message Message

前次 Request

Polling

下次 Request

Polling

17

WebSocket

• WebSocket– 以新的通訊協議，讓 client 與 Server 建立雙

向通道– 省去 Client Request ， Server Reply 造成的

overhead– 可隨時互相傳遞訊息

Network

Client A Client B

Network

Server

Message Message

18

系統架構• 原有系統架構

Client Side

Browser

HTML

JavaScript

Server Side

Application Launcher

X Agent X Agent X Agent

X Agent Manager

……

Web Server

Virtual X Server

Request MonitorProcess

Screen CaptureProcess

User Input HandleProcess

Screen UpdateProcess

X Agent

需要修改

19

系統架構

Client Side

Browser

HTML5

JavaScript

Server Side

Application Launcher

X Agent Manager

……

Web Server

Input process

Virtual X Server

Virtual X Server

Input process

Virtual X Server

Input process

20

系統架構

Browser

HTML

JavaScript

HTTPWeb

ServerX ServerXML-RPC

User Input Process

Input event

Browser

HTML5

JavaScript

WebSocketWeb

ServerX Server

WebSocket Server

User Input Process

Input event

CommandCommand Queue

21

系統架構• Virtual X Server– 修改 X server 使其能將繪圖 Command 送出至

WebSocket Server

• 畫面呈現頁面– 具有解析繪圖 Command 能力– 實作一 library 對應每個繪圖 Command– 以 WebSocket 與 Server 溝通

22

結論• 藉由分析 X Protocol 了解應用程式畫面的

組成，將畫面組成元件傳送至瀏覽器，重現應用程式畫面

• 降低網路傳輸流量並減少延遲性• 未來可以針對應用程式特性，發展出不同

呈現機制

23

參考資料• X 視窗系統

– http://zh.wikipedia.org/wiki/X_Window%E7%B3%BB%E7%B5%B1

• X Window 核心協議– http://zh.wikipedia.org/wiki/X_Window%E6%A0%B8%E5%BF

%83%E5%8D%94%E8%AD%B0

• Browser 與 Server 持續同步的作法介紹– http://www.josephj.com/entry.php?id=358

• Canvas– http://zh.wikipedia.org/wiki/Canvas_%28HTML

%E5%85%83%E7%B4%A0%29

• WebSocket– http://zh.wikipedia.org/wiki/WebSocket

• X 視窗應用程式分享系統之設計與實作