利用WebSocket技術(shù)實現(xiàn)房源網(wǎng)小程序的即時通信

馬行健

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

0 引言

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

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

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

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

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

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

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

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

2 即時通信原理及服務器搭建

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

本文采用Node.JS中的Express框架和Socket.IO進行服務端環(huán)境的搭建。由于Express屬于Web框架，需要引用HTTP模塊；而Socket.IO是WebSocke通信協(xié)議中的庫，通過進行兼容性配置，使得本系統(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（'由服務器發(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建立連接，在此基礎上該小程序用戶可以隨時接收來自于WebSocket Server的消息。假設現(xiàn)在有4個小程序用戶，即客戶1、客戶2、客戶3、客戶4，其狀態(tài)分別是：

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

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

客戶3在線，但未進入聊天窗口；

客戶4在線，并已進入聊天窗口。

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

圖3 本文中WebSocket的通信邏輯

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

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

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

//連接WebSocket服務器，并定義事件監(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)紀人之間的即時通信功能，通過上述實驗得以驗證，具有實時性、高效性和穩(wěn)定性，應用效果較好，并能夠在類似軟件項目中進行推廣和應用。