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

1. 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現基於X視窗系統使用HTML5實現遠端應用程式畫面呈現 Advisor : Jing Chen Reporter : 林建宏 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通訊機制 Screen Update Request Screen Update Response 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

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

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

9. 系統設計 • 此系統架構於Web Operating System for Embedded System之上 • 新增WebSocket Server元件，用於客戶端瀏覽器與伺服器溝通 • 修改XWindow Server，重新封裝繪圖請求，並傳送至客戶端瀏覽器 • 實現繪圖函示庫，用於客戶端瀏覽器解析繪圖請求與繪圖 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

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

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

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

13. 系統啟動連線流程 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

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

15. 系統實作 • 觀察X Server與X Client通訊，分析X Protocol • 使用xscope工具，監看X Server與X Client通訊 • 修改X Server，使其有重新封裝繪圖請求與傳送繪圖請求至WebSocket Server功能 • 設立攔截點，將繪圖資訊重新封裝 • 建立X Server與WebSocketServer連線 • 使用Socket建立TCP/IP連線 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

16. 系統實作 • 建立瀏覽器與WebSocketServer連線 • 使用HTML5 WebSocket通訊機制 • 實現繪圖函示庫，使瀏覽器有繪製應用程式畫面功能 • 使用網頁語言JavaScript與HTML5 Canvas元素 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

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

18. 伺服器端實作 • XProtocol • 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 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

21. 伺服器端實作 • Extension Request • Render Request • Picture物件:與特定Drawable資源結合，可做圖像像素的操作 基於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之畫布，繪製於其上 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

25. 繪圖請求傳送 ID match Drawing Request Process function Drawing Request WebSocket 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

26. 結論 • 此研究實作一遠端應用程式畫面呈現機制 • 使用瀏覽器為平台 • 以傳送繪圖命令方式達到畫面更新 • 以WebSocket作為客戶端與伺服器溝通機制 • 此研究完成 • 讓X應用程式具有跨平台特性 • 減少網路傳輸資料量 • 降低畫面延遲性 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

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

28. 初步成果-xterm 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

29. 初步成果-xcalc 基於X視窗系統使用HTML5實現遠端應用程式畫面呈現