武永建

(北京工業(yè)職業(yè)技術(shù)學(xué)院 圖書館，北京 100042)

0 引言

從當(dāng)前國(guó)際國(guó)內(nèi)的新冠肺炎疫情發(fā)展情況來(lái)看，疫情防控將會(huì)是一項(xiàng)長(zhǎng)期的、常態(tài)化的任務(wù)[1]。高校是一個(gè)人員集中，各種活動(dòng)較多的場(chǎng)所，疫情防控任務(wù)更為嚴(yán)峻和突出[2]。根據(jù)衛(wèi)生部門的要求，場(chǎng)所的人數(shù)控制是防控工作中的一個(gè)重要環(huán)節(jié)。

目前，高校廣泛使用的校園一卡通通過(guò)共同的身份認(rèn)證機(jī)制，實(shí)現(xiàn)了數(shù)據(jù)管理的集成與共享[3]。高校各樓宇的門禁系統(tǒng)以校園一卡通為基礎(chǔ)數(shù)據(jù)，進(jìn)行了同步與二次開發(fā)使用。樓宇門禁系統(tǒng)已經(jīng)是校園各個(gè)場(chǎng)所的一個(gè)標(biāo)配裝置，但目前僅應(yīng)用于人員的進(jìn)出控制。在當(dāng)前嚴(yán)峻的疫情防控形勢(shì)下，可以充分利用門禁系統(tǒng)的后臺(tái)數(shù)據(jù)，實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)的變化，統(tǒng)計(jì)在場(chǎng)人員數(shù)量，以數(shù)據(jù)可視化形式在場(chǎng)所進(jìn)出口大屏上展示[4]，以引起進(jìn)入人員的關(guān)注；同時(shí)設(shè)置警戒值，當(dāng)人員數(shù)量達(dá)到警戒值后，以醒目信息發(fā)出警示，為疫情防控、部門協(xié)作提供輔助和決策支持,為學(xué)生的校園生活和自我防護(hù)提供服務(wù)指引。

筆者以北京工業(yè)職業(yè)技術(shù)學(xué)院圖書館為例，設(shè)計(jì)一個(gè)實(shí)時(shí)在館人數(shù)顯示預(yù)警平臺(tái)，利用Socket.io實(shí)時(shí)通信技術(shù)，主動(dòng)推送門禁進(jìn)出動(dòng)態(tài)數(shù)據(jù)，并以可視化數(shù)據(jù)直觀的視角，協(xié)助管理人員限制圖書館人員流量過(guò)度集中，以達(dá)到疫情防控的目的。

1 平臺(tái)分析

1.1 門禁系統(tǒng)工作流程和實(shí)時(shí)數(shù)據(jù)獲取分析

無(wú)論是傳統(tǒng)的刷卡、指紋門禁，還是識(shí)別技術(shù)更為先進(jìn)的刷臉測(cè)溫門禁，它們的工作原理大致為：門禁讀取進(jìn)入人員數(shù)據(jù)向服務(wù)器發(fā)出認(rèn)證請(qǐng)求，服務(wù)器從數(shù)據(jù)庫(kù)查詢認(rèn)證信息并返回給門禁通過(guò)與否的指令。具體流程如下：(1)門禁讀取進(jìn)入人員的數(shù)據(jù)，若是刷卡門禁，則讀取卡片芯片存儲(chǔ)的人員ID信息；若是指紋和人臉，則讀取生物特征碼，并向門禁服務(wù)器發(fā)送。(2)門禁服務(wù)器獲取數(shù)據(jù)后查詢門禁數(shù)據(jù)庫(kù)。(3)從數(shù)據(jù)庫(kù)人員信息表中讀取權(quán)限標(biāo)志，并返回給門禁，門禁根據(jù)權(quán)限標(biāo)志給予進(jìn)入人員通過(guò)與否的開門指令。(4)門禁服務(wù)器在返回給門禁指令的同時(shí)，會(huì)把人員的通行記錄寫入數(shù)據(jù)庫(kù)的日志表中。

其中第4步是獲取實(shí)時(shí)數(shù)據(jù)的關(guān)鍵環(huán)節(jié)，在該系統(tǒng)Web服務(wù)端實(shí)現(xiàn)中，通過(guò)獲取門禁后臺(tái)數(shù)據(jù)庫(kù)訪問(wèn)權(quán)限，監(jiān)視第4步中日志表數(shù)據(jù)變化，通過(guò)秒級(jí)輪詢機(jī)制查詢出最近門禁通過(guò)者信息，同時(shí)匯總進(jìn)入人員數(shù)量，返回給前端，完成門禁實(shí)時(shí)數(shù)據(jù)的獲取。

1.2 Web服務(wù)器端數(shù)據(jù)主動(dòng)推送技術(shù)分析

該系統(tǒng)采用B/S架構(gòu)來(lái)滿足大屏、PC和手機(jī)端的查詢與展示，頁(yè)面所需的數(shù)據(jù)需要Web服務(wù)器即時(shí)主動(dòng)地推送到瀏覽器。

在B/S架構(gòu)中，傳統(tǒng)的瀏覽器通信方式是基于HTTP協(xié)議的請(qǐng)求/響應(yīng)模式，在這種模式下，只能通過(guò)刷新瀏覽器來(lái)更新服務(wù)器端的數(shù)據(jù)。隨著Web技術(shù)的不斷發(fā)展，Ajax技術(shù)采用異步的方式能夠更新頁(yè)面部分區(qū)域，雖然不用刷新瀏覽器，但仍然需要客戶端主動(dòng)請(qǐng)求才能獲取服務(wù)器應(yīng)答的數(shù)據(jù)，而服務(wù)器端有數(shù)據(jù)變化后，無(wú)法通過(guò)推送方式主動(dòng)告訴客戶端數(shù)據(jù)的變化。

隨著網(wǎng)絡(luò)的發(fā)展和需求的變化，越來(lái)越多的應(yīng)用場(chǎng)景需要以服務(wù)器端即時(shí)推送的通信方式把數(shù)據(jù)主動(dòng)推送給瀏覽器。HTML5出現(xiàn)后，http補(bǔ)充了一個(gè)新的協(xié)議WebSocket，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工(Full Duplex)通信，全雙工通信允許數(shù)據(jù)在2個(gè)方向上同時(shí)(瞬時(shí))傳輸，這種方式能更好地節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通信的目的。WebSocket協(xié)議雖然已獲主流瀏覽器支持，但仍然可能有不兼容的情況。為此，Socket.io庫(kù)將WebSocket,AJAX和其他的通信方式全部封裝成了統(tǒng)一的通信接口，因而不用擔(dān)心兼容問(wèn)題，底層會(huì)自動(dòng)選用最佳的通信方式，將服務(wù)端的數(shù)據(jù)主動(dòng)推送給客戶端。該平臺(tái)采用Socket.io庫(kù)推送門禁實(shí)時(shí)刷卡數(shù)據(jù)到瀏覽器，實(shí)現(xiàn)刷卡與刷卡者信息同步顯示。

2 平臺(tái)功能

該平臺(tái)基于圖書館門禁管理系統(tǒng)，在進(jìn)出館數(shù)據(jù)的基礎(chǔ)上進(jìn)行二次開發(fā)，通過(guò)充分挖掘這部分?jǐn)?shù)據(jù)的實(shí)用價(jià)值，以實(shí)現(xiàn)圖1所示的功能。

圖1 平臺(tái)功能

平臺(tái)主要功能介紹如下：

(1)在館人員數(shù)量實(shí)時(shí)顯示。進(jìn)出館人員在門禁刷卡后，大屏界面上會(huì)實(shí)時(shí)更新在館人員數(shù)量。當(dāng)達(dá)到預(yù)警值時(shí)，背景會(huì)閃爍提示，提醒防疫值勤人員采取限流措施，限制人員過(guò)度集中。警戒值的設(shè)定與樓宇座位數(shù)相關(guān)，根據(jù)隔位入座的防控要求，一般為樓宇座位數(shù)的一半。

(2)進(jìn)出館人員信息實(shí)時(shí)顯示。界面會(huì)顯示最近出館人員和進(jìn)館人員的信息，為充分保障個(gè)人隱私，學(xué)號(hào)、姓名中部分用‘*’號(hào)替代。

(3)在館人員類型結(jié)構(gòu)分析。以部門隸屬關(guān)系為標(biāo)準(zhǔn)劃分進(jìn)出人員分組，掌握進(jìn)館人員的組成結(jié)構(gòu)，作為防控分析的一個(gè)數(shù)據(jù)來(lái)源。

(4)進(jìn)館動(dòng)態(tài)曲線圖。采用時(shí)序數(shù)據(jù)可視化方案。隨著時(shí)間的變化，動(dòng)態(tài)曲線圖顯示以分鐘為單位的在館人員數(shù)量變動(dòng)趨勢(shì)，直觀判斷每天的入館人數(shù)高峰，為防疫工作提供指引。

(5)手機(jī)端查詢。以嵌入微信公眾號(hào)菜單的方式，讀者可用手機(jī)端查詢圖書館目前人數(shù)與警戒值的差額，讀者根據(jù)差額決定是否去圖書館。

3 平臺(tái)設(shè)計(jì)

3.1 平臺(tái)結(jié)構(gòu)

由于多終端界面的實(shí)時(shí)查詢和顯示是該系統(tǒng)的一個(gè)顯著需求，因此，該平臺(tái)采用了B/S架構(gòu)[5]。B/S架構(gòu)在處理模式上大大簡(jiǎn)化了客戶端，用戶只需安裝瀏覽器即可。另外隨著Web相關(guān)技術(shù)的發(fā)展，特別是Chrome V8引擎的誕生[6]，大大提高了JavaScript的執(zhí)行效率，使得前端具備了更多的終端業(yè)務(wù)處理能力，B/S 架構(gòu)具有了更廣的應(yīng)用范圍。同時(shí)，因?yàn)榭蛻舳耸褂脼g覽器，在開發(fā)維護(hù)上更加便利，可以減少系統(tǒng)開發(fā)和維護(hù)的成本。

在該平臺(tái)中，Web服務(wù)器程序定時(shí)查詢數(shù)據(jù)庫(kù)，返回的結(jié)果轉(zhuǎn)為JSON格式，同時(shí)，服務(wù)器使用Socket.io與客戶端建立實(shí)時(shí)通信通道，把上述JSON格式數(shù)據(jù)主動(dòng)推送給建立連接的客戶端?？蛻舳说玫綌?shù)據(jù)后更新頁(yè)面可視化組件。平臺(tái)結(jié)構(gòu)如圖2所示。

圖2 平臺(tái)結(jié)構(gòu)圖

3.2 門禁系統(tǒng)數(shù)據(jù)分析

圖書館門禁采用上海盛卡恩公司的產(chǎn)品，后臺(tái)采用sql server數(shù)據(jù)庫(kù)，進(jìn)出館人員的每一次刷卡，門禁數(shù)據(jù)庫(kù)就會(huì)寫入1條記錄到visit_status表，實(shí)時(shí)記錄人員進(jìn)出情況，如表1所示。另一張表icreader則保存了從校園一卡通同步過(guò)來(lái)的用戶信息，如表2所示。

表1 visit_status表

表2 icreader表

匯總表1表2的查詢結(jié)果，并把查詢結(jié)果交給業(yè)務(wù)邏輯處理，然后把處理的數(shù)據(jù)傳送給前端Web頁(yè)面做可視化顯示。

3.3 Web服務(wù)器端數(shù)據(jù)庫(kù)輪詢

服務(wù)端程序采用輪詢機(jī)制，每隔3 s向數(shù)據(jù)庫(kù)發(fā)出查詢，一旦數(shù)據(jù)表記錄有寫入，將查詢出的最新數(shù)據(jù)封裝成JSON格式，并以事件形式向每個(gè)客戶端發(fā)出廣播?？蛻舳藶g覽器監(jiān)聽事件，獲取廣播的數(shù)據(jù)并更新到DOM視圖。服務(wù)端輪詢查詢偽代碼如下：

const POLLING_INTERVAL=3000

function pollingLoop(){

request.query('select * from test_user')

request.on('row', row => {

users.push(row);

})

request.on('done', result => {

if (connectionsArray.length) {

pollingTimer = setTimeout(pollingLoop, POLLING_INTERVAL);

updateSockets({

students: students

});

})

}

3.4 建立實(shí)時(shí)通信連接

該平臺(tái)采用Socket.io實(shí)現(xiàn)瀏覽器和服務(wù)器之間實(shí)時(shí)、雙向和基于事件的通信，在服務(wù)器端的業(yè)務(wù)邏輯中，服務(wù)器等待客戶端的連接，一旦有客戶端瀏覽器接入，便建立雙向的持久通信連接,并向其推送數(shù)據(jù)，直到客戶端關(guān)閉瀏覽器，通信才會(huì)中止。服務(wù)端用數(shù)組維護(hù)接入的客戶端，用客戶端ID標(biāo)識(shí)每一個(gè)接入的連接。

瀏覽器利用Socket.io客戶端建立與服務(wù)端Socket.io的連接，并監(jiān)聽數(shù)據(jù)更新事件，數(shù)據(jù)到達(dá)后進(jìn)行更新人員數(shù)量、動(dòng)態(tài)曲線及進(jìn)出館人員信息的視圖。服務(wù)器端代碼如下：

var updateSockets = function(data) {

connectionsArray.forEach(function(tmpSocket) {

tmpSocket.emit('lib_data', data);

});

};

客戶端代碼如下：

var Socket = io.connect('http://ip:8000');

Socket.on('lib_data', function (data) {

//得到推送的數(shù)據(jù)data,更新頁(yè)面視圖

}

3.5 多終端數(shù)據(jù)可視化顯示

數(shù)據(jù)可視化能夠有效提升數(shù)據(jù)的可見度與可訪問(wèn)性，使人們易于接受和理解，系統(tǒng)采用了Echarts可視化庫(kù)增強(qiáng)入館讀者對(duì)人員流量感知。Apache Echarts是由百度出品的一個(gè)免費(fèi)、強(qiáng)大的圖表和可視化庫(kù)，它基于ZRENDER并用純粹的JavaScript編寫而成，可為Web頁(yè)面添加直觀、互動(dòng)和高度可自定義的圖表。頁(yè)面使用Echarts實(shí)現(xiàn)可視化圖例[7]，主要由實(shí)時(shí)館人員數(shù)量?jī)x表盤、在館人員以二級(jí)學(xué)院分組的結(jié)構(gòu)柱狀圖和基于時(shí)間坐標(biāo)軸的動(dòng)態(tài)曲線構(gòu)成。

在多終端跨界頁(yè)面顯示需求下，需要采用不同的方案分別設(shè)計(jì)大屏、PC端和手機(jī)端的正常可視化顯示。

3.5.1 數(shù)據(jù)可視化大屏和PC端的顯示適配方案

大屏的數(shù)據(jù)可視化要實(shí)現(xiàn)全屏顯示，首先要去掉瀏覽器的附加部分(地址欄、導(dǎo)航欄、tab欄等)的尺寸。其次，設(shè)計(jì)頁(yè)面時(shí)，頁(yè)面內(nèi)容的尺寸不能超過(guò)視窗的大小，以防出現(xiàn)滾動(dòng)條。第三，目前主流的液晶顯示器分辨率為1 920×1 080，而大屏的分辨率遠(yuǎn)遠(yuǎn)大于臺(tái)式機(jī)液晶顯示器，一般為2 560×1 440,4 096×2 160或更高。數(shù)據(jù)可視化大屏和PC端可采用如下設(shè)計(jì)：設(shè)計(jì)稿采用1 920×1 080分辨率模式適配PC端，因高寬比率滿足16:9，因此可采用動(dòng)態(tài)獲取縮放系數(shù)進(jìn)行等比例放大，來(lái)滿足1 920×1 080以上的分辨率，即大屏的顯示適配。代碼如下：

resize() {

const designwidth=1920 ,designheight=1080

let w = window.innerWidth / designwidth

let h = window.innerHeight / designheight

let scale = w < h ? w : h

let body = document.body

body.style.transform='scale('+scale+')'

body.style.transformOrigin = '0 0'

}

window.addEventLishener('resize',function(){

resize ()

}

resize ()

3.5.2 手機(jī)端查詢適配方案

在小于1 920×1 080分辨率的情況下，利用CSS3的媒體查詢和flex布局，可實(shí)現(xiàn)手機(jī)端的查詢頁(yè)面自適應(yīng)適配方案。在頁(yè)面顯示的默認(rèn)布局里，前半部分布局分成3塊內(nèi)容。手機(jī)端的媒體查詢和自適應(yīng)代碼如下：

.wraper:{

display:flex;

}

@media screen and (min-width: 320px) and (max-width: 480px) {

#inlibcount,#inout,#deptanalysis{

width:100%;

}

}

3.6 多樓宇人數(shù)的實(shí)時(shí)動(dòng)態(tài)顯示

高校中各個(gè)樓宇門禁的配置在很多情況下是由不同部門在不同的時(shí)間完成的，造成了門禁系統(tǒng)品牌和技術(shù)多樣化、后臺(tái)數(shù)據(jù)庫(kù)多源異構(gòu)的現(xiàn)狀。在這種情況下，要即時(shí)獲取多個(gè)門禁系統(tǒng)的實(shí)時(shí)數(shù)據(jù)，服務(wù)器可以對(duì)每一個(gè)門禁后臺(tái)數(shù)據(jù)庫(kù)啟動(dòng)1個(gè)線程，對(duì)其進(jìn)行3 s一次的輪詢。一旦有數(shù)據(jù)查詢到，便使用1個(gè)唯一的消息標(biāo)識(shí)綁定數(shù)據(jù)，由服務(wù)端Socket.io實(shí)例發(fā)送此消息到瀏覽器Socket.io客戶端。消息標(biāo)識(shí)采用“【樓宇名】_data”來(lái)命名，比如：lib_data標(biāo)識(shí)圖書館門禁的數(shù)據(jù)，diningHall_data標(biāo)識(shí)了餐廳門禁的數(shù)據(jù)。瀏覽器啟動(dòng)對(duì)應(yīng)的Socket.io客戶端，對(duì)服務(wù)器發(fā)出的多個(gè)數(shù)據(jù)消息進(jìn)行監(jiān)聽，并在監(jiān)聽的回調(diào)函數(shù)里更新相應(yīng)的頁(yè)面DOM節(jié)點(diǎn)，由此完成針對(duì)多個(gè)樓宇門禁數(shù)據(jù)的實(shí)時(shí)獲取和顯示。多樓宇人數(shù)實(shí)時(shí)動(dòng)態(tài)顯示系統(tǒng)架構(gòu)圖如圖3所示。

圖3 多樓宇人數(shù)實(shí)時(shí)動(dòng)態(tài)顯示系統(tǒng)架構(gòu)圖

4 平臺(tái)實(shí)現(xiàn)

平臺(tái)不僅可以在大屏上展示，也可以在校園網(wǎng)內(nèi)的任何計(jì)算機(jī)和手機(jī)上查看，方便讀者和管理人員遠(yuǎn)程掌握?qǐng)D書館人員流量信息。

4.1 大屏門禁實(shí)時(shí)數(shù)據(jù)可視化的實(shí)現(xiàn)

實(shí)時(shí)顯示預(yù)警平臺(tái)的顯示頁(yè)面由4部分構(gòu)成，如圖4所示。

圖4 樓宇人數(shù)實(shí)時(shí)顯示預(yù)警平臺(tái)顯示頁(yè)面

圖4顯示如下內(nèi)容：(1)在館人數(shù)的實(shí)時(shí)動(dòng)態(tài)變化由儀表盤圖例展示，環(huán)狀顏色隨著在館人員的數(shù)量變化而變化，在達(dá)到警戒值后，顏色呈紅色顯示，并不斷閃爍，以提醒管理人員和進(jìn)出人員注意。(2)顯示頁(yè)面的中間部分顯示了最近入館和最近出館人員的簡(jiǎn)要信息，輔助門禁管控進(jìn)出人員，掌握人員活動(dòng)軌跡。(3)顯示頁(yè)面的柱狀圖部分展示了在館人員的構(gòu)成，主要統(tǒng)計(jì)“機(jī)電工程學(xué)院”“建筑與測(cè)繪工程學(xué)院”“電氣與信息工程學(xué)院”“文法與管理學(xué)院”“基礎(chǔ)教育學(xué)院”5個(gè)學(xué)院的進(jìn)館讀者構(gòu)成。(4)頁(yè)面下半部分的動(dòng)態(tài)曲線圖展示了基于時(shí)間軸順序的進(jìn)館人員數(shù)量變化，從而可以分析一天中哪個(gè)時(shí)段人流量比較集中，是場(chǎng)所人數(shù)控制高度關(guān)注的時(shí)間結(jié)點(diǎn)。

4.2 手機(jī)端查詢的實(shí)現(xiàn)

手機(jī)端查詢以微信公眾號(hào)嵌入鏈接的方式實(shí)現(xiàn)。手機(jī)界面提供了在館人數(shù)實(shí)時(shí)動(dòng)態(tài)變化儀表盤圖例和入館時(shí)序折線圖，如圖5所示。

圖5上半部分提供當(dāng)前時(shí)間的在館人數(shù)和上限值，下半部分描述了在各個(gè)時(shí)間點(diǎn)的人員流量情況。

5 結(jié)論

通過(guò)該平臺(tái)可以將進(jìn)出圖書館門禁的人員數(shù)量實(shí)時(shí)顯示在大屏上，對(duì)進(jìn)出館人數(shù)動(dòng)態(tài)數(shù)量進(jìn)行醒目展示，并通過(guò)顏色變化提示來(lái)館人員注意進(jìn)館人員過(guò)度集中，以達(dá)到在疫情防控中對(duì)人員數(shù)量進(jìn)行控制的目的。同時(shí)，平臺(tái)也提供了移動(dòng)端的查詢供讀者參考。該平臺(tái)尤其適用于圖書館、食堂等人員活動(dòng)集中場(chǎng)所，在各個(gè)樓宇門禁具有配置且獲得授權(quán)訪問(wèn)后臺(tái)數(shù)據(jù)庫(kù)的理想條件下，可實(shí)現(xiàn)多樓宇人流量的實(shí)時(shí)監(jiān)控，助力疫情防控工作。