基于SPA的web聊天室開發

賈永輝

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

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

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

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

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

1相關技術概述

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

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

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

1.2SPA概述

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

1.3前端框架React

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

1.4后端框架Express

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

1.5數據庫MongoDB

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

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

2項目總體設計

2.1界面設計

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

2.2數據庫UML設計

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

2.3前后端交互設計

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

3項目實現

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

3.1數據庫的連接

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

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

3.2前端發送數據后端卻沒有辦法解析

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

3.3接入GITHUB第三方網站登錄

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

4項目優化

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

4.1項目目錄文件修改

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

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

4.2使用SCSS預編譯器

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

4.3應用CSS編碼規范：BEM

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

5總結

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

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