雲端服務視訊互助平台之網站架構研究

(1)

1

第

第 1

11 1 章

章

前言

1.1 1.1 1.1 1.1 研究動機研究動機研究動機研究動機當使用者遇到物品毀損或故障無法自行排除時，通常會選擇透過電話與工程師聯繫，希望藉由其指導來對物品進行故障的排除。但有時因為使用者對於物品資訊的不夠了解，或是言語上的表達不清而造成這種僅以電話教學的維修效果不佳，往往最後只能依靠使用者將物品寄送給技術員或是派遣工程師至現場處理，這種處理法不論是使用者或廠商都需額外花費交通運輸、物品寄送等維修成本，不但增加維修費用也不節能減碳。若初期使用者能與工程師進行視訊連線，將維修物品資訊透過影像與聲音傳遞給遠端工程師，而遠端的工程師也能利用一些畫面標誌系統協助使用者進行物品維修，這種結合影像與聲音、標誌形式的維修指引，絕對比單純依靠電話聲音之維修指導方法好太多了，即使使用者無法透過此類的引導自行排除故障，遠端的工程師也能透過影像的傳遞先行對維修物品有個初步的了解，先做充分準備再到現場檢修，而不再需要攜帶一些不必要之工具到現場。目前一提到視訊連線軟體往往會聯想到視訊會議、遠距教學等影音應用軟體，但這些軟體的設計出發點皆是以“會議”、“聊天”、“課程教學”等主軸進行軟體設計，要以此類軟體應用在“維修教學”層面尚嫌不足，更重要的是這些軟體對於連線時的影像記錄很少會進行保存，因為這些軟體應用範疇主要建議以聊天、會議等為主，所以記錄的保值性就沒這麼高，但以維修教學方面來看，每次維修連線記錄都是相當重要的，如修理發生錯誤的責任歸屬，或維修檢討等都相當有保存的必要。基於這樣的動機希望能建立一個以互助教學為出發點的雲端服務視訊互助平台，此平台主要提供兩大功能:一則是提供使用者能透過影像、聲音、文字與遠端協助者進行連線，並能在連線時使用畫面標誌系統協助教學引導，對於連線時所產生之影音畫面、畫面標誌、文字對話皆會記錄保存，二則是協助使用者找尋適當的協助對象，所有想尋求協助或想幫忙他人的使用者皆可透過此平台進行配對。

(2)

2 1.2 1.2 1.2 1.2 研究方法研究方法研究方法研究方法本論文主要著重在平台中網頁伺服器(Web Server)的設計，探討在視訊連線中網頁伺服器該如何與影音伺服器(Media Server)[1]和訊息傳遞伺服器(MSG Server)[2]溝通協調，針對互助教學此服務主軸，網頁伺服器該提供哪些合適的輔助功能，讓使用者能便利的進行連線與找到適當的協助對象，並將此設計實際製作一套網頁程式用以操作使用。 1.3 1.3 1.3 1.3 章節安排章節安排章節安排章節安排第 2 章會先介紹目前現有視訊連線網站中，網頁伺服器所提供的功能並比較其功能差異，第 3 章則介紹雲端服務視訊互助平台的設計理念及主要架構，並針對網頁伺服器說明在互助平台中所扮演的角色與功能目的，第 3.2 節開始針對網頁伺服器所提供的功能加以敘述其設計原理，分別介紹網頁伺服器對影音伺服器與訊息傳遞伺服器的互動方式，並完整說明視訊連線的功能設計，第 4 章則說明在互助教學層面上，網頁伺服器提供了哪些操作功能讓使用者能方便使用，最後則對整個互助平台與網頁伺服器進行相關測試，第 5 章則以網頁伺服器部分做結論與未來展望。

第

第 2

22 2 章

章

第

第 3

33 3 章

章

系統架構與設計

3.1 3.1 3.1 3.1 雲端服務視訊互助平台設計理念雲端服務視訊互助平台設計理念雲端服務視訊互助平台設計理念雲端服務視訊互助平台設計理念本平台是一個以互助為設計出發點的連線平台，當使用者有任何想維修的物品或想解決的難題時，可至本平台搜尋過往紀錄尋求解決範本，或是以張貼文章的形式請求其他使用者進行協助教學，而其他使用者若是有意協助幫忙則可以文字、影音、圖片等多媒體的形式解答，或是直接邀請發問者進行視訊連線，利用即時影音傳送與標誌輔助系統進行引導協助，對於視訊連線過後的影像紀錄，持有者也可後製編輯，供其他使用者觀摩學習。在此平台中每位使用者都可是解決他人疑問的協助者或是發問請求者，透過此互助平台使用者將可以多元的形式尋求合適的引導教學。基於本平台提供的功能性，若全部透過客戶端之軟體作為使用的平台介面，使用者在操作上勢必有諸多不便，如過往紀錄查詢或尋找連線對象等，所以在操作介面上選以網頁作為操作平台，其次若是以網頁介面為入口將可降低使用者的入門門檻，使用者將不必理會平台相容之問題，只需能上網即可進行操作使用。

(5)

5 3.1.1 3.1.1 3.1.1 3.1.1 雲端服務視訊互助平台介紹雲端服務視訊互助平台介紹雲端服務視訊互助平台介紹雲端服務視訊互助平台介紹本平台建構環境主要由三種伺服器所組成，包含網頁伺服器(Web Server)、訊息傳遞伺服器(MSG Server)及影音伺服器(Media Server)，每個伺服器皆有其功能與目的，以下將詳細說明: 網頁伺服器網頁伺服器網頁伺服器網頁伺服器作為入口平台使用，採用 Nginx[11]伺服器軟體搭配 PHP、JavaScript 做為網頁開發語言，使用 MySQL 資料庫管理記錄資訊，負責提供操作管理介面，並在視訊連線中扮演前導者的角色，當使用者欲進行連線時，負責聯繫訊息傳遞伺服器、影音伺服器進行運作。影音伺服器影音伺服器影音伺服器影音伺服器因為在視訊連線方面採用 Client-Server 架構，所以中央需要影音伺服器負責視訊連線時的影音傳遞，當使用者進行影音連線時主要由處在客戶端之 Flash 程式，對影音伺服器進行影音收發動作。影音伺服器除了影音接收傳遞外，也提供使用者播放影片記錄的服務。訊息傳遞伺服器訊息傳遞伺服器訊息傳遞伺服器訊息傳遞伺服器訊息傳遞伺服器主要提供訊息傳遞之功能，以自行開發之 Java 程式做為伺服器端的處理程式，透過網路接受來自使用者、網頁伺服器的訊息，並轉送到適當的目的地，並且在伺服器端記錄其歷程等資訊，以供後續觀看使用。 3.1.2 3.1.2 3.1.2 3.1.2 網頁伺服器網頁伺服器網頁伺服器介紹網頁伺服器介紹介紹介紹網頁伺服器的功能主要可區分為兩大區塊，一則是提供操作與管理介面讓使用者可直接瀏覽操作，並針對互助服務此主軸提供多項輔助功能，如記錄搜尋或尋找協助者等，此類型的功能大多由網頁伺服器搭配資料庫管理所完成。另一個功能則是在視訊連線部分，根據使用者所下達的連線指令進行處理轉換，通知影音伺服器與訊息傳遞伺服器執行對應之處理，所以在整個視訊連線中網頁伺服器主要負責觸發視訊連線、參數準備、結束連線等控管工作，對於資料庫的存取也是由網頁

(6)

6 伺服器所負責，所以當其他伺服器須對資料庫存取時，也須經由網頁伺服器代為操作。 3. 3. 3. 3.2222 網頁伺服器網頁伺服器網頁伺服器網頁伺服器設計設計設計設計此章節主要說明網頁伺服器在視訊連線與部分功能操作上之設計，3.2.1 節將先說明當使用者在網頁操作時，如何與網頁伺服器進行資訊的傳遞，並於 3.2.2 至 3.2.6 節說明透過此資訊傳遞方式所完成之功能設計，3.2.7 至 3.2.9 則說明網頁伺服器與影音伺服器和訊息傳遞伺服器之溝通方式，3.2.10 節則完整說明當使用者欲進行視訊連線時，網頁伺服器之對應處理。 3. 3. 3. 3.2222.1.1.1.1 網頁資料的更新網頁資料的更新網頁資料的更新方式網頁資料的更新方式方式方式當使用者在瀏覽網頁時是依據 HTTP 協定與網頁伺服器溝通，在此協定中採用的是 Client-Server 架構，溝通方向只能由 Client 端發送請求至 Server 端，Server 端再回傳資料，而不能從 Server 端主動送資料至 Client 端，因此在網頁程式中若客戶端欲取得伺服器端資料的異動，只能依靠客戶端主動詢問伺服器端。因為其傳輸方式之限制，資料的更新皆是透過客戶端定期對資料庫的查詢，得知資料之變化。例如兩位使用者使用網頁操作，使用者 A 欲傳遞訊息給使用者 B，則使用者 A 須將訊息寫入資料庫，再透過使用者 B 對資料庫的定期查詢，來得知使用者 A 所傳遞之訊息。

而這種定期查詢的方式就是 Polling(輪詢)，如圖 3-1(a)所示，不論 Server 端有無資料異動，Client 端仍需不斷發送更新查詢，以確保 Client 與 Server 端的資料同步一致。

(7)

7 (a) (b) 圖 3-1 (a)Polling 原理;(b)Long-Polling 原理。 3.2.1.1 3.2.1.1 3.2.1.1

3.2.1.1 LongLongLongLong----PollingPollingPollingPolling 介紹介紹介紹介紹

Long-Polling[12]相較於 Polling 最大的相異點，就是每次客戶端發送 request(更新要求)至伺服器端時，若伺服器端確實有資訊的更新則立刻回返資料，反之則在伺服器端進行短暫的休眠等待，再重新確認是否有資訊的變動，直至休眠次數超過限制仍無發現資料異動，則回返告知無變動的消息。因此客戶端送出的 request 之時間差並不再是一固定值，而是跟伺服器上資料是否有異動相關，只有在伺服器發現資料異動亦或上個 request 的休眠時間超過限制時，才會再送出下一個 request。 Long-Polling 核心原理如圖 3-1(b)所示，表 3-1 將比較當伺服器端資料未變動時，使用 Polling 與 Long-Polling 客戶端需發送的 request 數:

(8)

8 表 3-1 使用不同的 Polling 方法所需送出的最少 request 數 Polling Long-Polling 1 分鐘 12 次 1.9 次(最少每 31 秒送出一次) 1 小時 720 次 116.1 次註 1:Polling 定期每 5 秒對伺服器端發出 request 。註 2:Long-Polling 的 time-out 為 30 秒，資料回返後固定休眠 1 秒才發送下一次。當客戶端使用 Long-Polling 送出 request 時若伺服器端一直無資料的異動，會等待該 request 時間到期才會有資料的往返，因此在伺服器資料更新不頻繁時能有效降低發送的 request 個數，藉此有效降低網頁伺服器的負擔。在本網站平台中程式皆採取模組化，代表當使用者在網頁瀏覽、操作使用、資訊更新時，其實是對網頁伺服器中不同的 PHP 程式送出 request，再將其回應結果組合顯示，但由於瀏覽器本身都會有併發連結數限制，也可看作是同時可發送的 request 數，假設同時併發 request 的限制數為 5，代表送出 5 個 request 後，至少需一個資料往返才可送出下一個 request，表 3-2 為不同瀏覽器預設之併發連結數[13]。這樣的限制因數若客戶端全使用 Polling 對伺服器更新時，並不會有太大的影響，因為送出的 request 大多在毫秒以內就有回應，客戶端可立刻送出下一則 request。反之若客戶端全採用 Long-Polling 對伺服器發送更新時，使用者在操作使用上將產生嚴重的延遲與不便。表 3-2 不同瀏覽器所允許之同時併發連結數瀏覽器併發連結數限制 IE 6，7 2 IE 8 6 IE 9 6 Firefox 2 2 Firefox 3 6 Firefox 4 6 Safari 3，4 4 Chrome 12 6

(9)

9 因此除了在發送更新方式取得平衡比外， Long-Polling 也可透過以下兩種方式改善。一種是將 request 送往不同位置網域以突破瀏覽器對相同網域的連線數限制，第二種是把多個更新資訊合併，伺服器端的程式自行拆解判斷，用以減少發送的 request 數量，目前本網站平台則是交互使用此兩種解決法，以突破瀏覽器對 request 併發數的限制。 3. 3. 3. 3.2222.2.2.2.2 連線公佈欄設計連線公佈欄設計連線公佈欄設計連線公佈欄設計連線公佈欄是本平台的一項連線服務，提供使用者以公佈欄的型式張貼連線請求，任何有興趣協助指導的使用者，都可點擊其標題項目與對方快速配對連線。當使用者登入本網站平台後，網頁中便會顯示如圖 3-2 所示之公佈欄項目，製作原理主要經由 Long-Polling 形式的資料更新，與 PHP 中的 Session 資料保存技術所達成。Session 是一種保存資料的方法，有別於 Cookie 將資料存放在客戶端的瀏覽器上，而改成保存在伺服器端，以避免資料放在客戶端被使用者自行竄改的危險。圖 3-2 連線公佈欄顯示板塊此公佈欄的設計重點在於確保客戶端與伺服器端的資料同步一致，否則使用者將看到過期或是已撤銷的連線項目，所以使用 Long-Polling 技術對伺服器端更新公佈欄資訊，並且當有資訊更動需進行更新時，則先讀取 Session 判斷哪些資訊是使用者目前已

(10)

擁有的，只更新使用者不知道的部分更新原理。當客戶端完成公佈欄項目否與伺服器端所設定的數量一致持有的所有公佈欄資訊將重新進行更新 Client TIME 4. 8.比對連線公佈欄的資訊數量是否與伺服器端一致 9. 10 使用者不知道的部分，而不全部資訊重新傳送，圖圖 3-3 連線公佈欄更新原理公佈欄項目更新後，會再次確認目前所顯示的連線公佈欄請求數量是的數量一致，一旦發現數量不一致則判定為更新錯誤所有公佈欄資訊將重新進行更新。 Server 1.刷新頁面或第一次更新 3.完整傳送連線公佈欄資訊 2. 記錄的公佈欄資訊 4.請求公佈欄更新 5. 眠等待 6. 根據算出差值 7.差值更新 9.請求公佈欄更新圖3-3 則是連線公佈欄會再次確認目前所顯示的連線公佈欄請求數量是判定為更新錯誤，該使用者所 2.啟用 Session，記錄已傳給使用者的公佈欄資訊 5.無資料異動，休眠等待 6.偵測到資料異動根據Session 計算出差值

(11)

11 3.2.3 3.2.3 3.2.3 3.2.3 大廳討論室設計大廳討論室設計大廳討論室設計大廳討論室設計大廳討論室其功能性等同於網頁聊天室，所有加入同一個討論室的使用者，皆可利用文字即時與其他使用者對話討論，以下將說明討論室的運作原理: 發送文字訊息發送文字訊息發送文字訊息發送文字訊息:當使用者在討論室中送出對話訊息時，程式會將使用者所輸入的文字資訊給與一則數字編號，並將此編號、使用者帳號、文字內容寫入資料庫，此時便完成使用者發言處理，資料庫設計如表 3-3 所示，因為數字編號採取遞增方式給予，因此可確保數字號碼永不重複。表 3-3 在資料庫中用於儲存對話記錄的資料表格 index speaker Speak

… … … 500 Kane 請問如何修腳踏車? 501 Jessica 你的車有哪些問題先說來聽 502 James Jessica 她很會修腳踏車取得文字訊息取得文字訊息取得文字訊息取得文字訊息:當使用者加入討論室後程式便會定期向資料庫 Long-Polling 以取得對話訊息，因為每則對話記錄皆有相對應的數字編號，因此可透過對數字編號的異動查詢得知新對話記錄產生。為了防止使用者在短時間內快速發言，當使用者加入討論室時會初始化兩個計數器，計數器每秒會將數值自動做減 1 直到數值變為 0，其中一個稱為 speak 計數器，每當使用者發言時此計數器就會增加其數值，一但發現數值超過規定代表使用者在短時間內快速發言需做暫時禁言的處罰，另一個則是 cool down 計數器，當使用者發言時程式會先確認 cool down 計數器的數值是否為 0，一旦不為 0 代表使用者正被禁言，無法送出使用者的文字訊息。

(12)

12

註 1:空心條代表 speak 計數器之值，實心條表示 cool down 計數器之值圖 3-4 使用者頻繁發言時對計數器數值的影響

圖 3-4 則是使用者發言時 speak 與 cool down 計數器數值的變化，第 0 秒時計數器的數值皆為 0，從第 1 秒開始使用者每秒都進行發言，並且每發言一次 speak 計數器數值就自動加 5，直到大於或等於 25 就代表須被做禁言處罰。

因為計數器每秒會將數值自動做減 1，所以當第 6 秒時也就是使用者第 6 次發言時，程式偵測到 speak 計數器數值超過規定，所以須暫時禁言並將 cool down 計數器自動設為 30，代表使用者需等待 30 秒後才可恢復發言權，等到第 36 秒時兩計數器數值皆以歸 0，所以使用者將重新獲得發言權。 3.2. 3.2. 3.2. 3.2.4444 平台內部短信收發平台內部短信收發平台內部短信收發平台內部短信收發本平台除了提供討論室供使用者進行即時的文字溝通外，亦提供平台內部的短信收發功能，其功能操作如同一般的電子郵件，只是發送範圍限制在須為平台中之使用者，並僅支援文字訊息的傳遞，以下將說明如何實做短信收發功能: 表 3-4 資料庫中的 user 表格 index indexindex

index accountaccountaccountaccount MMMMsgsgsg sg name namenamename EEE-E---mailmailmail mail 1 Kane 0 … … 2 Jessica 0 … … 3 James 0 … … 5 0 0s 1s 2s 3s 4s 5s 6s 36s 25 30 0 21 17 0 13 0 9 0 0 0 0 0

(13)

13

表 3-5 資料庫中的 short_msg 表格 index

index index

index sendsendsendsend receivereceivereceivereceive head headheadhead contentcontentcontentcontent readread readread 1 Kane Jessica … … 0 2 James Jessica … …. 0 表 3-4 與表 3-5 則是資料庫中對於短信功能所做的欄位設計， short_msg 表格負責記錄所有短信資訊，user 表格則記錄使用者的個人資訊，其中 msg 欄位代表新進短信的通知。當使用者送出短信時，首先會在資料庫中的 short_msg 表格，新增此封短信的完整資訊，如寄件者、收信者、標題、內文等，並在 user 表格中將收件者的 msg 欄位更新為“1”，表示收件者有新進郵件尚未讀取。每位使用者則以 Long-Polling 查詢自己在 user 表格中的 msg 欄位是否有數值變動，一旦發現此欄位數值不為“0”代表有新進短信通知。只有在使用者讀取最新一封短信後才會將自己的 msg 欄位更新為“0”，否則將會持續通知有信件未讀。 3.2. 3.2. 3.2. 3.2.5555 外部信件寄送外部信件寄送外部信件寄送外部信件寄送相較於前一小節使用者間的內部短信收發，外部信件寄送則是由系統發信給使用者所指定的電子信箱的功能，系統會根據使用者所選擇的關鍵字，整理出 24 小時內在此關鍵字類別中所產生的新討論議題，並發送 E-mail 至使用者所指定的信箱中如 Gmail 或 Hotmail 等電子信箱。圖 3-5 則是外部信件寄送功能的處理流程，首先透過 Crontab 此排程管理程式，使系統能在固定時間觸發處理程式，處理程式的主要功能是整理各關鍵字類別在 24 小以內所產生的議題討論，並將其內容分別存放在各變數中，之後再取出每位使用者所設定的專長類別，依據其專長組合出要寄送的信件內容。當信件內容整理完畢後在透過 PHPMailer 此 PHP 外掛模組，利用 Google mail Server 當作信件的發送伺服器進行信件的寄送。

(14)

14 圖 3-5 外部信件寄送流程 3.2. 3.2. 3.2. 3.2.6666 使用者在線回報使用者在線回報使用者在線回報使用者在線回報此部分的功能設計在於偵測使用者是否已離開本網站平台，當使用者登入本網站平台後，程式將會定期向資料庫寫入時間資訊，以簽到表的方式確認使用者是否仍停留在網站平台上。透過此方式不論使用者離開本網站平台時，是強制關閉瀏覽器或前往其他網站，伺服器端都可依照資料庫中使用者回報時間，推算使用者是否仍在本網站平台中。 3. 3. 3. 3.22.22...7777 訊息傳遞伺服器訊息傳遞伺服器連接訊息傳遞伺服器訊息傳遞伺服器連接連接連接訊息傳遞伺服器在互助平台中主要負責訊息的溝通傳輸，主要原理可將訊息傳遞伺服器當作一間旅館、任何與訊息傳遞伺服器連結之程式皆可比喻成旅客、網頁伺服器則可視為導遊，旅館中有需多的房間且每間房間皆有不同的編號，旅客進入旅館後便會進到導遊所指定的房間，所有在同一個房間的旅客，只要有一人說話其他在此房間的旅客皆會收聽到，反之未進入房間或不在相同房間的旅客則無法聽到，當旅客離開時只需告知導遊即可，當導遊清點房間中旅客皆已離開時，在通知旅館回收房間。凌晨 12 點，觸發處理程式取出 24 小時內所產生的討論議題並依關鍵字進行分類依照每位使用者所設定的專長關鍵字，組合信件內容透過 PHPMailer 將信件寄送至每位使用者所指定的信箱完成

(15)

15 透過此旅館，不能互相對話溝通的旅客，皆可藉由進到旅館中相同房間以進行訊息傳遞，因為旅客進入旅館前會先向導遊詢問進入之房間編號，因此可確保旅客不會勿進房間導致訊息錯亂。 3. 3. 3. 3.22.22...8888 影音伺服器影音伺服器連影音伺服器影音伺服器連連連接接接接影音伺服器主要負責視訊連線時視訊傳輸的部分，當使用者在進行視訊連線時主要是透過網頁中由 Flash 撰寫的客戶端程式在處理運作，Flash 的功用除了收發來自影音伺服器的影音串流外，也提供畫面標註和影像切換等操作功能，當使用者在使用此程式時其實是下載至本地端在執行，但對使用者而言只是個在網頁中的物件，並不會有一般下載檔案的動作出現。

當 Flash 程式在收發影音伺服器的影音串流時，主要是依據 Video Code 進行識別， Video Code 是當使用者提出連線請求時，由 PHP 程式以使用者帳號、時間、特定字串為參數以 MD5 編碼，產生的 32bit 數字與英文混合字串，由於編碼時加入時間參數所以確保每則 Video Code 皆不會相同。

所以對於同屬於一個連線活動的使用者，他們皆會有一組相同的 Video Code，透過此 Video Code 客戶端的 Flash 程式才可接收或發佈在正確的資料流上，而不會與其他正在視訊連線的活動發生影音錯亂的情況。因為當影像發佈至影音伺服器時同時也會在伺服器端進行保存，所以當使用者連線結束後也是依據 Video Code 取出連線時的影像紀錄檔。 3.2. 3.2. 3.2.

3.2.8888.1 .1 .1 .1 AMFPHPAMFPHPAMFPHPAMFPHP

在視訊連線中影音伺服器僅提供影音收發動作，若 Flash 想進行影音收發外的動作就得呼叫網頁伺服器端的 PHP 程式來完成，而 AMFPHP 就是一種 Flash 與 PHP 的溝通管道，其中 AMF(Action Message Format)[14]代表一種二進制的資料型態，當 Flash 傳送 Object， Array， Date， XML 等資料格式至伺服器端時，Flash 程式會將其轉換成 AMF 格式，由網頁伺服器端的 AMFPHP 進行資料解析轉換，並傳遞給正確的 PHP 程式運作，

(16)

16 執行完畢後將結果返還給 Flash 程式。透過此溝通管道，客戶端的 Flash 程式得以知道中央主機時間或進行影像縮圖傳送等動作。 3. 3. 3. 3.2222....9999 伺服器伺服器伺服器伺服器間的溝通間的溝通間的溝通間的溝通圖 3-6 則是各伺服器間的溝通方式，當使用者在影音連線時，處在客戶端的 Flash 程式除了對影音伺服器收發影音外，也會利用 AMFPHP 呼叫網頁伺服器的 PHP 程式，獲取中央主機時間或是透過 PHP 對資料庫進行資料的存取。由於 Flash 程式處在客戶端的位置執行，所以各 Flash 程式或網頁伺服器皆無法直接將資訊傳給某一個 Flash 程式，所以利用訊息傳遞伺服器做為訊息的交換中心，在相同連線活動的 Flash 程式皆會連接到訊息傳遞伺服器中相同房間以進行資訊的傳遞，透過此方法網頁伺服器得以將資訊傳遞給客戶端 Flash 程式。圖 3-6 各伺服器間的溝通方式網頁伺服器訊息傳遞伺服器影音伺服器 Flash Socket Socket AMFPHP Streaming

(17)

17 3. 3. 3. 3.2222....10101010 視訊連線設計視訊連線設計視訊連線設計視訊連線設計本小節將針對視訊連線部份，說明當使用者開始、結束視訊連線時，網頁伺服器之對應處理。 3. 3. 3. 3.2222....10101010.1 .1 遠端.1 .1 遠端遠端遠端視訊視訊視訊視訊連線連線連線連線遠端視訊連線指的是使用者之間透過本網站平台進行之視訊溝通行為，其連線行為可以是單人或多人，除了單人連線外，其餘皆需由一位使用者向欲連線對象提出連線邀請，其他使用者在依意願選擇是否進入連線活動中，所以當使用者登入本平台時，可以主動發出邀請或是被動等待邀請連線。在本平台中只允許使用者同時進行一則視訊連線，不可同時建立多則視訊連線。圖 3-7 為使用者進行視訊連線時的操作管理介面，當使用者接受或建立連線時就會以彈跳視窗彈出此頁面，此介面分為左右兩區塊皆是由 Flash 所構成，左半部較大區塊是影音顯示區負責影音收發與其他視訊操作，右邊較小區塊則是文字溝通區使用者可在此區塊進行文字溝通。

進入此連線頁面後左邊的視訊溝通 Flash 就會依據 Video Code，收發來自影音伺服器的影音串流，並連結到訊息傳遞伺服器與處於同一個連線活動的 Flash 程式進行資訊交流，右邊的文字溝通 Flash 則只會連線到訊息傳遞伺服器，收發使用者所輸入的文字資訊。

(18)

18 圖 3-7 遠端視訊連線操作介面當使用者要進行視訊連線時，需先登入本網站平台，送出欲邀請視訊連線的對象帳號，接著程式將會進行處理判斷，其判斷流程如圖 3-8 所示，首先確認使用者所提交的這份邀請名單是否超過系統所提供的最大連線數限制，接著判斷邀請名單中的使用者是否能接受邀請，程式會先過濾出名單中以離線、正與其他人連線或正在忙碌中的使用者，若過濾完畢後發現沒有一位使用者能接受邀請，則連線就建立失敗。此階段過濾只是挑出無法接受邀請之使用者，所以當邀請送至其他使用者時，使用者還是有可能回絕連線請求。接著程式會在判斷使用者是否正有其他連線進行中，當判斷通過後就開始連線參數準備。連線參數包含收發影音串流之 Video Code、對訊息傳遞伺服器溝通使用的房間號碼、活動建立人等相關參數，其中溝通使用的房間號碼須由訊息傳遞伺服器提供，所以當使用者建立連線時，須對訊息傳遞伺服器送出房間申請。視訊溝通區塊文字溝通區

(19)

19 對訊息傳遞伺服器提出連線申請時，若訊息傳遞伺服器服務人數未達上限，則會回傳兩個房間號碼與一則檔案名稱，一則房間作為傳遞畫筆資訊或操作訊息之用;另一則房間則作為傳遞使用者文字對話資訊之用，並且所有文字對話資訊皆會紀錄至一開始所回傳的檔案名稱中，以供後續檢閱。當參數準備完畢後便存入資料庫中，並取得對應之存放位置。下一個動作則是送出連線邀請給名單中之使用者，並告知此連線參數之存放位置，當受邀請的使用者願意接受連線時，只須去資料庫中對應位置取其參數直接使用。因為網頁伺服器無法直接將邀請資訊傳達至客戶端的網頁上，因此只能將其訊息寫入資料庫，等待客戶端定期對資料庫查詢，以獲知有邀請產生。當完成對資料庫寫入邀請資訊後，提交連線邀請的使用者便會先行進入，如圖 3-7 所示之連線頁面中，等待其他使用者回應進入。

(20)

20 圖 3-8 使用者送出連線邀請時的判斷流程圖登入系統、送出連線邀請名單連線人數是否超過限制至少有一位使用者能接受邀請使用者本身正在連線中連線建立失敗建立 Video Code 並將連線資訊新增至資料庫中發送連線邀請函至所選名單中連線建立成功、進入連線頁面等候其他使用者加入是是是否否否向訊息傳遞伺服器申請房間訊息傳遞伺服器回應 2 個房間號碼和記錄檔名 _是否

(21)

21

當取得所有連線參數後，最後一個動作就是對資料庫寫入連線邀請資訊，讓受邀請對象可經由對資料庫查詢以得知其連線邀請，表 3-6 則是資料庫中對連線邀請通知所建立之欄位。c_index 欄位表示連線參數的儲存位置，connect 欄位代表連線邀請人帳號， state 欄位則是目前狀態。

假設 Kane 對 Edda 與 Aliy 提出連線邀請，經過圖 3-8 的判斷流程後在資料庫中新增一筆參數資訊，並取得此參數資訊的存放位置為第 318 列，之後在 Edda 與 Aliy 的 c_index、connect、state 欄位分別填入 318、Kane、wait_ans，最後也在自己的 c_index 與 connect 欄位填上相同資訊就完成通知動作。

表 3-6 送出連線邀請後資料庫欄位的變化 index

index index

index accountaccountaccountaccount MsgMMMsgsgsg namenamenamename E-EEE---mailmailmail mail c_indexc_indexc_indexc_index connectconnectconnectconnect statestate statestate 1 Kane … … … 318 Kane connect 2 Jessica … … …

3 James … … …

4 Edda … … … 318 Kane wait_ans 5 Aliy … … … 318 Kane wait_ans 6 Tom … … …

Edda 與 Aliy 只須對資訊庫中的 c_index、connect、state 欄位定期查詢，就可得知連線邀請產生，並且其發送邀請之使用者、連線參數存放位置、是否回答完成，皆可清楚了解。

(22)

22 當有連線邀請發生時程式就會彈跳出詢問框，讓使用者決定是否接受連線邀請，圖 3-9 為使用者決定的對應流程圖，不論使用者選擇拒絕或是允許，都會根據 c_index 欄位取得連線時在訊息傳遞伺服器所用之房間號碼，透過訊息傳遞伺服器告知已進入連線頁面中的使用者目前所做之決定。圖 3-9 當發生連線邀請時根據使用者的回答所需執行的流程拒絕允許使用者對於連線邀請透過訊息傳遞伺服器發送使用者進入消息清除資料庫中自己的 c_index、 connect、state 欄位數值依據 c_index 欄位取出連線參數連線邀請產生依據 c_index 欄位取出連線參數使用，並同時更新此參數資訊彈出連線操作頁面回答完成更新資料庫中自己的 state 欄位為“connect” 透過訊息傳遞伺服器發送使用者拒絕進入消息

(23)

因此多人連線機制是行進入連線頁面，其他接到邀請的使用者在依意願由於使用者進入連線活動的時間點並不相同用者資訊也須隨時更新變動進入連線頁面時透過對資料庫的查詢與 User B 則接收 User C 不論使用者延遲多少時間才進入連線活動用者人數。圖 TIME User A T1 23 多人連線機制是由一位使用者對其他使用者提出連線邀請接到邀請的使用者在依意願依序進入連線活動由於使用者進入連線活動的時間點並不相同，代表客戶端的Flash 資訊也須隨時更新變動，圖 3-10 則是連線活動時使用者的進入時間差異進入連線頁面時透過對資料庫的查詢，得知 User A 與 User B 已在連 ser C對訊息傳遞伺服器的廣播以得知 User C的加入不論使用者延遲多少時間才進入連線活動，其他使用者皆能即時掌握目前最新的連線使圖 3-10 使用者在不同的時間點進入連線活動中 User B User C T2 一位使用者對其他使用者提出連線邀請，經過程式處理後先活動。 Flash程式對於其他使連線活動時使用者的進入時間差異，當 User C 在連線活動中，User A 的加入，透過此機制其他使用者皆能即時掌握目前最新的連線使 User C T3

(24)

圖 3-11是當使用者送出連線邀請名單到使用者進入連線頁面後運作狀況，左邊的使用者就是連線邀請人流程許可後，就會先行進入連線頁面等待 Long-Polling取得有連線邀請時 1.a 1.a1.a 1.a 發出連線請求 1.e 1.e 1.e 1.e 成功發出請求連線頁面影音傳輸 1.f 1.f 1.f 1.f 進入連線頁面 24 圖 3-11 視訊連線時各伺服器的互動是當使用者送出連線邀請名單到使用者進入連線頁面後左邊的使用者就是連線邀請人，向網頁伺服器送出連線邀請名單就會先行進入連線頁面等待受邀請的使用者進入。當取得有連線邀請時，假設使用者願意接受連線就會進入連線頁面發出連線請求 1.b 1.b1.b 1.b 判斷是否符合連線資格 1.c 1.c1.c 1.c 要求兩個房間號碼和對話紀錄檔名 1.d 1.d1.d 1.d 新增連線資訊，並更新對方連線欄位成功發出請求 2 22 2.透過有連線請求 4 44 4. 傳遞使用者進入資訊影音傳輸 _影音傳輸文字溝通畫筆資訊文字溝通畫筆資訊 3 33 3. 訊息傳遞伺服器網頁伺服器影音伺服器是當使用者送出連線邀請名單到使用者進入連線頁面後，各伺服器的互動送出連線邀請名單並經過判斷當其他使用者透過假設使用者願意接受連線就會進入連線頁面，並透過透過LONG-POLLIN 得知有連線請求，並允許連線傳遞使用者進連線頁面 . 進入連線頁面

(25)

25 訊息傳遞伺服器向已經在連線活動中的使用者通知進入資訊。圖 3-11 僅畫出 2 人連線時之互動，當使用者欲發起多人連線邀請時，只是將圖 3-11 的右半部複製，因為接受邀請人所需執行的動作皆是相同的，發起人一樣向網頁伺服器提交連線邀請名單，也須對訊息傳遞伺服器申請房間號碼與對話紀錄檔名，接受邀請的使用者也是透過對資料庫中特定欄位 Long-Polling 得知有請求產生，以執行對應之處理。本平台除了提供多人連線模式外也與允許使用者自行建立單人連線，以錄製 DIY 教學影片或做其他使用，單人連線模式就是將圖 3-11 中右半部移除，發出邀請人一樣向網頁伺服器提出連線邀請名單，而名單中的邀請者就是使用者自己的帳號，當判斷結束後仍需對訊息傳遞伺服器申請房間號碼與對話紀錄檔名，並將此資訊更新至資料庫後回應連線資訊已經建立完成，就可直接進入連線頁面操作使用。因為邀請函之傳遞方式皆是透過客戶端對資料庫之查詢以得知，因此從使用者送出邀請函，到其他使用者接到邀請函之間所經過之時間差，與客戶端對資料庫查詢之時間點有很大關聯，目前設計客戶端採用 Long-Polling 對資料庫進行查詢，每次查詢無資訊更新時則會在伺服器端休眠 3 秒，再重新確認是否有資訊變動，直至休眠次數超過 10 次仍無資料異動，則回返告知無邀請函之訊息，因此推算當使用者送出邀請函後，對方最長會在 3 秒內收到邀請資訊。

(26)

26 3. 3. 3. 3.2222.1.1.1.10000.2 .2 .2 .2 連線公佈欄連線連線公佈欄連線連線公佈欄連線連線公佈欄連線連線公佈欄的製作原理及項目的更新方式已於 3.2.2 節說明過，此章節主要著重於使用者如何張貼請求在連線公布欄上，及使用者如何與張貼資訊的使用者建立連線。張貼連線請求流程如圖 3-12(b)所示，其方式與送出連線邀請名單之處理程序並無太大差異，圖 3-12(a)為送出連線邀請名單之處理流程。因為張貼請求時並無法預先得知回應的對象是誰，因此張貼時可直接省略對回覆對象的檢查與送出邀請之動作，並且也不準備與訊息傳遞伺服器相關之參數，只準備其他如 Video Code、建立日期等參數，當處理完畢後使用者仍可正常瀏覽網頁，直至有其他使用者回應請求時才會彈出視訊連線頁面，開始視訊操作。 (a) (b) 圖 3-12 (a)送出連線邀請之處理流程;(b)張貼連線請求之流程。送出邀請帳號判斷邀請對象能否接受邀請判斷使用者本身是否處於連線狀態連線參數準備送出連線邀請進入連線頁面，等候回應送出請求內容、關鍵字判斷使用者本身是否處於連線狀態忽略對訊息傳遞伺服器提出連線申請，僅準備其他參數張貼完成，等候回應

(27)

27 每則連線請求項目皆有明確之內容與關鍵字，因此使用者可依個人能力回覆協助，當使用者欲回覆請求項目時，執行流程如圖 3-13 所示，其中使用者仍得再次確認此請求是否有效，因可能會因為時間差導致已被撤銷之項目無法立刻更新，或使用者未清除請求項目就已離開本平台等其他因素，導致連線失敗，所以回覆者若確認此請求已不存在，則須幫張貼者善後清除。反之若此請求仍有效，則向訊息傳遞伺服器提出連線申請，取得房間號碼與對話檔名，並更新至連線參數後通知張貼者連線建立，就可開始視訊連線。圖 3-13 回覆張貼在連線公佈欄的項目所需執行之處理流程因為其連線只有當使用者回覆後才會正式建立，因此若在張貼初期就已對訊息傳遞伺服器申請房間，則當使用者在等待回覆期間，訊息傳遞伺服器中之房間將處於閒置狀態，因此採取確定連線建立後才向訊息傳遞伺服器申請，以增加訊息傳遞伺服器中房間的使用率。否否回應連線公佈欄項目請求是否還有效向訊息傳遞伺服器申請兩個房間與對話記錄檔，並更新至連線參數，通知對方連線建立進入連線頁面自己是否在連線狀態是回應失敗幫此使用者善後，清空連線請求連線失敗是

(28)

28 3. 3. 3. 3.2222.1.1.1.10000.3.3 視訊連線的身份與.3.3視訊連線的身份與視訊連線的身份與權利視訊連線的身份與權利權利權利在視訊連線活動中，會因使用者所扮演之角色不同，而有不一樣的權利，以下將針對連線活動中使用者身份詳細說明: 創造者創造者創造者創造者:發起連線、受邀請連線的使用者皆是創造者，在視訊連線時具有收發影音資訊、畫面標誌、文字溝通之權利，能邀請好友至連線活動中，並能於連線結束後管理此則影音紀錄。管理者管理者管理者管理者:預設由發起連線的使用者擔任，具有隨時更改活動資訊的權利，例如:活動名稱、活動是否公開等相關設定，當管理者離開時會從創造者中選出下一位繼承者。旁觀者旁觀者旁觀者旁觀者:自行進入連線活動之使用者。僅能單方接收影音與畫筆資訊，不具有發佈影音、畫筆標誌之權力，可使用文字與其他使用者溝通，但連線結束後不能管理此則影音紀錄。受邀受邀受邀受邀旁觀者旁觀者旁觀者旁觀者:於連線活動建立後，接受邀請進入的使用者，具有收發影音資訊、畫面標誌、文字溝通之權利，但連線結束後不能管理此則影音紀錄。表 3-7 為活動中各角色之對應權力，受邀旁觀者與旁觀者還有一最大差異為，當受邀旁觀者進入視訊連線時，等同處於連線狀態，不得再建立與受邀請至其他活動中，而旁觀者則無此方面限制。目前一則連線活動只允許 10 人有影音發佈權，旁觀者數量則沒有限制。表 3-7 連線活動中各身分的權力區分影音發佈畫筆標誌文字溝通影音記錄管理邀請好友至連線活動中連線資訊更改管理者創造者受邀旁觀者旁觀者

(29)

29 圖 3-14 使用者接到旁觀邀請時的判斷流程送出旁觀邀請與送出連線邀請的方式皆是一樣，只是會在資料庫中特別標明其邀請類別，圖 3-14 則是當使用者接到旁觀邀請後，根據使用者的答覆所執行的判斷流程，若使用者拒絕參與連線活動，僅須將資料庫中的 c_index、connect、state 欄位清除，不必再透過訊息傳遞伺服器傳遞使用者拒絕進入的訊息，反之當使用者接受旁觀邀請時，則須再次確認目前此連線活動中，具有影音發佈權力的使用者是否超過限制，以決定其進入身分。因為在一則連線活動中，具有影音發佈權力的使用者數量是固定的，並且活動中的創造者皆可對其好友送出旁觀邀請，因此可能多位創造者同時對好友送出旁觀邀請，導致送出邀請函之數量，大於連線活動中可操作人數之限制，所以當使用者接到邀請時需再次判斷操作人數是否已達上限，以決定進入身分。旁觀活動邀請產生對於連線邀請清空資料庫中使用者的連線欄位資訊連線人數是否已經超過限制普通旁觀者模式受邀旁觀者模式接受是否拒絕

(30)

30 3. 3. 3. 3.22.122.1.1.10000.4 .4 .4 .4 結束結束視訊結束結束視訊視訊視訊連線連線連線連線當使用者欲離開視訊連線時，只需直接關閉彈跳視窗，程式便會執行對應之處理，其處理方式則因使用者之身分而有所差異，以下將詳細說明: 創造者創造者創造者創造者:::: 清空資料庫中自己的 c_index、connect、state 欄位，並檢查是否是最後一位離開的創造者，若是則更新連線參數為活動結束狀態，不是則直接離開。管理者管理者管理者管理者:::: 處理流程等同創造者，只是當活動中仍有創造者存在時，則選出一位創造者繼承管理者權限，並透過訊息傳遞伺服器通知其繼承訊息。旁觀者旁觀者旁觀者旁觀者::::無須執行任何處理。受邀受邀受邀受邀旁觀者旁觀者旁觀者旁觀者:只需清空資料庫中自己的 c_index、connect、state 欄位。當連線活動中所有創造者皆離開時，此連線活動就宣告結束，不論其中還有多少受邀旁觀者或普通旁觀者存在，並且由最後一位離開的創造者，更新資料庫中此活動資訊為結束狀態，此時伺服器端的 Shell Script 程式，將開始計算此則連線記錄影片檔案大小、影片長度等資訊，並通知訊息傳遞伺服器連線時所使用房間號碼已結束使用，可重新回收再利用。一旦房間被訊息傳遞伺服器收回，則連線活動中之文字對話功能將完全失效。

(31)

31

第

第 4

44 4 章

章

系統功能與測試

網頁伺服器除了引導使用者進行視訊連線外，也提供其他輔助功能，讓使用者能便利使用，4.1 至 4.6 節將對其功能加以描述介紹。4.7 節開始將對系統平台進行相關測試，4.7.1 節則對三台伺服器所構成之互助平台進行相關測試; 4.7.2 節則針對網頁伺服器與資料庫分別進行獨立測試，4.7.3 節則對瀏覽本網站平台所用之瀏覽器與作業系統進行相容性測試。 4.1 4.1 4.1 4.1 即時訊息傳送功能即時訊息傳送功能即時訊息傳送功能即時訊息傳送功能即時訊息傳送功能是本平台所提供的一種訊息傳送方式，功能參考至 PTT 電子佈告欄[15]系統的水球傳送，在使用上比起一般的短信收發將能更快速讀取操作。雖然水球傳送比起短信收發在操作上更為便利，但還是有其缺點存在，當使用者要傳送一則含有重要大量文字訊息的資訊時若採用水球傳送，接收者將不便讀取與保存，所以短信傳送方式的訊息傳送還是有存在的必要，表 4-1 則是本平台中水球傳送與短信收發的功能之比較。表 4-1 短信收發與水球功能之比較短信收發水球發送對象任何使用者僅限好友字數限制 1000 字 30 字記錄暫存依使用者積分而定(最少 15 封) 1 封發送限制收信匣已滿就無法發送無讀取方式至收信匣讀取任何頁面皆可設計原理 Long-polling 取得資料 Long-polling 取得資料

(32)

32 圖 4-1 則是水球傳送功能的操作流程演示，當使用者丟出水球後不論接收者正處於任何頁面，皆會在網頁右上角顯示其水球訊息，此時接收者可選擇回丟或關閉水球顯示。圖 4-2 則是短信收發的操作流程演示，當使用者欲發送或接收短信時皆須到指定頁面才可操作使用，在此操作頁面中使用者也可對歷史信件檢視或刪除。 (a) (b) (c) 圖 4-1 (a)在好友名單中向要發送水球的對象點擊“水球發送”;(b)輸入要傳送的文字資訊;(c)水球訊息顯示。

(33)

33 (a) (b) 圖 4-2 (a)發送短信頁面;(b)收信匣頁面，以顏色區別短信是否以讀取。 4.2 4.2 4.2 4.2 全站搜尋全站搜尋全站搜尋全站搜尋平台中所有的影音紀錄與討論議題，使用者皆能以關鍵字進行搜尋，但因本平台資料項目眾多，若是直接對所有資訊搜尋則需花費較多時間，所以搜尋資料前須先明確指明搜尋範圍是以文章或影片為主。圖 4-3(a)則是搜尋控制項，在使用時除了輸入搜尋關鍵字外也需設定搜尋範圍，圖 3-18 (b)則是文章搜尋的顯示結果，當使用者提出對文章範圍進行搜尋時，搜尋對象包含文章標題、內文、建議評論等資訊。圖 4-3(c)是指定影片記錄搜尋的顯示結果，只要是視訊連線過後的記錄檔案皆是被搜尋之對象，所以當使用者不想要自己的連線記錄影片被任意觀看時，可自行設定密碼鎖，除非輸入正確的密碼否則即使搜尋到正確影片也無法觀看。

(34)

34 (a) (b) (c) 圖 4-3 (a)搜尋控制項;(b)文章搜尋結果;(c)影片搜尋結果。 4. 4. 4. 4.3333 個人資料管理個人資料管理個人資料管理個人資料管理本平台所提供的功能大部分皆需使用帳號密碼登入才可操作使用，透過這樣的特性每一個帳號都有其相關資訊產生，如此帳號所發表的討論議題、連線記錄、好友名單等，所以平台提供個人資料管理界面，讓使用者可對此帳號所產生的資訊項目進行管理。

(35)

35 個人資料管理區分為 5 大項目，包含個人資訊、議題管理、影片管理、圖片管理、黑名單，以下將對每種功能管理詳細說明。 4. 4. 4. 4.3333.1.1.1.1 個人資料個人資料個人資料個人資料此管理介面主要提供使用者進行姓名、信箱、密碼、個人圖像更改、關鍵字設定和可用空間查詢，並檢查使用的瀏覽器與 Flash 版本，圖 4-4 則是個人資料管理頁面。圖 4-4 個人資訊設定關鍵字設定代表使用者的個人專長設定，使其他使用者能以專長類別，搜尋請求協助的對象，其次系統也會在每天晚上固定時間，整理出當日此關鍵字類別所產生的議題討論，發送至使用者所指定的電子信箱中。可用空間代表使用者本身剩餘可用的空間容量，當使用者進行視訊連線時，其影音串流便會同時保存至伺服器端，但其紀錄影片並非每則皆有保存之價值，因此使用空間管理制度，希望使用者能對於價值性不高影片記錄，提出刪除建議。

(36)

36 當使用者在視訊連線中具有創造者身分，連線結束後就會擁有此則連線記錄的管理權，並且連線所產生之影片大小，也會加至使用者的使用空間上，直至使用者放棄此則記錄之管理權，才會移除此部影片對使用者所佔之空間，例如在一次的視訊連線中共有 5 位創造者， 5 位創造者的空間使用皆未超過限制，當連線結束後記錄影片所佔之空間為 300MB，則 5 位創造者的空間使用將個別增加 300MB。當空間使用已超過限制時，使用者仍可建立或參與視訊連線，只是在連線中不論使用者是否具有創造者身分，皆無法取得此次連線記錄的控制權。空間的容量會隨著積分的成長而逐漸增加，積分也代表著對本系統的參與度，只要使用者熱烈討論、協助其他使用者，都將獲得積分獎勵以取得更多空間容量。 4. 4. 4. 4.3333.2.2.2.2 議題議題議題管理議題管理管理管理圖 4-5 是使用者的議題管理頁面，此頁面主要列出使用者所發表的文章議題，並顯示其回覆、查看個數等資訊，與影片、圖片管理不同的是，當使用者發表討論議題後，只有系統管理者才有刪除的權利，使用者僅能對其內容修改。圖 4-5 個人議題管理

(37)

37 4. 4. 4. 4.3333.3.3.3.3 影片管理影片管理影片管理影片管理圖 4-6 是連線記錄管理頁面，此頁面會列出使用者所有可管理之連線記錄，對於每則連線記錄，使用者可任意觀看記錄影片與修改影片名稱、簡介、關鍵字等操作。對於每則連線記錄，使用者皆可自行刪除，但其刪除代表著放棄管理此則連線記錄之權利、釋放此記錄影片所佔之空間，並非立即把所有連線資訊從伺服器端移除，只有當此連線中所有創造者皆對此連線記錄提出刪除時，伺服器端才會完全移除此連線所產生的影片、圖片、文字等資訊。圖 4-6 連線記錄管理頁面 4. 4. 4. 4.3333.4.4.4.4 圖片管理圖片管理圖片管理圖片管理在傳統的網路論壇中，當使用者在張貼圖片資訊時，皆須由使用者自行尋找可用的網路空間，並將圖片上傳至網路空間中，再取得此圖片之連結位置，才能發表至文章，這對使用者是非常不便之操作。因此在本平台中使用者可直接將圖片上傳至自己的檔案空間中，張貼連結時直接呼叫取用即可。圖 4-7 則是圖片管理頁面，每張圖片可以是自行從本地端上傳或是在視訊連線時製作的影像截圖，每一張圖片都會佔去使用者的可用空間容量，所以並非可無線上傳大量

(38)

38 的檔案圖片。圖 4-7 圖片管理介面圖 4-8 則是使用者上傳圖片時程式執行之流程，除了確認圖片格式是否符合規定外，也會檢查使用者是否仍有空間額度可放置圖片，當判斷通過後圖片名稱就會以 MD5 重新編碼命名，例如: apple.jpg 編碼後將轉成 a4cf77da27f7e25c0c0024d9bc5e393d.jpg，目的是為了防止檔案名稱中含有非法字元或惡意語法之字串。圖 4-8 使用者上傳圖片時程式之判斷流程上傳圖片確認格式是否是圖片可用空間是否已滿重新建立檔案名稱上傳圖片完成失敗否否是是

(39)

39 當使用者上傳圖片至本網站平台後，使用範圍只限定於平台內部，不允許從其它網域位置讀取圖片資訊，例如在 http://www.AAA.com 網域顯示一則連結為 http://www.BBB.com/apple.jpg 之圖片，明顯的圖片是放置在 www.BBB.com 此主機下，但卻被 www.AAA.com 網域引用顯示。一但伺服器偵測圖片從其他網域讀取，圖片將會顯示錯誤訊息，以避免圖片被盜連使用對使用者智慧財產權的傷害，與伺服器頻寬的消耗。 4. 4. 4. 4.3333.5.5.5.5 黑名單黑名單黑名單黑名單本系統的連線邀請功能，只要使用者能輸入邀請對象的帳號即可送出連線邀請，因此可能導致某些惡意使用者利用此功能妨礙其他使用者，所以增加黑名單管理機制，只要使用者設為黑名單的帳號，將無法收到來自此帳號的連線請求、短信寄送、交友請求。圖 4-9 為黑名單管理介面。圖 4-9 黑名單管理介面 4. 4. 4. 4.4444 好友名單好友名單好友名單好友名單在本平台中使用者之間可互相建立其好友關係，雙方使用者就可追蹤好友登入狀況、檢視個人資料等操作功能，交友操作如圖 4-10 所示，流程如同現實生活般，須先向對方提出交友邀請，對方若同意則好友關係就會建立，反之則建立失敗。因此好友名單與黑名單為兩種互斥關係，例如對使用者 A 而言，使用者 B 不會是好友又是被列入黑名單的使用者。

(40)

40 (a)

(b)

(c)

(41)

41 4. 4. 4. 4.5555 議題議題議題議題討論討論討論區討論區區區此區主要顯示所有使用者所發表的討論議題，型式可為教學、討論、問題等，對於每則議題皆會設定一關鍵字，以利使用者分類觀看，圖 4-11 為討論議題列表介面。圖 4-11 討論議題列表區圖 4-12 則是議題內文結構安排，上半部為討論主題說明，中間部分則是多媒體顯示區，所有使用者皆可自行新增圖片、影片做為參考資訊，下半部則是文字評論區，使用者可任意發表對此則議題的建議評論。 4. 4. 4. 4.5555.1.1.1.1 新增圖片或影片新增圖片或影片新增圖片或影片新增圖片或影片每則討論議題，使用者皆可提供圖片或視訊連線記錄，做為參考或解答的資訊，圖 4-13 為新增多媒體資訊至討論議題時之操作流程。

(42)

42

(43)

43 (a) (b) 圖 4-13 (a)新增影片或圖片;(b)新增自己的多媒體資訊。 4. 4. 4. 4.5555....2222 最佳解答評選最佳解答評選最佳解答評選最佳解答評選當討論議題發表後，每位使用者也許會提供不同參考圖片或影片，此時發表此則討論議題的使用者，就可從眾多的多媒體資訊中選出一則圖片或影片，作為此討論議題的最佳參考檔案或解答，且被選為最佳解答的資訊擁有者也可獲得積分點數，以增加使用者參與討論的意願。

(44)

44 4. 4. 4. 4.6666 視訊連線功能操作視訊連線功能操作視訊連線功能操作視訊連線功能操作對於所有的視訊連線操作，使用者皆須使用帳號密碼登入本網站平台後，才可順利進行，並且所有的操作行為，並不限定於需停留在特定頁面才可使用。當使用者進入視訊連線時，網頁會以彈跳視窗的方式，顯示如圖 3-7 所示之視訊連線操作頁面，因此在使用前須先自行解除瀏覽器對彈跳視窗之限制。以下將針對於視訊連線部分，說明使用者該如何操作使用，才可建立一則視訊連線。 4.6.1 4.6.1 4.6.1 4.6.1 視訊視訊視訊連線視訊連線連線的連線的的邀請與回覆的邀請與回覆邀請與回覆邀請與回覆送出連線邀請送出連線邀請送出連線邀請送出連線邀請使用者進入本網站平台後，網頁最上方會出現四個功能鈕，如圖 4-14 所示，由左至由分別為“好友名單”、“個人資料”、“短信收發”、“遠端連線”，其功能如同字面上之說明，最右上角則顯示目前登入之帳號，例如圖 4-14 顯示登入帳號為“root”。圖 4-14 網頁上方所顯示之功能操作與登入帳號點擊“遠端連線”後，便會出現如圖 4-15 所示之“連線邀請”框，此時便可在輸入框內，輸入要送出連線邀請之帳號，例如圖 4-15 代表欲對帳號為“666”的使用者送出連線邀請。輸入完畢後按下右方之“連線”，程式便會對此帳號送出連線邀請。圖 4-15 連線邀請對象輸入框

(45)

45 以上操作僅適合對單一使用者送出連線邀請，若使用者欲同時送出多則連線邀請，進行多人視訊連線時，可按下圖 4-15 所示之“多人連線邀請模式”鈕。此時頁面將會自動轉跳至如圖 4-16 所示之多人連線邀請介面，左方列表會列出目前所有好友中，目前可接受連線邀請的好友，右邊則列出已加入邀請名單中之好友帳號，使用者可點擊好友圖像做加入或移出邀請名單之操作。圖 4-16 多人連線邀請介面名單決定後按下右下方之“送出”鈕，程式便會對名單中之使用者送出連線邀請。若成功送出邀請，網頁便會彈出連線操作頁面，使用者便可在操作頁面中等候其他使用者回覆進入，反之若邀請失敗則會出現錯誤訊息為“目前沒有任何一位使用者能接受連線”，代表邀請對象皆在忙碌中或以登出本網站平台。

(46)

46 接收接收接收接收連線邀請連線邀請連線邀請連線邀請當使用者在網頁中出現如圖 4-17 所示之邀請框時，代表有連線邀請產生，使用者可自行選擇允許或拒絕，考慮時間限制為 30 秒，若在時間到期前仍未決定，代表拒絕連線邀請，例如圖 4-17 代表接收到使用者“root”的連線邀請。圖 4-17 連線邀請決定框若使用者按下“拒絕”鈕，則此詢問框便會自動消失，反之若按下“允許”鈕，則會彈出視訊連線操作頁面，開始視訊連線操作。張貼連線請求至張貼連線請求至張貼連線請求至張貼連線請求至連線公佈欄連線公佈欄連線公佈欄連線公佈欄圖 4-18 左右兩邊分別為連線公佈欄與大廳討論示之顯示區，其顯示區塊採用上下浮動式設計，當點擊右上角標示為 1 之圈選處時，此顯示區塊將下移消失，此時只需按下圖 4-19 之圈選處，將自動恢復顯示區。圖 4-18 連線公佈欄與大廳討論室顯示區 1 2

(47)

47 圖 4-19 連線公佈欄與大廳討論室顯示區下降消失時當使用者欲張貼連線請求時，首先須按下圖 4-18 中，左下角標示為 2 之“張貼連線請求”，此時便會出現如圖 4-20 所示之資料輸入框，使用者須先輸入欲請求之項目與關鍵字，輸入完畢後則按下“送出鈕”，則完成張貼動作，例如圖 4-35 請求項目為 “test”，關鍵字為“綠能”。圖 4-20 連線請求輸入框當使用者成功張貼請求後，連線公佈欄便會出現使用者所張貼之項目，圖 4-21 為成功張貼請求項目後，連線公佈欄之變化。圖 4-21 成功張貼請求項目後公佈欄之變化

(48)

48 當使用者張貼連線請求後，便進入連線狀態，不可再受邀或建立其他活動。當連線操作頁面彈出時，代表有其他使用者回覆連線項目，可開始進行視訊連線，否則使用者仍可繼續瀏覽網頁。當使用者欲取消張貼之請求時，只需按下圖 4-21 圈選處之“取消發送請求”，即可撤銷張貼之項目。回覆回覆回覆回覆連線公佈欄之項目連線公佈欄之項目連線公佈欄之項目連線公佈欄之項目對於連線公佈欄上之項目，使用者只須直接點擊就代表回覆其請求，之後便會彈出視訊連線頁面，等候項目張貼者的進入。 4. 4. 4. 4.6666.2.2.2.2 活動資訊設定活動資訊設定活動資訊設定活動資訊設定當活動管理者欲對連線活動中資訊進行修改時，須先按下連線操作頁面右上角之 “修改”鈕，如圖 4-22 中標示為 1 之位置，此時便會出現如圖 4-23 所示之修改視窗，可修改之項目包含關鍵字、活動名稱、活動是否公開、密碼，修改次數則沒有限制。圖 4-22 連線活動中的資訊修改與邀請好友鈕圖 4-23 視訊連線時可設定之活動資訊 1 2

(49)

49 4. 4. 4. 4.6666.3.3.3.3 邀請邀請邀請旁觀者邀請旁觀者旁觀者旁觀者在連線活動中具有創造者身分的使用者皆可對好友送出活動旁觀邀請，操作方式則是按下連線操作頁面右上角之“邀請好友”鈕，如圖 4-22 中標示為 2 之位置，此時將出現圖 4-24 所示之選擇框，對於要邀請對象只需直接點擊使之變色，即代表加入邀請名單中，選擇完畢在按下“送出”鈕，則完成送出動作。圖 4-24 視訊連線時的旁觀邀請選擇框當使用者接到旁觀邀請時便會出現如圖 4-25 所示之詢問框。圖 4-25 為使用者接到帳號為“root”的使用者，邀請進入名為“主機板維修”之連線活動中當受邀旁觀者。圖 4-25 受邀旁觀者邀請詢問框

(50)

50 4. 4. 4. 4.6666.4 .4 .4 .4 離開離開離開離開視訊視訊視訊視訊連線連線連線連線因為視訊連線頁面以彈跳視窗方式顯示，因此當使用者欲離開視訊連線時只需直接關閉彈跳視窗，程式便會執行對應之處理。因為在網頁程式中不論使用者是按下 F5 刷新頁面或關閉瀏覽器，皆一律視為使用者離開，因此當使用者進入視訊連線頁面後，將禁止使用者自行按下 F5 刷新頁面。 4. 4. 4. 4.7777 系統測試系統測試系統測試系統測試 4.7.1 4.7.1 4.7.1 4.7.1 系統整體測試系統整體測試系統整體測試系統整體測試整體測試欲得知在視訊連線過程中使用者人數，對網頁伺服器與其他伺服器之間的訊息傳遞與處理工作所需時間的影響，以下將對訊息傳遞路徑與處理工作詳細說明。網頁伺服器網頁伺服器網頁伺服器

網頁伺服器傳遞訊息傳遞訊息傳遞訊息傳遞訊息至客戶端至客戶端至客戶端至客戶端 FlashFlashFlash Flash

傳輸路徑如圖 4-26 所示，網頁伺服器透過訊息傳遞伺服器將訊息轉送至客戶端 Flash 程式，此傳輸路徑主要用於傳輸使用者接受、拒絕、離開連線活動訊息，給仍在連線活動中之使用者。圖 4-26 網頁伺服器傳遞訊息至客戶端 Flash 之傳輸路徑網頁伺服器訊息傳遞伺服器 FLASH 1.訊息傳遞 2.訊息接收

(51)

51 客戶端

客戶端客戶端

客戶端 FlashFlashFlashFlash 傳送傳送傳送傳送視訊截圖視訊截圖至視訊截圖視訊截圖至至至網頁伺服器網頁伺服器網頁伺服器網頁伺服器

傳輸路徑如圖 4-27 所示，客戶端 Flash 透過 AMFPHP 將視訊截圖傳送至網頁伺服器，網頁伺服器儲存至硬碟後回應完成。圖 4-27 客戶端 Flash 傳送視訊截圖至網頁伺服器 4.7.1.1 4.7.1.1 4.7.1.1 4.7.1.1 測試方法測試方法測試方法測試方法第一次測試將量測 1 位使用者時，其訊息傳遞與處理工作之時間，重複測試 10 次取其平均，完成一次測試，第二次測試將使用人數增加至 10 人，而後每次測試增加 10 人直至 90 人為止。當測試人數超過 90 人時，因硬體設備與人員有限所以使用軟體模擬多位使用者進入視訊連線活動的情形，每次測試則逐漸增加 100 人，直至訊息傳遞或處理工作之錯誤率超過 7 成。錯誤率之定義為使用者欲透過網頁伺服器傳遞 10 則訊息至客戶端 Flash，共對網頁伺服器提出 20 次的傳遞要求，客戶端 Flash 程式才接到 10 則訊息，則錯誤率為 50%; 客戶端欲儲存 10 張圖片，共對網頁伺服器送出 20 則圖片儲存要求後，才成功完成所有圖片儲存，則錯誤率為 50%。以下將說明網頁伺服器和訊息傳遞伺服器，如何使用軟體模擬多位使用者進入視訊連線活動之情形。網頁伺服器 FLASH 1.透過 AMFPHP 發送圖片 2.傳遞處理完成訊息

(52)

52 一、網頁伺服器：當使用者登入本網站平台後，即使不做任何操作，網頁程式仍會定期向網頁伺服器送出 request，以更新客戶端資料。假設每一位使用者皆是進入本網站平台後，開啟一彈跳視窗旁觀視訊連線，之後便不做任何操作，則在此情況下，客戶端將對網頁伺服器送出 6 則 request 以更新資料，除了發送 request 的對象 PHP 程式皆不同外，其發動頻率也有所差異，表 4-2 則是在此使用者行為定義下，客戶端對網頁伺服器所送出之更新項目與頻率。表 4-2 每位使用者進入本網站平台後所發送之更新項目與頻率更新項目每 30 秒發動次數短信、交友、訊息、連線公佈欄更新 1 次取得連線活動資訊 1 次圖片更新 2 次取得目前正在進行之視訊活動 2 次確認其連線活動是否有效 3 次查詢連線邀請通知 10 次因此根據表 4-2 對網頁伺服器發送相同頻率之更新請求，則可模擬多位使用者進入平台後對網頁伺服器之影響。一、訊息傳遞伺服器：在視訊連線中，畫筆資訊或文字對話皆須由使用者主動觸發才會對訊息傳遞伺服器傳遞訊息指令，因此其資訊與對話的發送頻率全因使用者之操作而定。根據目前系統中所有儲存之訊息記錄分析得出，在視訊連線活動中平均每位使用者，每秒會對訊息傳遞伺服器發送 0.048 則長度為 53 字元之訊息，因此只需每秒對訊息傳遞伺服器發送模擬人數乘以 0.048 則長度為 53 字元之訊息，即可模擬多位使用者進入視訊連線對訊息傳遞伺服器之影響。

(53)

53 4.7.1.2 4.7.1.2 4.7.1.2 4.7.1.2 測試環境測試環境測試環境測試環境表 4-3 為各伺服器之硬體設備，各伺服器間以區域網路互相串連。在測試中，各伺服器與客戶端彼此皆以區域網路互相連線，使用 ping 測量後，任二者彼此訊息交換所需傳送時間在 0.07ms 以內，對於測試數據的影響在 0.1%以下，因此忽略由網路造成的延遲。表 4-3 網頁伺服器與訊息傳遞伺服器之硬體配備列表 Hardware Configuration

Processors Intel® Pentium® Processor E5300 @ 2.60 GHz (LGA 775) Motherboards ASUS P5KPL-CM (G31/ICH7) LGA 775

Memory 4 GB (2GBx2) Kingston KVR800D2N6/2G DDR2-800 6-6-6-18 @ 1.8 V

Graphics Integrated Intel Graphics Media Accelerator (Intel® GMA 3100) Network Atheros AR8121/AR8113/AR8114 PCI-E Ethernet Controller (L1e) Storage Seagate Barracuda 7200.10 160 GB

表 4-4 是網頁伺服器所使用的軟體版本，訊息傳遞伺服器的軟體是以自行撰寫的 Java 程式為主，因此僅列出使用的 Java Virtual Machine(JVM)版本。

表 4-4 網頁伺服器與訊息傳遞伺服器的軟體版本

Server 軟體版本作業系統

Web server PHP Version: 5.2.17 nginx version:

nginx/1.0.0

CentOS 5.5

Msg server JRE 6.0 Scientific Linux 6.0

雲端服務視訊互助平台之網站架構研究

第

第

第

第 1

11

1 章

章

章

章

前言

前言

前言

前言

第

第

第

第 2

22

2 章

章

章

章

相關研究

相關研究

相關研究

相關研究

第

第

第

第 3

33

3 章

章

章

章

系統架構與設計

系統架構與設計

系統架構與設計

系統架構與設計

第

第

第

第 4

44

4 章

章

章

章

系統功能與測試

系統功能與測試

系統功能與測試

系統功能與測試