Transcript 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

基於X視窗系統使用HTML5實現
遠端應用程式畫面呈現
Advisor : Jing Chen
Reporter : 林建宏
Date : 2012/04/25
大綱
• 簡介
– 動機
– 目標
– 研究方法
• 系統設計與架構
• 系統實作
– 伺服器端
– 客戶端
• 結論
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
2
簡介
• 網際網路技術成熟，行動裝置普及，雲端
運算概念興起
• Thin-Client架構
• 議題
– 客戶端呈現平台
– 客戶端與伺服器端溝通機制
– 伺服器端畫面擷取機制
– 客戶端畫面呈現機制
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
3
動機
• 最快速直覺呈現畫面方式
– 伺服器端截圖傳送圖片，客戶端顯示圖片
• 現有Thin-Client系統大部分以圖片方式顯示
畫面
• 此種方式缺點
– 網路頻寬消耗大
– 不必要的網路頻寬消耗
– 在行動網路上效率極差
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
4
動機
• 現有Thin-Client系統使用者需另外安裝客戶
端軟體
– 不同作業系統需安裝不同版本客戶端軟體
• 以瀏覽器為平台需要安裝外掛程式
– 傳統http通訊機制為Client-Pull，非即時性
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
5
Client-Pull通訊機制
Screen Update Request
Network
Client A
Server
Screen Update Response
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
6
目標
•
•
•
•
•
應用程式以瀏覽器為平台，具跨平台特性
改善瀏覽器與伺服器通訊，具即時性
減少應用程式畫面更新網路資料傳輸量
降低應用程式畫面延遲性
在行動裝置上有流暢的畫面呈現
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
7
研究方法
• 分析X視窗應用程式畫面組成，傳送繪圖請
求更新畫面
• 以HTML5 WebSocket協議實現客戶端瀏覽
器與伺服器通訊
• 以HTML5 canvas元素呈現遠端應用程式畫
面
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
8
系統設計
• 此系統架構於Web Operating System for
Embedded System之上
• 新增WebSocket Server元件，用於客戶端瀏
覽器與伺服器溝通
• 修改X Window Server，重新封裝繪圖請求，
並傳送至客戶端瀏覽器
• 實現繪圖函示庫，用於客戶端瀏覽器解析
繪圖請求與繪圖
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
9
系統元件
WebSocket
Server
Network
Client Browser
Web
Server
Display
Processes
Audio
Processes
Server
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
10
Video Processes
A pplication
L auncher
X S erver
Input
P rocess
D isplay P rocesses
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
11
系統架構
Server Side
Client Side
Browser
HTML5
JavaScript
X Server
X Server
……
X Server
X Server Manager
Application
Input process
Launcher
Web & WebSocket Server
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
12
系統啟動連線流程
Browser
1. Get Web Page
HTML5
2. Response
JavaScript
3. Connect
Web
Server
WebSocket
Server
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
X Server
4. Connect
13
運作流程
Canvas
Drawing
Library
Input Process
Grab
User
Input
Function
WebSocket
Server
X Server
WebSocket
Browser
Server
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
14
系統實作
1. 觀察X Server與X Client通訊，分析X
Protocol
 使用xscope工具，監看X Server與X Client通訊
2. 修改X Server，使其有重新封裝繪圖請求
與傳送繪圖請求至WebSocket Server功能
 設立攔截點，將繪圖資訊重新封裝
3. 建立X Server與WebSocket Server連線
 使用Socket建立TCP/IP連線
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
15
系統實作
4. 建立瀏覽器與WebSocket Server連線
使用HTML5 WebSocket 通訊機制
5. 實現繪圖函示庫，使瀏覽器有繪製應用程
式畫面功能
使用網頁語言JavaScript與HTML5 Canvas元素
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
16
攔截點
Application
(X Window Client)
DIX Layer
DDX Layer
X Window Server
Hardware
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
17
伺服器端實作
• X Protocol
– Request
• 以一個位元組表示，原始請求共127種，其他為擴充
請求
– Reply
– Error
– Event
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
18
伺服器端實作
• X Server
– 每項資源有唯一識別碼
– Drawable資源:Window和Pixmap
– Window:mapped 和 unmapped，在螢幕上呈現的
為mapped window
– Pixmap:存放在螢幕顯示記憶體以外的位置
– Graphic Context:繪圖資訊
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
19
伺服器端實作
•
•
•
•
OP
針對X Server16個基本繪圖函式攔截
判斷繪圖請求drawable為window或pixmap
重新封裝繪圖請求
傳送至WebSocket Server
Length
Drawable ID
Graphic Context
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
Drawing
Information
20
伺服器端實作
• Extension Request
– Render Request
• Picture物件:與特定Drawable資源結合，可做圖像像
素的操作
Major
OP
Minor
OP
Length
Drawable ID
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
Drawing Information
21
客戶端實作
• Parse Request
– 由於伺服器端可能短時間產生大量請求，客戶
端會收到一連串請求串接在一起，需要將一連
串請求分開為許多單一請求，將單一請求存入
已定義好之資料型態，方便操作
• Request Process function
– 實作不同功能之Request Process function，解析
完封包之後，根據請求類型，呼叫對應之處理
函式
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
22
客戶端實作
• 在伺服器端，X Server可能對隱藏在記憶體
中的Pixmap繪圖，之後再以CopyArea的方
式複製圖像至螢幕視窗顯示
• 在客戶端必須有隱藏的畫布，在收到
CopyArea請求之後，再將畫布顯示至螢幕
視窗顯示
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
23
客戶端實作
• 隱藏畫布之資料結構
– Used欄位用來表示此畫布是否已被使用
– Pixmap ID和Picture ID讓畫布可被識別
– Canvas Object為畫布
Used
Pixmap ID
Picture ID
Canvas Object
• 繪製圖像之前必須檢查Drawable ID為
Window或Pixmap
– Window:直接繪製於螢幕上
– Pixmap:尋找或建立對應ID之畫布，繪製於其上
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
24
繪圖請求傳送
ID match
Drawing
Drawing
Request
Request Process function
Drawing
Request
Drawing
Request
Drawing
Request
WebSocket
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
25
結論
• 此研究實作一遠端應用程式畫面呈現機制
– 使用瀏覽器為平台
– 以傳送繪圖命令方式達到畫面更新
– 以WebSocket作為客戶端與伺服器溝通機制
• 此研究完成
– 讓X應用程式具有跨平台特性
– 減少網路傳輸資料量
– 降低畫面延遲性
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
26
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
27
初步成果-xterm
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
28
初步成果-xcalc
基於X視窗系統使用HTML5實現遠端應
用程式畫面呈現
29