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

賈永輝

摘要：該文作者基于SPA編寫了一個web聊天室應用。其視圖層通過React庫編寫，路由通過React Router編寫，數(shù)據(jù)庫選用的是MongoDB，后端使用Express框架。可多人多房間聊天。整個項目前后端解耦，項目模塊化，易調(diào)試，易開發(fā)。

關鍵詞：用戶體驗;SPA;Web app;B/S;React

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2020）11-0042-02

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

1相關技術概述

1.1設計目標及技術可行性分析

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

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

1.2SPA概述

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

1.3前端框架React

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

1.4后端框架Express

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

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

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

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

2項目總體設計

2.1界面設計

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

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

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

2.3前后端交互設計

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

3項目實現(xiàn)

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

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

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

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

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

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

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

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

4項目優(yōu)化

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

4.1項目目錄文件修改

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

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

4.2使用SCSS預編譯器

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

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

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

5總結(jié)

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

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