【文章內(nèi)容簡介】 height: 90px。}sendBtn { width: 50px。 height: 96px。 float: right。}emojiWrapper { display: none。 width: 500px。 bottom: 105px。 position: absolute。 backgroundcolor: aaa。 boxshadow: 0 0 10px 555。}emojiWrapper img { margin: 2px。 padding: 2px。 width: 25px。 height: 25px。}emojiWrapper img:hover { backgroundcolor: blue。}.emoji{ display: inline。}footer { textalign: center。}為了讓項目有一個良好的目錄結(jié)構(gòu)便于管理，,。同時再新建一個content文件夾用于存放其他資源比如圖片等，其中content文件夾里再建一個emoji文件夾用于存放表情gif圖，最后我們項目的目錄結(jié)構(gòu)應該是這樣的：├─node_modules└─ ├─content │ └─emoji ├─scripts└─styles圖62基本的聊天功能已經(jīng)實現(xiàn)，下一步，我們想讓用戶可以發(fā)送圖片，那樣程序便更加完美了。圖片不同于文字，但通過將圖片轉(zhuǎn)化為字符串形式后，便可以像發(fā)送普通文本消息一樣發(fā)送圖片了，只是在顯示的時候?qū)⑺€原為圖片。在這之前，我們已經(jīng)將圖片按鈕在頁面放好了，其實是一個文件類型的input，下面只需在它身上做功夫便可。用戶點擊圖片按鈕后，彈出文件選擇窗口供用戶選擇圖片。之后我們可以在JavaScript代碼中使用FileReader來將圖片讀取為base64格式的字符串形式進行發(fā)送。而base64格式的圖片直接可以指定為圖片的src，這樣就可以將圖片用img標簽顯示在頁面了。為此我們監(jiān)聽圖片按鈕的change事件，一但用戶選擇了圖片，便顯示到自己的屏幕上同時讀取為文本發(fā)送到服務器。代碼如下：(39。sendImage39。).addEventListener(39。change39。, function() { //檢查是否有文件被選中 if ( != 0) { //獲取文件并用FileReader進行讀取 var file = [0], reader = new FileReader()。 if (!reader) { (39。system39。, 39。!your browser doesn\39。t support fileReader39。, 39。red39。)。 = 39。39。 return。 }。 = function(e) { //讀取成功，顯示到頁面并發(fā)送到服務器 = 39。39。 (39。img39。, )。 (39。me39。, )。 }。 (file)。 }。 }, false)。現(xiàn)在啟動服務器打開程序，我們就可以發(fā)送圖片了。圖63文字總是很難表達出說話時的面部表情的，于是表情就誕生了。前面已經(jīng)介紹過如何發(fā)送圖片了，嚴格來說，表情也是圖片，但它有特殊之處，因為表情可以穿插在文字中一并發(fā)送，所以就不能像處理圖片那樣來處理表情了。根據(jù)以往的經(jīng)驗，其他聊天程序是把表情轉(zhuǎn)為符號，比如我想發(fā)笑臉，并且‘:)’這個符號代表笑臉表情，然后數(shù)據(jù)傳輸過程中其實傳輸?shù)氖且粋€冒號加右括號的組合，當每個客戶端接受到消息后，從文字當中將這些表情符號提取出來，再用gif圖片替換，這樣呈現(xiàn)到頁面我們就能看到表情文字的混排了。首先得將所有可用的表情圖片顯示到一個小窗口，這個窗口會在點擊了表情按鈕后顯示如下圖，在HTML代碼中已經(jīng)添加好了這個窗口了，下面只需要實現(xiàn)代碼不分。圖64部分代碼如下：_showEmoji: function(msg) { var match, result = msg, reg = /\[emoji:\d+\]/g, emojiIndex, totalEmojiNum = (39。emojiWrapper39。).。 while (match = (msg)) { emojiIndex = match[0].slice(7, 1)。 if (emojiIndex totalEmojiNum) { result = (match[0], 39。[X]39。)。 } else { result = (match[0], 39。img class=emoji src=../content/emoji/39。 + emojiIndex + 39。.gif /39。)。 }。 }。 return result。}萬幸，HTML5新增了一個專門用于顏色選取的input標簽，并且Chrome對它的支持非常之贊，直接彈出系統(tǒng)的顏色拾取窗口。圖65IE及FF中均是一個普通的文本框，不過不影響使用，只是用戶只能通過輸入具體的顏色值來進行顏色設置，沒有Chrome里面那么方便直觀。代碼如下(39。sendBtn39。).addEventListener(39。click39。, function() { var messageInput = (39。messageInput39。), msg = , //獲取顏色值 color = (39。colorStyle39。).value。 = 39。39。 ()。 if (().length != 0) { //顯示和發(fā)送時帶上顏色值參數(shù) (39。postMsg39。, msg, color)。 (39。me39。, msg, color)。 }。}, false)。預覽效果如下圖圖66，這樣在輸入昵稱后，按回車鍵就可以登陸，進入聊天界面后，回車鍵也可以發(fā)送消息。(39。nicknameInput39。).addEventListener(39。keyup39。, function(e) { if ( == 13) { var nickName = (39。nicknameInput39。).value。 if (().length != 0) { (39。login39。, nickName)。 }。 }。 }, false)。 (39。messageInput39。).addEventListener(39。keyup39。, function(e) { var messageInput = (39。messageInput39。), msg = , color = (39。colorStyle39。).value。 if ( == 13 amp。amp。 ().length != 0) { = 39。39。 (39。postMsg39。, msg, color)。 (39。me39。, msg, color)。 }。}, false)。這里實現(xiàn)顯示在線用戶數(shù)及在聊天主界面中以系統(tǒng)身份顯示用戶連接離開等信息。，后面還有一句代碼，傳送了剛登入用戶的昵稱，所有人接收到這個時間后，會在聊天串口顯示一條系統(tǒng)消息’某某加入了聊天室’。同時考慮到在前端我們無法得知用戶是進入還是離開，所以在這個system事件里我們多傳遞一個數(shù)據(jù)來表明用戶是進入還是離開。Hichat中的代碼如下：(39。system39。, function(nickName, userCount, type) { //判斷用戶是連接還是離開以顯示不同的信息 var msg = nickName + (type == 39。login39。 ? 39。 joined39。 : 39。 left39。)。 var p = (39。p39。)。 = msg。 (39。historyMsg39。).appendChild(p)。 //將在線人數(shù)顯示到頁面頂部 (39。status39。).textContent = userCount + (userCount 1 ? 39。 users39。 : 39。 user39。) + 39。 online39。})。預覽效果如下：圖68第七章 系統(tǒng)測試測試系統(tǒng)Windows 7，測試瀏覽器Google Chrome。首先測試服務器端口是否就緒，利用前面的測試代碼就可以了，在命令行輸入node server或者node ，顯示 started即表示服務器以就緒，然后打開瀏覽器輸入localhost：3000如果進入聊天界面，表示系統(tǒng)測試成功，輸入昵稱就可進入系統(tǒng)聊天。上面詳細描述了基于nodejs的即時通訊系統(tǒng)的實現(xiàn)過程，經(jīng)過對頁面的美化設計就可完善該系統(tǒng)，設計實現(xiàn)一個完整的即時通訊系統(tǒng)。經(jīng)過以上測試，系統(tǒng)響應速度較快，但聊天界面稍顯簡單，后期還可以加入語音聊天、群組聊天、視頻聊天等比較常見的功能。第八章 軟件使用說明書本章演示在單機條件下運行聊天工具，模擬實現(xiàn)聊天過程。本即時通訊系統(tǒng)是基于nodejs技術(shù)設計實現(xiàn)的，主要功能是實現(xiàn)用戶的在線聊天，發(fā)送表情圖片等信息，同時可以修改聊天字體顏色。界面簡潔美觀，可以增進用戶之間的交流。 服務器啟動完成系統(tǒng)設計后啟動服務器，在Windows控制臺下執(zhí)行如下命令：node server或node 圖81 服務器運行界面圖示顯示服務器已經(jīng)啟動。 運行客戶端打開瀏覽器，輸入localhost：3000，系統(tǒng)就可運行系統(tǒng)運行之后，進入登錄界面：輸入昵稱就可進入聊天。 開始聊天在瀏覽器中打開兩個窗口，系統(tǒng)顯示“2 user online”，在聊天界面輸入消息就可發(fā)送，對方就可收到消息，同時可以發(fā)送表情圖片等。如圖72所示 圖82 設計總結(jié)經(jīng)過幾個月的畢業(yè)設計，即時通訊系統(tǒng)終于完成了。本文在對相關理論知識的基礎上設計了一個基于nodejs的即時通訊系統(tǒng)，分析系統(tǒng)的工作流程，并應用JavaScript端平臺具體實現(xiàn)了一些基本的功能，如：登錄、即時聊天、表情發(fā)送、字體顏色設置等。本系統(tǒng)功能雖簡單，但目的的了解基于nodejs應用程序的開發(fā)過程，如果要完善系統(tǒng)還需更多的時間。畢業(yè)設計的過程是一個學習與研究的過程，而且，我深刻地認識到如果在實踐中學習與研究，所學習的知識和技能就會更扎實。我使用HTML，Nodejs，Socket等相關技術(shù)完成系統(tǒng)，雖然系統(tǒng)已基本完成，但我對于nodejs的核心技術(shù)和高級編程還是很陌生，不能熟練運用。在此次的畢業(yè)設計中，我深深地體會到進行軟件開發(fā)不是一件容易的事情，它需要開發(fā)者具備全面的專業(yè)知識、嚴謹?shù)墓ぷ鲬B(tài)度、縝密的思維以及較高的分析問題、解決問題的能力，而我在很多方面還有欠缺?？傊乙院笠鄬Ｐ难芯寇浖_發(fā)，以更加飽滿的熱情投入到本專業(yè)的學習中去，認真做好每一件事情，爭取得到更多的收獲。參考文獻1. 黃凱,陶宏才. 即時通訊系統(tǒng)服務器端簡要設計[J]. 成都信息工程學院學報,20062. 鐘榮柏. 即時通訊系統(tǒng)在線視頻的研究與實現(xiàn)[J]. 湖北廣播電視大學學報,20073. 張永強,喬世權(quán),孫亮. 企業(yè)級即時通訊系統(tǒng)的設計與實現(xiàn)[J]. 陜西科技大學學報,20084. 雷東升. 網(wǎng)絡即時通訊系統(tǒng)[J]. 計算機與現(xiàn)代化,20085. 肖在昌,楊文暉,劉兵. 基于WebSocket的實時技術(shù)[J]. 電腦與電信,20126. 朱挺. 即時通訊系統(tǒng)的研究與實現(xiàn)分析[J]. 中國新通信,20137. 林妍. 局域網(wǎng)內(nèi)即時通訊系統(tǒng)的設計[J]. 中國新通信,20138. 賴曉京. 基于Html5 WebSocket的即時通訊系統(tǒng)[J]. 電子技術(shù)與軟件工程,20139. 鄭明,沈 威,白 天,劉桂霞,宮雷光. 基于XML的新型即時通訊系統(tǒng)[J]. 吉林大學學報(工學版),201210. 高原. 服務器端javascript技術(shù)研究[J]. 信息與電腦(理論版),201211. 李晶. NodeJS——服務器端JavaScript運行環(huán)境[J]. 程序員,201012. 安靖,[J]. 信息網(wǎng)絡安全. 201113. John of JavaScript. ,200914. Tilkov