毛穎華

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

關(guān)鍵詞：Java；電子白板；Eclipse 繪制圖形

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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)絡(luò)的迅速發(fā)展，Email、WWW、FTP等傳統(tǒng)的非實(shí)時(shí)應(yīng)用日趨成熟，廣大網(wǎng)絡(luò)用戶對(duì)在線實(shí)時(shí)交流的需求不斷擴(kuò)大，如網(wǎng)上會(huì)議、遠(yuǎn)程教學(xué)、協(xié)同工作等[1]，此方面的應(yīng)用軟件也日益豐富。該類交流軟件主要分為兩類，一類是以目前BBS和主頁(yè)中聊天室為代表的純文字型的交流工具；另一種就是電子白板類交流工具，而電子白板正以其形象、直觀、不受地域限制等優(yōu)勢(shì)，受到越來越廣泛的應(yīng)用。

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

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

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

2 主要技術(shù)

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

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

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

3 系統(tǒng)需求

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

電子白板功能主要?jiǎng)澐譃槲淖纸徽労蛨D形交互兩個(gè)部分，其中文字交談是指實(shí)現(xiàn)用戶之間文字消息發(fā)送、傳輸和接收，而圖形交互主要是用戶在白板區(qū)域繪制圖形，另一方的該區(qū)域?qū)⑼斤@示圖形畫面，其功能模塊圖如圖2所示。

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

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

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

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

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

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

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

5.1 系統(tǒng)界面

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

5.2 用戶加入組

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

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

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

5.4 圖形消息的同步顯示

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

5.5 用戶離開組

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

6 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

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

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