WebIM系統設計方案

一、項目介紹

該項目需要我們實現一個 Web 即時通信系統，即網頁版的聊天程序(Web IM)。如今市面上成熟的Web IM系統已經很多，我們可以參考微信、QQ、釘釘實現一個簡易版的實時聊天系統，系統功能包括：用戶注冊、登錄、修改個人信息；搜索、添加好友；聊天、查看歷史消息等。

二、系統架構

項目采用B/S結構和MVC模式。

B/S（Brower/Server，瀏覽器/服務器）模式又稱B/S結構，是Web興起后的一種網絡結構模式。Web瀏覽器（例如IE、Safari、Chrome等）是客戶端最主要的應用軟件。其優點包括：無需安裝客戶端，有瀏覽器即可使用；部分程序可在客戶端運行，降低服務器的負載；增加了交互性，可局部實時刷新；使服務器的維護和擴展相對更加容易。

MVC即為Model-View-Controller（模型-視圖-控制器），MVC是一種設計模式，以MVC設計模式為主體結構實現的基礎代碼框架一般稱為MVC框架。

MVC中M、V和C所代表的含義如下：

Model（模型）代表一個存取數據的對象及其數據模型。

View（視圖）代表模型包含的數據的表達方式，一般表達為可視化的界面接口。

Controller（控制器）作用於模型和視圖上，控制數據流向模型對象，並在數據變化時更新視圖。控制器可以使視圖與模型分離開解耦合。

 

MVC模式通常用開發具有人機交互界面的軟件，這類軟件的最大特點就是用戶界面容易隨着需求變更而發生改變，例如，當你要擴展一個應用程序的功能時，通常需要修改菜單和添加頁面來反映這種變化。如果用戶界面和核心功能邏輯緊密耦合在一起，要擴展功能通常是非常困難的，因為任何改動很容易在其他功能上產生錯誤。

為了包容需求上的變化而導致的用戶界面的修改不會影響軟件的核心功能代碼，可以采用將模型（Model）、視圖（View）和控制器（Controller）相分離的思想。采用MVC設計模式的話往往決定了整個軟件的主體結構，因此我們稱該軟件為MVC架構。

項目系統架構圖：

 

前端架構圖：

 

后端架構圖：

 

 

三、數據庫設計

user表:保存用戶信息

名稱	類型	允許為空	備注
user_id	int	not	key
username	varchar	not	用戶名
password	varchar	not	密碼
phone	char		手機
email	varchar		郵箱
signature	varchar		簽名
sex	int		性別
portrait	varchar		頭像
birthday	date		生日
registerdate	date		注冊時間

apply表：保存好友申請信息

名稱	類型	允許為空	備注
apply_id	int	not	key
from_id	int	not	發起者id
to_id	int	not	接收者id
msg	varchar		備注消息
applytime	datetime	not	發送申請時間
state	int	not	申請狀態(0表示未處理、1表示已同意、2表示已拒絕)

contact表：保存聯系人/好友信息

名稱	類型	允許為空	備注
contact_id	int	not	key
user_id1	int	not	用戶id1
user_id2	int	not	用戶id2
createdate	datetime	not	創建好友時間

chat表:保存單聊/多聊會話信息

chat_id	int	not	key
type	int	not	標識類型(0表示單聊、1表示群聊)
members_id	int	not	會話成員，由type決定(單聊則對應contact_id，群聊則對應group_id)

message表：保存每一條消息記錄

名稱	類型	允許為空	備注
msg_id	int	not	key
chat_id	int	not	對應會話id
sender_id	int	not	發送者id
receiver_id	int	not	接收者id
content	varchar	not	消息內容
state	int	not	狀態：已讀/未讀
sendtime	datetime	not	發送時間

E-R圖 ：

 

 

四、實現視圖

前端功能模塊划分：

 

后端功能模塊划分：

 

源代碼的目錄文件結構：

下面只展示了登錄模塊的代碼目錄結構。

客戶端(使用vue實現前端頁面)：

 

服務端(使用node實現業務功能)：

 

五、項目視圖

分解視圖：

 

 

系統流程圖：

 

 

工作分配視圖：

 

 

六、運行環境和技術選型

運行環境：windows

開發語言：node.js

前端框架：vue

后端框架：koa

數據庫：Mysql

緩存技術：Redis

 

七、系統概念原型

概念是人對能代表某種事物或發展過程的特點及意義所形成的思維結論。

概念原型是一種虛擬的、理想化的軟件產品形式。

 

項目概念原型的工作流程：

•   用戶在登陸頁面進行注冊、登錄后可以進入系統主頁面；

•   用戶可以在主頁面點擊設置進行個人信息修改，可以查看會話記錄以及管理好友列表；

•   用戶可以與好友發起會話，進行實時聊天（或離線留言），還可以查看會話歷史消息。