x html5
Download
Skip this Video
Download Presentation
基於 X 視窗系統使用 HTML5 實現遠端應用程式畫面呈現

Loading in 2 Seconds...

play fullscreen
1 / 29

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


  • 128 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 基於 X 視窗系統使用 HTML5 實現遠端應用程式畫面呈現' - finn


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實現遠端應用程式畫面呈現基於X視窗系統使用HTML5實現遠端應用程式畫面呈現

Advisor : Jing Chen

Reporter : 林建宏

Date : 2012/04/25

slide2
大綱
  • 簡介
    • 動機
    • 目標
    • 研究方法
  • 系統設計與架構
  • 系統實作
    • 伺服器端
    • 客戶端
  • 結論

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

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

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

slide4
動機
  • 最快速直覺呈現畫面方式
    • 伺服器端截圖傳送圖片,客戶端顯示圖片
  • 現有Thin-Client系統大部分以圖片方式顯示畫面
  • 此種方式缺點
    • 網路頻寬消耗大
    • 不必要的網路頻寬消耗
    • 在行動網路上效率極差

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

slide5
動機
  • 現有Thin-Client系統使用者需另外安裝客戶端軟體
    • 不同作業系統需安裝不同版本客戶端軟體
  • 以瀏覽器為平台需要安裝外掛程式
    • 傳統http通訊機制為Client-Pull,非即時性

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

client pull
Client-Pull通訊機制

Screen Update Request

Screen Update Response

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

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

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

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

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

slide9
系統設計
  • 此系統架構於Web Operating System for Embedded System之上
  • 新增WebSocket Server元件,用於客戶端瀏覽器與伺服器溝通
  • 修改XWindow Server,重新封裝繪圖請求,並傳送至客戶端瀏覽器
  • 實現繪圖函示庫,用於客戶端瀏覽器解析繪圖請求與繪圖

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

slide10
系統元件

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

video processes
Video Processes

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

slide12
系統架構

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

slide13
系統啟動連線流程

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

slide14
運作流程

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

slide15
系統實作
  • 觀察X Server與X Client通訊,分析X Protocol
    • 使用xscope工具,監看X Server與X Client通訊
  • 修改X Server,使其有重新封裝繪圖請求與傳送繪圖請求至WebSocket Server功能
    • 設立攔截點,將繪圖資訊重新封裝
  • 建立X Server與WebSocketServer連線
    • 使用Socket建立TCP/IP連線

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

slide16
系統實作
  • 建立瀏覽器與WebSocketServer連線
    • 使用HTML5 WebSocket通訊機制
  • 實現繪圖函示庫,使瀏覽器有繪製應用程式畫面功能
    • 使用網頁語言JavaScript與HTML5 Canvas元素

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

slide17
攔截點

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

slide18
伺服器端實作
  • XProtocol
    • Request
      • 以一個位元組表示,原始請求共127種,其他為擴充請求
    • Reply
    • Error
    • Event

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

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

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

slide20
伺服器端實作
  • 針對X Server16個基本繪圖函式攔截
  • 判斷繪圖請求drawable為window或pixmap
  • 重新封裝繪圖請求
  • 傳送至WebSocket Server

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

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

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

slide22
客戶端實作
  • Parse Request
    • 由於伺服器端可能短時間產生大量請求,客戶端會收到一連串請求串接在一起,需要將一連串請求分開為許多單一請求,將單一請求存入已定義好之資料型態,方便操作
  • Request Process function
    • 實作不同功能之Request Process function,解析完封包之後,根據請求類型,呼叫對應之處理函式

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

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

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

slide24
客戶端實作
  • 隱藏畫布之資料結構
    • Used欄位用來表示此畫布是否已被使用
    • Pixmap ID和Picture ID讓畫布可被識別
    • Canvas Object為畫布
  • 繪製圖像之前必須檢查Drawable ID為Window或Pixmap
    • Window:直接繪製於螢幕上
    • Pixmap:尋找或建立對應ID之畫布,繪製於其上

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

slide25
繪圖請求傳送

ID match

Drawing

Request Process function

Drawing Request

WebSocket

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

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

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

slide27

Q&A

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

xterm
初步成果-xterm

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

xcalc
初步成果-xcalc

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

ad