即時通訊系統(tǒng)的設(shè)計與實現(xiàn)

葉為正，林聲肯，黃立軒，許志明，李 晶

(中山大學新華學院，廣東 廣州 510520)

0 引 言

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，越來越多的人開始使用互聯(lián)網(wǎng)，人們對網(wǎng)絡(luò)即時通訊系統(tǒng)的需求量也越來越大，并且已成為當今人們交流的重要途徑，這使得即時通訊技術(shù)飛速發(fā)展[1-2]。盡管市場上出現(xiàn)了許多第三方即時通訊提供方，如環(huán)信、融云以及騰訊云通信IM等，但自主開發(fā)出一款能在企事業(yè)單位內(nèi)部使用的、進行工作溝通交流的即時通訊系統(tǒng)具有重要意義[3]。文中首先介紹了實現(xiàn)該系統(tǒng)所采用的技術(shù)，并在IntelliJ IDEA與HBuilder開發(fā)環(huán)境下進行編程開發(fā)，然后重點研究整個即時通訊系統(tǒng)的設(shè)計思路、實現(xiàn)方法以及實現(xiàn)效果。

1 相關(guān)技術(shù)

1.1 Nginx與FastDFS

Nginx是一款高性能的Web服務(wù)器[4]，采用多進程的基于事件驅(qū)動的架構(gòu)，全異步的網(wǎng)絡(luò)I/O處理機制，以及極少的進程間切換設(shè)計，使得它能夠同時支持百萬級別的TCP連接[5]。FastDFS是用C語言編寫的一款開源的分布式文件系統(tǒng)[6]。FastDFS是為互聯(lián)網(wǎng)量身定制，充分考慮了冗余備份、負載均衡、線性擴容等機制，并注重高可用、高性能等指標。使用FastDFS可以很容易搭建一套高性能的文件服務(wù)器集群提供文件上傳、下載等服務(wù)[7]。文中采用Nginx+FastDFS搭建圖片服務(wù)器，用于存儲用戶頭像和二維碼等圖片文件。

1.2 MUI框架與HTML5+

MUI框架，是DCloud公司發(fā)布的一款開源框架，是最接近原生App的前端框架[8]。HTML5+是HBulider利用自己的IDE結(jié)合不同平臺的接口再加上HTML5[9]開發(fā)出來的一套框架，它有自己的使用規(guī)范，允許和提供了一些接口和函數(shù)來讓Web[10]開發(fā)者實現(xiàn)原生App所能實現(xiàn)的功能，并且MUI以iOS平臺UI為基礎(chǔ)，補充了Android特有的UI組件[11]。

1.3 Netty框架與SpringBoot框架

Netty是一個性能極高、異步事件驅(qū)動的框架[12]，是一個異步非阻塞的框架。這個框架支持多種通信協(xié)議，包括UDP、TCP以及文件傳輸協(xié)議等[13]。通過使用Netty，對于所有的IO操作，開發(fā)人員都可以主動地或由它內(nèi)部的機制取得結(jié)果[14]。SpringBoot是由Pivotal團隊開發(fā)的全新的開源開發(fā)框架，能夠簡化應(yīng)用Spring開發(fā)項目。最突出的特點是配置方式，大大簡化了Spring應(yīng)用的各個方面。另外SpringBoot能夠集成大量的框架，解決了之前很重要的項目之間包的版本依賴和穩(wěn)定性等問題[15]。

2 平臺系統(tǒng)結(jié)構(gòu)設(shè)計

該平臺采用C/S模式，前端也就是客戶端采用移動應(yīng)用程序的方式，后端采用SpringBoot+Netty作為主要的服務(wù)端，利用Spring MVC的注解創(chuàng)建RESTful Web服務(wù)。移動客戶端與服務(wù)端連接讀寫邏輯處理均是啟動階段通過給邏輯處理鏈Pipeline添加邏輯處理器實現(xiàn)連接數(shù)據(jù)的讀寫邏輯?？蛻舳诉B接成功回調(diào)邏輯處理器channelActive()方法,客戶端/服務(wù)端接收連接數(shù)據(jù)調(diào)用channelRead()方法。寫數(shù)據(jù)調(diào)用writeAndFlush()方法，客戶端與服務(wù)端交互的二進制數(shù)據(jù)傳輸載體為ByteBuf，ByteBuf通過連接的內(nèi)存管理器創(chuàng)建即ctx.alloc().buffer()，通過writeBytes()方法將字節(jié)數(shù)據(jù)填充到ByteBuf寫到對端。Netty客戶端與服務(wù)端通信流程如圖1所示。

圖1 Netty客戶端與服務(wù)端通信流程

3 平臺功能模塊設(shè)計

客戶端模塊設(shè)計：用戶通過登錄或者注冊進入到App時，首先會進入到聊天頁面，通過底部導航進入發(fā)現(xiàn)頁進行好友添加操作，當好友添加成功，在通訊錄中即可顯示已添加的好友，點擊頭像跳轉(zhuǎn)至聊天頁面。在個人信息頁，可以進行頭像、昵稱的修改以及退出登錄。平臺功能模塊設(shè)計如圖2所示。

4 系統(tǒng)的數(shù)據(jù)庫設(shè)計

經(jīng)過對即時通訊系統(tǒng)的設(shè)計和功能需求分析，建立了關(guān)系數(shù)據(jù)庫的實體-關(guān)系模型，確定數(shù)據(jù)庫里用戶、通訊錄好友、好友請求、聊天信息實體。每個實體對應(yīng)一個數(shù)據(jù)表，具有多個字段屬性。

圖2 平臺功能模塊設(shè)計

4.1 系統(tǒng)實體設(shè)計

該系統(tǒng)將MySQL數(shù)據(jù)庫作為后臺數(shù)據(jù)庫，創(chuàng)建的后臺數(shù)據(jù)庫名稱為IMDB，包括4個表：用戶信息表、通訊錄好友信息表、好友請求記錄表、聊天信息表，如表1所示。

表1 即時通信系統(tǒng)中的表

4.2 數(shù)據(jù)表設(shè)計

在對系統(tǒng)需求和實際情況分析的基礎(chǔ)上，對每個表的字段名、數(shù)據(jù)類型、完整性約束信息進行定義，便于各類資源的信息的存儲和數(shù)據(jù)檢索。系統(tǒng)數(shù)據(jù)表詳細情況如表2～表5所示。

表2 用戶信息

表3 通訊錄好友信息

表4 好友請求信息

表5 聊天信息

5 平臺功能設(shè)計與實現(xiàn)

5.1 關(guān)鍵技術(shù)

即時通訊APP開發(fā)主要包含兩個部分：移動客戶端和Java Web后臺服務(wù)端。客戶端的聊天功能通過WebSocket與后端數(shù)據(jù)進行交互，其他功能均采用MUI提供的Ajax與后端數(shù)據(jù)進行交互。

5.2 登錄模塊

用戶第一次進入該系統(tǒng)時，輸入用戶名和密碼，后端接收到用戶輸入的信息后，會判斷數(shù)據(jù)庫中是否存在該用戶，若不存在則自動注冊后登錄，并將用戶的信息通過H5+提供的API接口plus.storage.setItem(key，value)方法存儲在本地數(shù)據(jù)存儲區(qū)。當用戶打開該軟件時，系統(tǒng)會自動通過plus.storage.getItem(key)方法獲取應(yīng)用存儲的值進行登錄操作。

5.3 個人信息模塊

在個人信息模塊中，主要有查看頭像、昵稱、賬號、我的二維碼與退出登錄等功能。點擊頭像即可查看頭像、下載頭像與上傳頭像。上傳頭像時，系統(tǒng)會調(diào)用開源圖片裁剪插件Cropper進行圖片的裁剪，通過前端傳過來的base64字符串,然后轉(zhuǎn)換為文件對象再上傳到FastDFS，將拼接好的圖片url寫入用戶對象，最后調(diào)用MyBatis對該用戶對象進行更新操作。二維碼是用戶注冊時后端使用谷歌開源項目zxing所生成的，點擊二維碼，即可查看二維碼或者下載二維碼，其他用戶可以通過發(fā)現(xiàn)頁的掃一掃功能實現(xiàn)添加好友的功能。點擊退出登錄，即可將用戶的信息從系統(tǒng)中清除，跳轉(zhuǎn)到登錄模塊。個人信息頁面如圖3所示。

圖3 個人信息頁面

5.4 發(fā)現(xiàn)模塊

本模塊主要有添加好友與掃一掃功能，輸入好友的賬號即可實現(xiàn)好友請求的發(fā)送。在掃一掃中也可以通過掃描好友的二維碼進行添加好友的請求。通過H5+API中的Barcode模塊完成二維碼的掃描識別功能，獲得碼數(shù)據(jù)及碼類型，再使用mui.ajax(url[,settings])將myUserId與friendUsername傳遞至后端，或者直接通過添加好友將數(shù)據(jù)傳遞至后端，后端根據(jù)friendUsername將朋友信息通過mybatis操作數(shù)據(jù)庫查詢出這個Users對象，然后再查詢發(fā)送好友請求記錄表(friends_request)，如果sendUserId和acceptUserId沒有關(guān)聯(lián)，則建立關(guān)聯(lián)關(guān)系，實現(xiàn)發(fā)送添加好友的請求。在對方登錄系統(tǒng)后，如果忽略好友請求，則直接刪除好友請求的數(shù)據(jù)庫表記錄，如果是通過好友請求，則互相增加好友記錄到數(shù)據(jù)庫對應(yīng)的表，然后刪除好友請求的數(shù)據(jù)庫表記錄。發(fā)現(xiàn)頁面如圖4所示。

圖4 發(fā)現(xiàn)頁面

5.5 通訊錄模塊

該模塊使用MUI的Ajax將該用戶的id傳至后端，獲取所有好友列表，通過words.convertPinyin(friend.friendNickname)將好友的昵稱轉(zhuǎn)化成拼音，截取拼音的首字母，構(gòu)建通訊錄html進行渲染。當用戶下一次打開通訊錄，直接從緩存中獲取聯(lián)系人列表渲染到頁面。對好友通訊錄批量綁定點擊事件，當用戶點擊某個好友，即會打開聊天頁面，并攜帶相應(yīng)的用戶參數(shù)。通訊錄列表頁面如圖5所示。

5.6 聊天模塊

在該模塊的后端主要有兩個類：WebSocket服務(wù)端啟動類WSServer與處理類ChatHandler。聊天列表頁面如圖6所示。

圖5 通訊錄列表頁面

圖6 聊天列表頁面

在WSServer中，由于WebSocket是基于http協(xié)議的，所以要通過pipeline.addLast(new HttpServerCodec())來添加http編解碼器，此外，還要增加心跳支持以及httpWebsocket支持，最后增加自定義的處理類Chathandler以及心跳處理類HeartBeatHandler。在Chathandler中，它繼承了SimpleChannelInboundHandler類，在Netty中，是用于為WebSocket專門處理文本的對象，frame是消息的載體。聊天模塊實現(xiàn)的業(yè)務(wù)邏輯如下：

步驟1：獲取客戶端傳輸過來的消息。

通過msg.text()獲取客戶端傳輸過來的消息,通過ctx.channel()獲取當前的channel，并將客戶端傳遞至后端的json字符串轉(zhuǎn)換成相應(yīng)的DataContent數(shù)據(jù)內(nèi)容對象。

步驟2：通過數(shù)據(jù)內(nèi)容對象中action屬性與后端的枚舉類中的屬性進行對比判斷消息類型，并根據(jù)不同的類型來處理不同的業(yè)務(wù)。

(1)當websocket第一次open的時候，初始化channel，把用的channel和userid關(guān)聯(lián)起來。

(2)若是聊天類型的消息時，就把聊天記錄保存到數(shù)據(jù)庫，同時標記消息的簽收狀態(tài)為“未簽收”。發(fā)送消息，即從全局用戶Channel關(guān)系中獲取接受方的channel，若channel為空代表用戶離線。當接受方receiverChannel不為空的時候，從ChannelGroup去查找對應(yīng)的channel是否存在，當用戶在線時，通過writeAndFlush推送消息。

(3)若是簽收消息類型，就針對具體的消息進行簽收，修改數(shù)據(jù)庫中對應(yīng)消息的簽收狀態(tài)“已簽收”。

(4)若是心跳類型，則打印輸出相應(yīng)的心跳包數(shù)據(jù)。

步驟3：當觸發(fā)handlerRemoved或發(fā)生異常，ChannelGroup會自動移除對應(yīng)客戶端的channel。若心跳處理類HeartBeatHandler類中的IdleStateEven為讀寫空閑時，也會關(guān)閉無用的channel，以防資源浪費。

6 系統(tǒng)測試與運行

該平臺開發(fā)完成后，該系統(tǒng)服務(wù)端部署MacOS，并將Nginx+FastDFS圖片服務(wù)器部署在CentOS6.5中。在小米8手機(四核，高通驍龍845，運行內(nèi)存6 GB，6.21英寸屏幕，Android OS v8.0)以及iPhone 8手機(六核，蘋果A11+M1協(xié)處理器，運行內(nèi)存2 GB，4.7英寸屏幕，iOS v10)中對各項功能進行了測試，客戶端運行良好，可以實現(xiàn)登錄注冊、修改個人信息、添加好友以及聊天的功能。

7 結(jié)束語

研究了基于Netty+SpringBoot的即時通訊系統(tǒng)的設(shè)計與實現(xiàn)，采用了HBuilder和IntelliJ IDEA開發(fā)了即時通訊系統(tǒng)，通過HBuilder開發(fā)出來的應(yīng)用可生成適用于安卓與蘋果系統(tǒng)的安裝包，節(jié)約了開發(fā)人員同時開發(fā)不同客戶端的成本，實現(xiàn)了基本的數(shù)據(jù)通信,可以滿足日常的通信需求。