基于Java的網(wǎng)絡電子白板的設計與實現(xiàn)

毛穎華

摘要：隨著寬帶和多媒體技術的日趨成熟，電子白板正以其形象、直觀、不受地域限制等優(yōu)勢，得到越來越廣泛的應用。通過電子白板，可以在文字聊天基礎上引入圖形繪制交流功能，更加豐富了人們之間交流的形式。該文綜合運用UML建模技術、計算機網(wǎng)絡技術，以Java作為開發(fā)語言、Eclipse作為開發(fā)工具，基于Socket通信模型，設計并實現(xiàn)一個具有繪制圖形及圖形數(shù)據(jù)同步傳輸與顯示功能的網(wǎng)絡電子白板。

關鍵詞：Java；電子白板；Eclipse 繪制圖形

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）23-0061-04

Abstract： As the broadband and multimedia technology matures， whiteboard is used more widely with its image， intuitive， without geographical restrictions and other advantages. By the whiteboard， we can introduced graphics exchange capabilities on the basis of text chat， richer forms of communication between people. This paper uses UML modeling and computer network technology， uses Java as a development language， Eclipse as a development tool， and based on the socket communications， designs and implements a whiteboard with the functions of drawing graphics and graphic data transmission and display.

Key words： Java； Whiteboard； Eclipse drawing graphics

1 背景

隨著網(wǎng)絡的迅速發(fā)展，Email、WWW、FTP等傳統(tǒng)的非實時應用日趨成熟，廣大網(wǎng)絡用戶對在線實時交流的需求不斷擴大，如網(wǎng)上會議、遠程教學、協(xié)同工作等[1]，此方面的應用軟件也日益豐富。該類交流軟件主要分為兩類，一類是以目前BBS和主頁中聊天室為代表的純文字型的交流工具；另一種就是電子白板類交流工具，而電子白板正以其形象、直觀、不受地域限制等優(yōu)勢，受到越來越廣泛的應用。

所謂電子白板，即指一個虛擬公用區(qū)域內(nèi)，在CSCW中參加協(xié)作的各成員計算機上均有一個白板視圖，白板視圖上的內(nèi)容既可以是手繪的簡單圖形（直線、曲線、矩形等），也可以是文字、圖像、音頻、視頻。其中白板數(shù)據(jù)是共享數(shù)據(jù)[4]，當一個用戶修改了其中的數(shù)據(jù)之后，就會把修改立即通知給其他用戶，讓其他用戶及時更新自己的白板視圖，其更新結果立即反映在其他所有用戶的視圖上。

目前，市場上主流的電子白板軟件有EduBoard、EduOffice和NetMeeting等。其中，NetMeeting[5]是一款由MicroSoft公司開發(fā)的帶有電子白板功能的視頻會議軟件，即當某個用戶創(chuàng)建了一個網(wǎng)絡會議之后，該會議中的任何一個用戶都可以運行白板部件，其他用戶則可以看到該白板，所有的用戶都可以在白板上自由書寫、繪制圖形，輸入的信息被所有用戶共享。

與其他交流工具相比，本文所設計的電子白板除了具備聊天室功能外，還引入了繪制圖形交流功能，大大增強了交流的形象性和直觀性，彌補了文字交流的不足。當分布在Internet不同位置的用戶用白板進行交流時，用戶在自己的白板上繪制的圖形可以立即在其他用戶白板上顯示出來，類似所有用戶都在同一塊白板上繪畫，大大縮短了彼此間的距離感。

2 主要技術

本文所設計的電子白板基于用戶加入分組，并向組廣播消息的工作原理來實現(xiàn)用戶間的通信。在傳輸層，采用UDP協(xié)議進行數(shù)據(jù)傳輸，并將網(wǎng)絡數(shù)據(jù)流量壓縮成數(shù)據(jù)報的形式，而對拆分后數(shù)據(jù)的先后到達順序不做要求。在應用層，使用Socket編程技術實現(xiàn)應用程序之間的數(shù)據(jù)交換，并采用網(wǎng)絡API中的數(shù)據(jù)報套接字建立在發(fā)送和接收消息時的連接，該套接字的使用減少了在建立連接時所要花費一定時間而產(chǎn)生的開銷。

Socket通信示例圖如圖1所示。

為了使開發(fā)的軟件便捷、高效并且適合網(wǎng)絡應用，本文采用了Java作為開發(fā)語言，Eclipse作為集成開發(fā)平臺，其中Eclipse多樣化的插件支持，使得軟件的設計變得更加便捷，為本系統(tǒng)的成功開發(fā)奠定了良好的基礎。

3 系統(tǒng)需求

本文所設計的電子白板在設計時應滿足以下目標：采用文字與圖形兩種交談方式，其中當文字消息發(fā)送后，組中所有成員均能及時接收，并實現(xiàn)區(qū)分用戶名重名；圖形消息除保證能正常接收外，還應能夠實現(xiàn)同步傳輸和顯示；系統(tǒng)界面友好、美觀。系統(tǒng)將最大限度地實現(xiàn)易維護性和易操作性，保證系統(tǒng)運行穩(wěn)定，且安全可靠。

電子白板功能主要劃分為文字交談和圖形交互兩個部分，其中文字交談是指實現(xiàn)用戶之間文字消息發(fā)送、傳輸和接收，而圖形交互主要是用戶在白板區(qū)域繪制圖形，另一方的該區(qū)域將同步顯示圖形畫面，其功能模塊圖如圖2所示。

③ 離開組播組。當用戶加入組后，按鈕jButton2由“加入”變?yōu)椤半x開”，再次點擊該按鈕（此時為“離開”）時，則調用leaveGroup（）方法向組播組發(fā)出此用戶離開的消息，用戶離開組播組，并且在離開前向組里面廣播自己已經(jīng)離開。

2）發(fā)送消息。當用戶點擊按鈕jButton1時，就觸發(fā)發(fā)送消息事件。首先調用方法addActionListener（），在按鈕jButton1上添加按鈕監(jiān)聽器jButton1_actionPerformed（），用來負責監(jiān)聽按鈕事件。接著在該方法中定義實現(xiàn)獲取輸入信息并向組里廣播等功能的屬性及操作。

在方法jButton1_actionPerformed（）中，首先調用getText（）方法獲取用戶輸入信息，其次在該信息中添加如用戶名、交談對象等信息，并把消息連接在一起組成字符串，隨后將消息打包并在組里廣播，最后清空輸入消息框。

3）接收消息。利用waitfopacket（）方法等待組播組發(fā)送的消息并在本機上顯示出來。首先調用receive（）方法接收組內(nèi)的廣播包，因為傳遞的數(shù)據(jù)包中可能同時包含文字消息及圖形信息（坐標值），所以在每對坐標值之前添加一個特殊符號“@”，然后在解析包內(nèi)容時，如果含有“@”則是圖形消息，否則是文字消息。如果是文字消息就調用append（）方法把內(nèi)容顯示，如果是畫圖消息則按照坐標繪制出遠端的圖形。

4）繪畫。繪畫功能的實現(xiàn)是調用Java自帶畫圖方法mouseDragged（）中的mouseMove（）方法和mouseReleased（）方法。其中，mouseMove（）方法是在鼠標落下并移動時調用，而mouseReleased（）方法是在抬起鼠標時調用。當用戶將鼠標移至繪圖區(qū)域時，單擊并拖動鼠標就可以進行繪畫，直到抬起鼠標才標志著一次繪畫的結束。具體處理過程是首先獲得鼠標落下時的坐標，隨后記錄下鼠標在拖動過程中的各個坐標，到抬起鼠標為止，然后調用drawLine（）方法，每兩點之間劃線，最后將直線坐標的4個值打包，在組內(nèi)廣播。

5）清除畫板。當用戶點擊按鈕jButton3時，觸發(fā)清除畫板事件。首先在jButton3上添加按鈕監(jiān)聽器jButton3_actionPerformed（），負責監(jiān)聽按鈕事件。其次在該方法中定義實現(xiàn)清除繪畫區(qū)域功能的屬性及操作，清除畫板實際上是通過調用Java所提供的圖形繪制函數(shù)setBackground（），把畫板區(qū)域涂一層白色。

5 系統(tǒng)實現(xiàn)

5.1 系統(tǒng)界面

本系統(tǒng)界面中，在用戶加入組播組之前，消息輸入框、繪畫區(qū)域、文字消息顯示區(qū)域等都顯示灰色，即該區(qū)域暫時沒有被激活。系統(tǒng)運行效果圖如圖7所示。

5.2 用戶加入組

當用戶加入組播組后，消息輸入框、繪畫區(qū)域、文字消息顯示區(qū)域等都被激活，負責輸入用戶名的按鈕從“加入”變?yōu)椤半x開”，此時，用戶可以通過消息輸入框輸入信息來交談，也可以利用白板區(qū)域繪畫進行交互。用戶加入組播組界面如圖8所示。

5.3 發(fā)送和接收文字消息

當用戶加入組后，即可進行交談。在輸入框中輸入信息，點擊“發(fā)送”按鈕就能通過廣播將消息發(fā)送給組內(nèi)成員。此外，本系統(tǒng)支持中英文的輸入和顯示，解決了編碼問題。用戶發(fā)送和接收文字消息界面如圖9所示。

5.4 圖形消息的同步顯示

除了利用文字消息進行交談，用戶之間還可以通過白板進行交互。在繪圖區(qū)域繪畫時，組中另外成員的畫板上會同步傳輸和顯示該圖形。兩個用戶之間的白板交互情況分別如圖10和圖11所示，其中圖10為發(fā)送方界面，圖11為接受方界面。

5.5 用戶離開組

當用戶離開組播組后，消息輸入框、繪畫區(qū)域、文字消息顯示區(qū)域等又恢復為加入組播組之前的不可用狀態(tài)。用戶離開組后界面變化如圖12所示。

6 結束語

本文設計并實現(xiàn)了一個具有繪制圖形及圖形數(shù)據(jù)同步傳輸與顯示功能的網(wǎng)絡電子白板，通過對十個用戶組、每組包含20個用戶分別進行測試，發(fā)現(xiàn)運行情況良好，完全能夠滿足各用戶之間的交流。下一步將在功能拓展、界面優(yōu)化方面繼續(xù)深入，使得電子白板功能更加完善，更符合實際需求。

參考文獻：

[1] 劉革， 汪洋， 夏猛， 等. 一種基于流媒體的電子白板業(yè)務的實現(xiàn)[J]. 計算機與網(wǎng)絡， 2013（22）：142-147.

[2] 石王陽， 吳林林. 基于Web的視頻會議系統(tǒng)的設計與實現(xiàn)[J].廊坊師范學院學報：自然科學版，2015（2）：126-130.

[3] 顧永周. 基于P2P的交互式電子白板的設計與開發(fā)[D]. 上海： 復旦大學， 2011.

[4] 高小能， 錢宇星， 張寶儒. 智能手機的無線網(wǎng)絡會議白板軟件系統(tǒng)開發(fā)[J]. 微型機與應用， 2011（16）：170-173.

[5] 張江波， 基于Java媒體框架的視頻會議系統(tǒng)設計與實現(xiàn)[D]. 石家莊： 河北科技大學， 2015.

[6] 張剛毅. 電子白板功能的設計與實現(xiàn)[J]. 現(xiàn)代電子技術， 2006（1）：140-144.

[7] 陳剛. Eclipse從入門到精通[M]. 北京： 清華大學出版社， 2007.