基於 x 視窗系統使用 html5 實現遠端應用程式畫面呈現

基於X視窗系統使用HTML5實現遠端應用程式畫面呈現Advisor : Jing ChenReporter : 林建宏Date : 2012/04/25

2

大綱• 簡介– 動機– 目標– 研究方法

• 系統設計與架構• 系統實作– 伺服器端– 客戶端

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

3

簡介• 網際網路技術成熟，行動裝置普及，雲端運算概念興起• Thin-Client 架構• 議題– 客戶端呈現平台– 客戶端與伺服器端溝通機制– 伺服器端畫面擷取機制– 客戶端畫面呈現機制

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

4

動機• 最快速直覺呈現畫面方式– 伺服器端截圖傳送圖片，客戶端顯示圖片

• 現有 Thin-Client 系統大部分以圖片方式顯示畫面• 此種方式缺點– 網路頻寬消耗大– 不必要的網路頻寬消耗– 在行動網路上效率極差


5

動機• 現有 Thin-Client 系統使用者需另外安裝客戶端軟體– 不同作業系統需安裝不同版本客戶端軟體

• 以瀏覽器為平台需要安裝外掛程式– 傳統 http 通訊機制為 Client-Pull ，非即時性


6

Client-Pull 通訊機制

Network

Client A Server

Screen Update Request

Screen Update Response


7

目標• 應用程式以瀏覽器為平台，具跨平台特性• 改善瀏覽器與伺服器通訊，具即時性• 減少應用程式畫面更新網路資料傳輸量• 降低應用程式畫面延遲性• 在行動裝置上有流暢的畫面呈現


8

研究方法• 分析 X 視窗應用程式畫面組成，傳送繪圖請求更新畫面• 以 HTML5 WebSocket 協議實現客戶端瀏覽器與伺服器通訊• 以 HTML5 canvas 元素呈現遠端應用程式畫面


9

系統設計• 此系統架構於 Web Operating System for

Embedded System 之上• 新增 WebSocket Server 元件，用於客戶端瀏覽器與伺服器溝通• 修改 X Window Server ，重新封裝繪圖請求，並傳送至客戶端瀏覽器• 實現繪圖函示庫，用於客戶端瀏覽器解析繪圖請求與繪圖


10

系統元件


WebServer

DisplayProcesses

Client BrowserAudio

Processes

WebSocket Server

Network

Server

11

Video Processes


InputProcess

ApplicationLauncher

X Server

Display Processes

12

系統架構Client Side

Browser

HTML5

JavaScript

Server Side

Application Launcher

X Server Manager

……

Web & WebSocket Server

X Server

Input process

X Server X Server


13

系統啟動連線流程

Browser

HTML5

JavaScript

Web Server

X Server

4. Connect

3. Connect WebSocket Server

1. Get Web Page

2. Response


14

運作流程

Drawing Library

Canvas

WebSocket

WebSocketServer

Input Process

X Server

GrabUser Input

Function

Browser

Server


15

系統實作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 連線


16

系統實作4. 建立瀏覽器與 WebSocket Server 連線

使用 HTML5 WebSocket 通訊機制5. 實現繪圖函示庫，使瀏覽器有繪製應用程式畫面功能

使用網頁語言 JavaScript 與 HTML5 Canvas 元素


17

攔截點

Hardware

DIX Layer

DDX Layer

X Window Server

Application(X Window Client)


18

伺服器端實作• X Protocol– Request• 以一個位元組表示，原始請求共 127 種，其他為擴充請求

– Reply– Error– Event


19

伺服器端實作• X Server– 每項資源有唯一識別碼– Drawable 資源 :Window 和 Pixmap–Window:mapped 和 unmapped ，在螢幕上呈現的為 mapped window– Pixmap: 存放在螢幕顯示記憶體以外的位置– Graphic Context: 繪圖資訊


20

伺服器端實作• 針對 X Server16 個基本繪圖函式攔截• 判斷繪圖請求 drawable 為 window 或

pixmap• 重新封裝繪圖請求• 傳送至 WebSocket Server

OP Length Drawable ID Graphic Context Drawing Information


21

伺服器端實作• Extension Request– Render Request• Picture 物件 : 與特定 Drawable 資源結合，可做圖像像素的操作

MajorOP

MinorOP

Length Drawable ID Drawing Information


22

客戶端實作• Parse Request– 由於伺服器端可能短時間產生大量請求，客戶端會收到一連串請求串接在一起，需要將一連串請求分開為許多單一請求，將單一請求存入已定義好之資料型態，方便操作

• Request Process function– 實作不同功能之 Request Process function ，解析完封包之後，根據請求類型，呼叫對應之處理函式


23

客戶端實作• 在伺服器端， X Server 可能對隱藏在記憶體中的 Pixmap 繪圖，之後再以 CopyArea的方式複製圖像至螢幕視窗顯示• 在客戶端必須有隱藏的畫布，在收到

CopyArea 請求之後，再將畫布顯示至螢幕視窗顯示


24

客戶端實作• 隱藏畫布之資料結構– Used欄位用來表示此畫布是否已被使用– Pixmap ID 和 Picture ID讓畫布可被識別– Canvas Object 為畫布

• 繪製圖像之前必須檢查 Drawable ID 為Window 或 Pixmap–Window: 直接繪製於螢幕上– Pixmap:尋找或建立對應 ID 之畫布，繪製於其上

Used

Pixmap ID

Picture ID

Canvas Object


25

繪圖請求傳送

Drawing Request

Drawing Request

Drawing Request

Drawing Request

ID matchDrawing

WebSocket

Request Process function


26

結論• 此研究實作一遠端應用程式畫面呈現機制– 使用瀏覽器為平台– 以傳送繪圖命令方式達到畫面更新– 以 WebSocket 作為客戶端與伺服器溝通機制

• 此研究完成–讓 X 應用程式具有跨平台特性– 減少網路傳輸資料量– 降低畫面延遲性


27

Q & A


28

初步成果 -xterm


29

初步成果 -xcalc


基於 x 視窗系統使用 html5 實現遠端應用程式畫面呈現

Documents