X html5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 29

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


  • 101 Views
  • Uploaded on
  • Presentation posted in: General

基於 X 視窗系統使用 HTML5 實現遠端應用程式畫面呈現. Advisor : Jing Chen Reporter : 林建宏 Date : 2012/04/25. 大綱. 簡介 動機 目標 研究方法 系統設計與 架構 系統實 作 伺服器 端 客戶端 結論. 簡介. 網際網路技術成熟,行動裝置普及,雲端運算概念興起 Thin-Client 架構 議題 客戶端呈現平台 客戶端 與伺服器端溝通機制 伺服器 端畫面擷取機制 客戶 端畫面呈現機制. 動機. 最快速直覺呈現畫面方式 伺服器端截圖傳送圖片,客戶端顯示圖片

Download Presentation

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

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


X html5

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

Advisor : Jing Chen

Reporter : 林建宏

Date : 2012/04/25


X html5

大綱

  • 簡介

    • 動機

    • 目標

    • 研究方法

  • 系統設計與架構

  • 系統實作

    • 伺服器端

    • 客戶端

  • 結論

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


X html5

簡介

  • 網際網路技術成熟,行動裝置普及,雲端運算概念興起

  • Thin-Client架構

  • 議題

    • 客戶端呈現平台

    • 客戶端與伺服器端溝通機制

    • 伺服器端畫面擷取機制

    • 客戶端畫面呈現機制

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


X html5

動機

  • 最快速直覺呈現畫面方式

    • 伺服器端截圖傳送圖片,客戶端顯示圖片

  • 現有Thin-Client系統大部分以圖片方式顯示畫面

  • 此種方式缺點

    • 網路頻寬消耗大

    • 不必要的網路頻寬消耗

    • 在行動網路上效率極差

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


X html5

動機

  • 現有Thin-Client系統使用者需另外安裝客戶端軟體

    • 不同作業系統需安裝不同版本客戶端軟體

  • 以瀏覽器為平台需要安裝外掛程式

    • 傳統http通訊機制為Client-Pull,非即時性

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


Client pull

Client-Pull通訊機制

Screen Update Request

Screen Update Response

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


X html5

目標

  • 應用程式以瀏覽器為平台,具跨平台特性

  • 改善瀏覽器與伺服器通訊,具即時性

  • 減少應用程式畫面更新網路資料傳輸量

  • 降低應用程式畫面延遲性

  • 在行動裝置上有流暢的畫面呈現

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


X html5

研究方法

  • 分析X視窗應用程式畫面組成,傳送繪圖請求更新畫面

  • 以HTML5WebSocket協議實現客戶端瀏覽器與伺服器通訊

  • 以HTML5canvas元素呈現遠端應用程式畫面

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


X html5

系統設計

  • 此系統架構於Web Operating System for Embedded System之上

  • 新增WebSocket Server元件,用於客戶端瀏覽器與伺服器溝通

  • 修改XWindow Server,重新封裝繪圖請求,並傳送至客戶端瀏覽器

  • 實現繪圖函示庫,用於客戶端瀏覽器解析繪圖請求與繪圖

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


X html5

系統元件

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


Video processes

Video Processes

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


X html5

系統架構

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


X html5

系統啟動連線流程

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


X html5

運作流程

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


X html5

系統實作

  • 觀察X Server與X Client通訊,分析X Protocol

    • 使用xscope工具,監看X Server與X Client通訊

  • 修改X Server,使其有重新封裝繪圖請求與傳送繪圖請求至WebSocket Server功能

    • 設立攔截點,將繪圖資訊重新封裝

  • 建立X Server與WebSocketServer連線

    • 使用Socket建立TCP/IP連線

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


X html5

系統實作

  • 建立瀏覽器與WebSocketServer連線

    • 使用HTML5 WebSocket通訊機制

  • 實現繪圖函示庫,使瀏覽器有繪製應用程式畫面功能

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

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


X html5

攔截點

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


X html5

伺服器端實作

  • XProtocol

    • Request

      • 以一個位元組表示,原始請求共127種,其他為擴充請求

    • Reply

    • Error

    • Event

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


X html5

伺服器端實作

  • X Server

    • 每項資源有唯一識別碼

    • Drawable資源:Window和Pixmap

    • Window:mapped和 unmapped,在螢幕上呈現的為mapped window

    • Pixmap:存放在螢幕顯示記憶體以外的位置

    • Graphic Context:繪圖資訊

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


X html5

伺服器端實作

  • 針對X Server16個基本繪圖函式攔截

  • 判斷繪圖請求drawable為window或pixmap

  • 重新封裝繪圖請求

  • 傳送至WebSocket Server

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


X html5

伺服器端實作

  • Extension Request

    • Render Request

      • Picture物件:與特定Drawable資源結合,可做圖像像素的操作

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


X html5

客戶端實作

  • Parse Request

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

  • Request Process function

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

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


X html5

客戶端實作

  • 在伺服器端,X Server可能對隱藏在記憶體中的Pixmap繪圖,之後再以CopyArea的方式複製圖像至螢幕視窗顯示

  • 在客戶端必須有隱藏的畫布,在收到CopyArea請求之後,再將畫布顯示至螢幕視窗顯示

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


X html5

客戶端實作

  • 隱藏畫布之資料結構

    • Used欄位用來表示此畫布是否已被使用

    • Pixmap ID和Picture ID讓畫布可被識別

    • Canvas Object為畫布

  • 繪製圖像之前必須檢查Drawable ID為Window或Pixmap

    • Window:直接繪製於螢幕上

    • Pixmap:尋找或建立對應ID之畫布,繪製於其上

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


X html5

繪圖請求傳送

ID match

Drawing

Request Process function

Drawing Request

WebSocket

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


X html5

結論

  • 此研究實作一遠端應用程式畫面呈現機制

    • 使用瀏覽器為平台

    • 以傳送繪圖命令方式達到畫面更新

    • 以WebSocket作為客戶端與伺服器溝通機制

  • 此研究完成

    • 讓X應用程式具有跨平台特性

    • 減少網路傳輸資料量

    • 降低畫面延遲性

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


X html5

Q&A

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


Xterm

初步成果-xterm

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


Xcalc

初步成果-xcalc

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


  • Login