基于SPA的web聊天室開發(fā)

賈永輝

摘要：該文作者基于SPA編寫了一個(gè)web聊天室應(yīng)用。其視圖層通過React庫編寫，路由通過React Router編寫，數(shù)據(jù)庫選用的是MongoDB，后端使用Express框架?？啥嗳硕喾块g聊天。整個(gè)項(xiàng)目前后端解耦，項(xiàng)目模塊化，易調(diào)試，易開發(fā)。

關(guān)鍵詞：用戶體驗(yàn);SPA;Web app;B/S;React

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）11-0042-02

隨著計(jì)算機(jī)技術(shù)與網(wǎng)絡(luò)技術(shù)的發(fā)展，Web平臺(tái)以其開發(fā)快捷，更新方便，跨平臺(tái)的優(yōu)點(diǎn)吸引了越來越多的廠商推出了Web應(yīng)用。在此背景下，Web前端承載了比以前更多的業(yè)務(wù)，用戶體驗(yàn)要求也越來越高，使得前端開發(fā)得代碼量呈幾何倍數(shù)上升。而在當(dāng)前較為普遍的開發(fā)模式中，為滿足業(yè)務(wù)擴(kuò)張的需求，開發(fā)人員將代碼如同積木一樣堆積起來，致使系統(tǒng)代碼擴(kuò)展性低，維護(hù)性差。為了提高網(wǎng)站整體的運(yùn)行與開發(fā)效率，需為當(dāng)前的前端開發(fā)引入新的模式。

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

1.1設(shè)計(jì)目標(biāo)及技術(shù)可行性分析

理解到web開發(fā)的痛點(diǎn)，希望基于最新版本的JavaScript，CSS以及新的瀏覽器API，快速開發(fā)出模塊化的、前后端低耦合的web app。

JavaScript庫擁有詳細(xì)的文檔和代碼示例。React，Mon-goDB，Express等庫都有良好的技術(shù)支持，十分契合本系統(tǒng)的開發(fā)工作，因此在技術(shù)上具有可行性。

1.2SPA概述

SPA（單頁面應(yīng)用）類似本地應(yīng)用程序，其優(yōu)點(diǎn)是可以減少資源的重復(fù)請(qǐng)求，提升頁面的打開速度，有助于提升用戶體驗(yàn)。

1.3前端框架React

React起源于Facebook內(nèi)部項(xiàng)目，市場(chǎng)上的JavaScript MVC框架不能滿足Facebook的業(yè)務(wù)需求，決定自研一套，用于架設(shè)Instagram的網(wǎng)站。React設(shè)計(jì)思想十分獨(dú)特，虛擬DOM、組件化、單項(xiàng)數(shù)據(jù)流等利器給前端UI構(gòu)建掀起了一波聲勢(shì)浩大的函數(shù)式新潮流。一切都是Js的思想，不用去記憶很多復(fù)雜的指令。

1.4后端框架Express

Express是一個(gè)基于Node.js平臺(tái)的極簡(jiǎn)、靈活的web應(yīng)用開發(fā)框架。并且基于Express良好的擴(kuò)展性，其周邊的生態(tài)環(huán)境也十分的豐富。能夠讓人在不是特別熟悉后端的情況下，順利完成開發(fā)。

1.5數(shù)據(jù)庫MongoDB

MongoDB作為典型的非關(guān)系型數(shù)據(jù)庫，采用了類JSON的documents來存儲(chǔ)數(shù)據(jù)。

MongoDB采用動(dòng)態(tài)數(shù)據(jù)模型schema，不需要預(yù)先定義數(shù)據(jù)類型和字段名。在更新文檔documents的時(shí)候，可以輕松的增加新的字段名或者刪除舊的字段。并且documents的映射關(guān)系更加貼合了OOP的編程語言。JavaScript也可通過Mongoose庫便捷操作MongoDB。

2項(xiàng)目總體設(shè)計(jì)

2.1界面設(shè)計(jì)

用戶的聊天界面分為header，content，footer三部分，為方便程序編寫，將界面上的每一個(gè)小組件都標(biāo)上了類名。如圖1所示。

2.2數(shù)據(jù)庫UML設(shè)計(jì)

用戶含有屬性：用戶名，用戶密碼，Githubld，創(chuàng)建的房間列表，創(chuàng)建日期。房間含有屬性：房間名，是否為公開，參與者，創(chuàng)建者，創(chuàng)建時(shí)間。用戶和房間是一對(duì)多關(guān)系。如圖2所示。

2.3前后端交互設(shè)計(jì)

前后端交互展示了用戶在界面上進(jìn)行操作，服務(wù)器后端和數(shù)據(jù)庫交互并對(duì)用戶的操作進(jìn)行反饋的過程。輸入項(xiàng)目的URL打開項(xiàng)目，為優(yōu)化用戶的登錄體驗(yàn)，如果用戶之前登錄過，通過cookie驗(yàn)證其身份。如果之前沒有登錄過，讓其跳轉(zhuǎn)到登錄頁面。對(duì)于聊天數(shù)據(jù)，前端也會(huì)保存一部分，用戶發(fā)送的信息通過state變量存儲(chǔ)并且賦值給Talkcontent進(jìn)行頁面渲染，并且將數(shù)據(jù)保存到后端。每一個(gè)用戶初始由一個(gè)默認(rèn)的房間，作為公共的聊天室。用戶可以根據(jù)需要自己新建聊天室，因此，每個(gè)用戶的房間列表各不相同，需通過數(shù)據(jù)庫動(dòng)態(tài)獲取。

3項(xiàng)目實(shí)現(xiàn)

本文作者在實(shí)際開發(fā)的過程中遇到了很多問題，問題類型也多種多樣，所以筆者將就項(xiàng)目開發(fā)中遇到的主要問題進(jìn)行闡述。

3.1數(shù)據(jù)庫的連接

使用MongoDB數(shù)據(jù)庫前，需要為其啟動(dòng)一個(gè)環(huán)境，然后才可以使用mongo的shell工具。另外，MongoDB有默認(rèn)的存儲(chǔ)路徑的，一般是C盤的data/db/，如果沒有，新建該目錄或使用mongod-dbpath[path]來指定數(shù)據(jù)庫存儲(chǔ)的位置即可。

另外，windows c盤下文件夾有權(quán)限限制，mongoDB只有讀的權(quán)限。所以需要修改數(shù)據(jù)庫文件的權(quán)限，使mongoDB能夠訪問。順利啟動(dòng)數(shù)據(jù)庫后，即可進(jìn)行連接操作，因?yàn)閿?shù)據(jù)庫的連接是軟件運(yùn)行的基礎(chǔ)，所以編寫代碼的時(shí)候一定要注意數(shù)據(jù)庫代碼的容錯(cuò)處理，方便及時(shí)修正錯(cuò)誤。連接數(shù)據(jù)庫是一個(gè)異步操作，隨著前端技術(shù)發(fā)展，可以使用普通的回調(diào)函數(shù)的方式處理，也可以使用最新的async/await語法。另外，MongoDB的npm包里面并沒有提供promise的polyfill，為了減小軟件包的體積，防止重復(fù)引用，MongoDB將這一部分的ployfill抽出，讓軟件開發(fā)人員自行引用。

3.2前端發(fā)送數(shù)據(jù)后端卻沒有辦法解析

和MongoBD把promise polyfill抽出類似，Express最新版本也不提供body-parse?，F(xiàn)在這些庫都有一種分離的趨勢(shì)，目的很明顯，就是專注做一件事情。減少冗余代碼，縮小文件體積。功能由開發(fā)者自行添加。這樣做對(duì)于新手略顯不友好，但是長遠(yuǎn)來看，還是有助于軟件開發(fā)的，

3.3接入GITHUB第三方網(wǎng)站登錄

為了良好的用戶體驗(yàn)，讓用戶免去注冊(cè)這些煩瑣的步驟，本文作者提供了第三方登錄的功能。綜合考慮，選擇了GITHUB賬號(hào)認(rèn)證。第三方登錄是基于Oauth 2.0的協(xié)議，驗(yàn)證比Oauthl.0簡(jiǎn)潔，尤其是前端還有passport.js的庫，省了很多大麻煩。

4項(xiàng)目?jī)?yōu)化

該項(xiàng)目開發(fā)模式屬于敏捷開發(fā)，快速迭代。因此對(duì)于該項(xiàng)目修改了多次。

4.1項(xiàng)目目錄文件修改

在文件目錄越來越多，嵌套越來越深的情況下，react官方推薦的將action，redux等分別放在相應(yīng)的actions，redux文件夾已經(jīng)不適合本項(xiàng)目。修改一個(gè)頁面上的行為，很可能要在三四個(gè)文件夾里來回切換，所以需要有一個(gè)更優(yōu)秀的文件結(jié)構(gòu)目錄。

優(yōu)秀的文件目錄，可以讓你清晰的了解項(xiàng)目的結(jié)構(gòu)，并且方便修改代碼。將每個(gè)頁面放在對(duì)應(yīng)文件夾下，即將action，redux，scss都放在一起，對(duì)一個(gè)頁面的改動(dòng)只需要對(duì)一個(gè)文件夾的文件進(jìn)行修改即可。

4.2使用SCSS預(yù)編譯器

CSS擁有著數(shù)量繁多的樣式，以及很多規(guī)范。它作為一種編程語言缺少了一些編程語言該有的靈活性，以及復(fù)用性。因此需要一款CSS預(yù)編譯引擎來增強(qiáng)CSS的能力。

4.3應(yīng)用CSS編碼規(guī)范：BEM

當(dāng)頁面增加，CSS文件也會(huì)隨著頁面的增加而線性的增加。復(fù)雜的CSS文件，會(huì)導(dǎo)致很多的問題，比如樣式之間的沖突，不同元素之間的互相影響，所以就需要通過一些手段來避免這樣的情況。因此CSS研究者們提出了一種BEM方法。他不僅僅是一種CSS語言命名規(guī)范更是一種思想。B代表了block，代表了web應(yīng)用開發(fā)中的組件;E代表了element，元素是塊中的組成部分;M代表了modifier，用來定義塊和元素的外觀和行為。這種方式使得CSS類名層級(jí)十分清楚，類名的功能一目了然。

5總結(jié)

前端作為一個(gè)近幾年大熱的一個(gè)職業(yè)，發(fā)展速度令人咋舌。不斷涌現(xiàn)出來的庫，以及新的思想可能會(huì)讓新手有點(diǎn)目不暇接，高喊：“快別出了，學(xué)不過來了”。但是，這種擔(dān)憂完全是不必要的，也不必在那么多的庫前面感到茫然。這些庫和框架都是幫你解決前端開發(fā)中的痛點(diǎn)，都是功能強(qiáng)大的工具。

雖說前端的發(fā)展是越來越快，但是總體來說，其發(fā)展是有跡可循的。首先是前端的業(yè)務(wù)范圍的變化，從原先的PC端慢慢到現(xiàn)在火熱的移動(dòng)端。從簡(jiǎn)單的h5到可以模仿原生的na-tive應(yīng)用。前端能做的事情越來越多，那么就意味著前端開發(fā)的語言必須要跟著進(jìn)步。