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