基于asp和open技術的實時web文本系統(tǒng)的開發(fā)

基于asp和open技術的實時web文本系統(tǒng)的開發(fā)

1系統(tǒng)的運行增加了服務器的電池裝傳統(tǒng)web應用程序的實時性相對較差，即服務器狀態(tài)更改后，無法立即通知客戶端瀏覽器。當瀏覽器需要更改消息時，需要發(fā)送新的請求。這也造成傳統(tǒng)Web應用中有一些要求實時性的項目經(jīng)常采用定時自動刷新頁面的方法,這樣雖然一定程度上解決了問題,但也增加了服務器的無用負載?，F(xiàn)在隨著Ajax技術的發(fā)展已經(jīng)真正可以做到將服務器上的變化實時傳送到客戶端,而無須客戶端不停地刷新頁面、發(fā)送請求。這就是所謂的服務器推送技術。比較常用的服務器推送技術主要就是Comet,其使用HTTP長連接、無須瀏覽器安裝任何插件,使用和開發(fā)都很方便。2系統(tǒng)功能分析本文將結合一個實時Web聊天系統(tǒng)的開發(fā)來介紹Comet推送技術與Ajax的結合,下面首先對本文中所開發(fā)的聊天系統(tǒng)功能、界面進行簡單的介紹。2.1通訊系統(tǒng)接口本聊天系統(tǒng)的客戶端界面如圖1所示,上下分為兩個區(qū)域:上面是登陸功能區(qū)域,下面是聊天功能區(qū)域。2.2功能定位和功能2(1)在瀏覽器中打開客戶端界面后,用戶可以在昵稱文本框中輸入昵稱,按下按鈕進入聊天室。如果聊天室中已經(jīng)存在該昵稱則系統(tǒng)會彈出對話框提示用戶使用其他昵稱登陸。(2)在成功進入聊天室的情況下,用戶可以按下按鈕離開聊天室。(3)進入聊天室后,用戶可以通過“公聊”與“私聊”兩種方式進行聊天?！肮摹奔磳⑾l(fā)送給所有在線的用戶,“私聊”只將消息發(fā)送給選中的用戶。3案例2:ometd-api-.7正式開始開發(fā)代碼之前首先要完成如下幾項準備工作:(1)到jetty的官方網(wǎng)站上下載jetty的壓縮包jetty-6.1.10zip。(2)從jetty-6.1.10.zip中解壓出本案例需要使用的幾個支持jar包:cometd-api-0.9.20080221.jar、cometd-bayeux-6.1.10jar與jetty-util-6.1.10.jar。(3)從dojo的官方網(wǎng)站上下載dojo的壓縮包dojo-release-1.1.1.tar.gz,并將此壓縮包解壓縮。(4)按照圖2所示的目錄結構組織本案例的文件,并將此目錄拷貝到Tomcat下的webapps目錄中。其中AjaxReceiveServlet.java為實現(xiàn)聊天管理功能Servlet的源文件,chat.jsp為聊天頁面,dojo-release-1.1.1文件夾是將dojo-release-1.1.1.tar.gz文件解壓縮得到的,global.css為聊天頁面排版的層疊樣式表文件。4東北部文本創(chuàng)作完成了項目的準備工作以后就可以真正進入源代碼的開發(fā)了,首先需要開發(fā)的是聊天管理Servlet的源代碼。在classes目錄中新建AjaxReceiveServlet.java文件,并在其中輸入如下代碼:由于傳送的消息在客戶端由Ajax通過JavaScript解析,因此中文內(nèi)容必須采用unicode的escape格式,否則會出現(xiàn)亂碼。如上述代碼中的“%u8fdb%u5165%u804a%u5929%u5ba4%uff01”代表的就是“進入聊天室!”,“%u9000%u51fa%u804a%u5929%u5ba4%uff01”代表的就是“退出聊天室!”。如果需要將文本內(nèi)容轉(zhuǎn)換為unicode的escape格式可以使用JDK自帶的“native2ascii”工具或其他開發(fā)工具完成,并不需要讀者自己完成這個繁瑣的工作。完成了AjaxReceiveServlet.java的開發(fā)后,用javac或其他工具將其編譯為class文件,這樣在項目完成后此Servlet就可以在服務端承擔聊天室的用戶進入、退出,在線用戶列表的更新等工作了。5web.4植物聯(lián)網(wǎng)應用的配置文件了解JavaWeb應用的讀者都知道,任何一個JavaWeb應用都必須有正確的web.xml配置文件才能工作。此配置文件中包含了各個Servlet以及其他的一些配置信息,內(nèi)容如下:6基于轉(zhuǎn)化的辦公頁面完成了聊天管理Servlet的開發(fā)以及web.xml配置文件的編寫后就可以搭建聊天頁面了,這主要包括下列兩項工作:(1)聊天頁面所需css層疊樣式表的開發(fā)(2)聊天頁面框架的開發(fā)6.1于各類疊樣式表的發(fā)由于聊天頁面的布局采用了css,因此在開發(fā)聊天頁面之前首先要開發(fā)對應的css層疊樣式表。在css目錄下新建global.css文件,并輸入如下內(nèi)容:上述css代碼聲明了聊天頁面所需的一些id過濾器,對css過濾器不熟悉的讀者可以自行查閱相關書籍、資料。6.2創(chuàng)建chat.條件文件并輸出代碼完成了css層疊樣式表的開發(fā)后就可以進行聊天頁面框架的開發(fā)了,在AjaxCometChat文件夾下創(chuàng)建chat.jsp文件并輸入如下代碼:上述代碼搭建了聊天頁面的布局,擺放了各個控件的位置,并設置了各個控件的外觀。7trim開發(fā)完成了聊天頁面的搭建后,就可以基于Ajax+Comet開發(fā)各項聊天功能了,這主要包括下列幾項工作:(1)為String類增加trim方法。(2)傳統(tǒng)Ajax收發(fā)數(shù)據(jù)功能的開發(fā)。(3)進入、退出聊天室功能的開發(fā)。(4)基于Comet推送收發(fā)聊天內(nèi)容功能的開發(fā)。(5)頁面初始化功能的開發(fā)。7.1trim算法代碼由于JavaScript中沒有為String類提供trim方法,而聊天功能的開發(fā)中需要使用trim方法,因此要通過JavaScript的原型技術為String類增加trim方法,代碼如下:7.2傳統(tǒng)的https客戶端數(shù)據(jù)引擎開發(fā)本案例中進入、退出聊天室采用的是傳統(tǒng)Ajax技術與服務器進行通信的,因此首先要開發(fā)傳統(tǒng)Ajax收發(fā)數(shù)據(jù)的方法,代碼如下:7.3訪問和終止函數(shù)的開發(fā)完成了傳統(tǒng)Ajax收發(fā)數(shù)據(jù)功能的開發(fā)后,就可以開發(fā)聊天室進入、退出及控件狀態(tài)切換的對應功能了,代碼如下:7.4基于espet推送功能的開發(fā)完成了前面所有功能的開發(fā)后就可以開發(fā)本案例中最重要的基于Comet推送的聊天內(nèi)容收發(fā)功能了,代碼如下:7.5網(wǎng)絡啟動功能的開發(fā)完成了各項具體業(yè)務功能的開發(fā)后,就可以開發(fā)聊天頁面的初始化功能了,代碼如下:8開域名的東北部完成了所有的開發(fā)工作后就可以運行應用程序了,只要啟動程序所屬的Tomcat服務器即可。Tomcat成功啟動后,打開瀏覽器,在地址欄中輸入http://localhost:8080/AjaxCometChat/即可出現(xiàn)如圖1所示的聊天頁面。讀者可以多打開幾個瀏覽器,模擬多個用戶聊天的情況進行測試。如果Tomcat服務器所在的主機是連接到網(wǎng)絡上的,也可以通過網(wǎng)絡上的其他機器訪問聊天室,這時只要把地址中的“l(fā)ocalhost”替換成服務器主機名或IP地址即可。9實時上傳,提高用戶體驗通過開發(fā)文中的Web實時聊天系統(tǒng),讀者應該對如何使用Ajax+Comet推送技術開發(fā)實時Web應用有了一定的了解。同時也可以充分體會Comet推送技術為Web應用帶來的好處,聊天消息會被實時推送到客戶端瀏覽器,瀏覽器