馬行健

（廣西科技大學(xué) 國際教育學(xué)院，廣西 柳州 545000）

0 引言

基于微信良好的生態(tài)圈和龐大的用戶群體，小程序的移動端應(yīng)用開發(fā)數(shù)量和用戶規(guī)模也實現(xiàn)了快速增長，究其原因主要在于：開發(fā)成本低、推廣方便、跨平臺、免安裝。為了提高競爭力，各行業(yè)的軟件系統(tǒng)大都在原有的架構(gòu)上增加了微信小程序端。房源網(wǎng)小程序是一款集新房、二手房、出租房等信息查詢，樓盤及房屋信息展示，在線咨詢，變價與開盤提醒等功能于一體的微信小程序，它是線上房產(chǎn)信息管理平臺的一個子系統(tǒng)，被最終客戶和房產(chǎn)經(jīng)紀(jì)人使用。

在微信小程序中實現(xiàn)即時通信有兩種途徑，一是購買包括微信在內(nèi)的第三方通信模塊的服務(wù)，然后通過調(diào)用其開放的接口進(jìn)行二次開發(fā)而實現(xiàn)。二是搭建自己的即時通信服務(wù)器，利用WebSocket技術(shù)實現(xiàn)雙方的聊天功能。二者各有利弊：前者技術(shù)成熟，實現(xiàn)起來較簡單，但信息安全性差，難以實現(xiàn)大數(shù)據(jù)分析；后者需要團(tuán)隊具備一定的開發(fā)能力，開發(fā)周期較長，但其聊天信息保存在自己的服務(wù)器中，安全性較高，不易被其他公司竊取，且可以利用長期、海量的聊天數(shù)據(jù)統(tǒng)計分析不同類型的客戶需求，找出客戶偏好，從而更好地引導(dǎo)客戶，為其提供個性化服務(wù)，從而提高客戶滿意度和成交量。

本文將通過第二種途徑設(shè)計微信小程序的體系結(jié)構(gòu)，使其具備即時通訊功能，并通過實驗驗證其有效性。

1 系統(tǒng)整體結(jié)構(gòu)設(shè)計

線上房產(chǎn)信息管理平臺是一個包含To B和To C兩端的綜合軟件系統(tǒng)，既支持房產(chǎn)中介的B端管理員和經(jīng)紀(jì)人用戶使用，又支持最終買房或租房的客戶使用。該系統(tǒng)包括了新房信息管理、二手房信息管理、權(quán)限管理、地域管理、即時通訊、大數(shù)據(jù)分析等模塊。B端用戶使用PC機(jī)的瀏覽器來訪問網(wǎng)站，從而實現(xiàn)基礎(chǔ)信息維護(hù)、權(quán)限分配、大數(shù)據(jù)分析等功能。C端用戶通過微信小程序和微信公共號進(jìn)行房源信息查詢、詳情瀏覽、系統(tǒng)登錄、關(guān)注房源、線上咨詢等。該系統(tǒng)的功能模塊如圖1所示。

圖1 系統(tǒng)功能模塊圖

整個系統(tǒng)的網(wǎng)絡(luò)體系結(jié)構(gòu)由三臺服務(wù)器和兩類客戶端組成（見圖2）。三臺服務(wù)器分別是應(yīng)用程序服務(wù)器（APP Server），數(shù)據(jù)庫服務(wù)器（DataBase Server）和即時通信服務(wù)器（WebSocket Server）。其中程序服務(wù)器主要完成系統(tǒng)的業(yè)務(wù)處理工作；數(shù)據(jù)庫服務(wù)器負(fù)責(zé)系統(tǒng)的數(shù)據(jù)持久化存儲，包括樓盤信息、房屋信息、用戶信息、權(quán)限信息、聊天信息等；即時通信服務(wù)器負(fù)責(zé)監(jiān)聽來自客戶的消息，并將消息及時、準(zhǔn)確地推送到消息接收方。兩類客戶端分別是PC端的Web應(yīng)用程序和Mobile端的微信小程序與微信公共號。PC端主要用于后臺管理，與應(yīng)用程序服務(wù)器實現(xiàn)雙向通訊，既可以將樓盤、房屋、權(quán)限等基本信息保存到服務(wù)器中，也可以從服務(wù)器端獲取數(shù)據(jù)，展示到客戶端。Mobile端主要用于最終客戶瀏覽房屋信息，與房源經(jīng)紀(jì)人進(jìn)行在線交流，查看未讀消息等操作。Mobile端既要和應(yīng)用程序服務(wù)器通信，獲取房屋信息或者發(fā)送聊天內(nèi)容，也可與WebSocket服務(wù)器通信，接收其推送的聊天信息。

圖2 系統(tǒng)體系結(jié)構(gòu)圖

2 即時通信原理及服務(wù)器搭建

即時通信是指消息能夠通過服務(wù)器的轉(zhuǎn)發(fā)即時推送到一個或多個消息接收者那里，它與電子郵件的不同之處在于它的交談是實時的。本文采用WebSocket技術(shù)實現(xiàn)即時通信。WebSocket技術(shù)本質(zhì)上是一個基于TCP協(xié)議的面向連接的、可靠的標(biāo)準(zhǔn)通信協(xié)議?？蛻舳送ㄟ^JavaScript向服務(wù)器發(fā)出建立WebSocket連接的請求，成功建立連接后，客戶端和服務(wù)器就可以通過TCP連接進(jìn)行數(shù)據(jù)的傳輸與交換?；赪ebSocket協(xié)議可以實現(xiàn)一對一通信，也可以實現(xiàn)多人聊天室功能。在這種模式下，一旦客戶端與服務(wù)器建立連接，服務(wù)器就會將其保存到聯(lián)系人列表中，只要有發(fā)給該聯(lián)系人的消息到達(dá)，WebSocket服務(wù)器就會立即轉(zhuǎn)發(fā)給客戶端，彼此都能主動向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)，而且是在必要的時候才發(fā)起會話，有效避免了輪詢帶來的弊端。

本文采用Node.JS中的Express框架和Socket.IO進(jìn)行服務(wù)端環(huán)境的搭建。由于Express屬于Web框架，需要引用HTTP模塊；而Socket.IO是WebSocke通信協(xié)議中的庫，通過進(jìn)行兼容性配置，使得本系統(tǒng)既可以支持Express，又可以支持Socket.IO。關(guān)鍵代碼如下：

const express=require（'express'）

const app=express（）；

const port=3000；

var server=app.listen（8002）；

var io=require（'socket.io'）.listen（server）；

io.on（'connection'，（socket）=＞{

console.log（'socket連接成功！'）；

}）；

app.ge（t'/'，（req，res）=＞{

res.send（'由服務(wù)器發(fā)送的消息！'）

}）

app.listen（port，（）=＞{

console.log（`監(jiān) 聽 發(fā) 送 給http：//192.168.0.4：${port}的信息！`）

}）

3 即時通信模塊的實現(xiàn)邏輯

本文中即時通信模塊的實現(xiàn)邏輯主要涉及微信小程序、APP Server、WebSocket Server，數(shù)據(jù)存儲和未讀消息提醒的實現(xiàn)涉及DataBase Server和微信公共號。在通信過程中，用戶首先登陸微信小程序并同時與WebSocket Server建立連接，在此基礎(chǔ)上該小程序用戶可以隨時接收來自于WebSocket Server的消息。假設(shè)現(xiàn)在有4個小程序用戶，即客戶1、客戶2、客戶3、客戶4，其狀態(tài)分別是：

客戶1在線，并已打開聊天窗口；

客戶2不在線，未登錄小程序；

客戶3在線，但未進(jìn)入聊天窗口；

客戶4在線，并已進(jìn)入聊天窗口。

如果客戶1分別給客戶2、客戶3、客戶4發(fā)送消息，實現(xiàn)邏輯圖3所示。

圖3 本文中WebSocket的通信邏輯

圖3中，客戶1進(jìn)入聊天頁面首先向APP Server發(fā)送請求獲取當(dāng)前會話用戶的最新幾條聊天記錄，向下滑動可加載更多。然后，點擊發(fā)送按鈕將最新的聊天消息發(fā)送給APP Server，APP Server先將這條消息保存到數(shù)據(jù)庫中，接下來判斷消息接收方是否登錄小程序：如果已登錄，就將這條消息轉(zhuǎn)發(fā)給WebSocket Server；如果未登錄，就調(diào)用微信公共號將該消息作為“未讀消息提醒”發(fā)給對方，并給消息發(fā)送方發(fā)送“成功”或“失敗”的響應(yīng)結(jié)果。當(dāng)WebSocket Server接收到消息時，將該消息發(fā)送給接收方，如果接收方正處于聊天窗口，就可以直接在小程序中接收并顯示該消息；如果接收方登錄系統(tǒng)但未處于聊天窗口，那么接收方可以在“消息”按鈕中獲得明顯的新消息提醒標(biāo)志。

4 即時通信原型系統(tǒng)的構(gòu)建

在微信小程序中，即時通信功能涉及到的文件主要有3個，小程序入口文件app.js、聊天列表文件和聊天窗口文件。在小程序入口文件中主要完成小程序與即時通信服務(wù)器的連接和各種事件監(jiān)聽的注冊，主要包括連接出錯、接收到新消息、關(guān)閉連接等事件的處理程序定義，其中重要的事件監(jiān)聽是wx.onSocketMessage，用來定義接收到新消息后執(zhí)行的數(shù)據(jù)處理。app.js文件中的關(guān)鍵代碼如下：

//連接WebSocket服務(wù)器，并定義事件監(jiān)聽

connectWebSocket（handler）{

……

wx.connectSocket（{

url:url，

method:'GET'，

success:function（res）{

isConnect:true

}，

fail:function（err）{

isConnect:false

}

}）;

wx.onSocketError（function（res）{

_this.connectWebSocket（）;

}）;

wx.onSocketMessage（

（result）=＞{

handler（result）

}

）;

wx.onSocketClose（function（res）{

if（res.code!=1000）{//等于1000的時候是在退出的時候，主動調(diào)用關(guān)閉連接的方法斷開連接，所以不用再重新連接

_this.connectWebSocket（handler）;

}

}）

}，

//處理新消息

handlerMess（result）{

wx.setTabBarItem（{

index:1，

text:"有新消息"，

iconPath: "/images/new_message.png"

}）

}，

聊天列表頁主要用于展示最近與該用戶的聊天記錄，并按時間排序，對于未讀消息以紅色的小圓點在頭像的右上方展示。該頁面的數(shù)據(jù)是微信小程序向APP Server發(fā)送請求，獲取消息列表，前端關(guān)鍵代碼如下：

//如果userId的值不是空值，則從后臺請求新的未讀消息列表

if（userId!=""）{

app.getAjax（"chat/getusers"+params，

（res）=＞{

let messageList=res.data.result.result；

if（messageList.length＞0）{

this.setData（{

messageList，

}）；

}else{

this.setData（{

messageList：[]，

}）；

}

}，（err）=＞{

console.log（err）

}）；

//關(guān)閉在app.js文件中建立的連接

wx.closeSocke（t{

code：1000，

}）

//注冊socket新的監(jiān)聽方法，處理本頁面要執(zhí)行的操作

app.connectWebSocket（that.handler－Mess）；

}

聊天頁面主要涉及信息發(fā)送、新消息接收和頁面布局三個方面。信息發(fā)送主要由微信小程序先將信息發(fā)送給APP Server，將聊天信息保存到數(shù)據(jù)庫后再由WebSocket Server發(fā)送給消息接收方。而消息接收主要通過wx.onSocketMessage來監(jiān)聽并接收。

5 結(jié)語

本文提出的基于WebSocket技術(shù)實現(xiàn)房源網(wǎng)微信小程序中客戶與房產(chǎn)經(jīng)紀(jì)人之間的即時通信功能，通過上述實驗得以驗證，具有實時性、高效性和穩(wěn)定性，應(yīng)用效果較好，并能夠在類似軟件項目中進(jìn)行推廣和應(yīng)用。