仿PC版微信的練手項目（可實時通訊）

仿PC版微信的DEMO

本項目是由一個仿PC版微信的vue前端項目，和一個使用leancloud進行數據存儲的、提供WebSocket的node后端項目構成。

本項目使用的技術棧：vue + vue-router + socket.io + leancloud

這是一個自己練手的項目，因為想做一個vue項目，同時又想做一個node.js項目，而且還想試一試WebSocket和leancloud。。。（有點糾結）

項目地址

前端：https://github.com/j20041426/wechat

后端：https://github.com/j20041426/wechat-server

---

前端介紹

文件結構

用法

目前只實現了聊天功能和聯系人列表功能。除了一開始需要輸入用戶名登錄以外，其他用法跟PC版的微信一毛一樣，就不多介紹了。

代碼原理

主要使用了vue和vue-router來構建單頁面應用。

如上圖

• 紅色框范圍內是App.vue，是項目默認加載的組件，最左邊的導航欄組件固定顯示。路由地址是/index。

• 橙色框范圍內是由message/index.vue和contact/index.vue組件構成，由一級路由來選擇渲染。路由地址是/index/message和/index/contact。

• 黃色框范圍內是由message/session.vue和contact/userinfo.vue組件構成，通過二級命名路由來選擇渲染。路由地址是/index/message/XXX和/index/contact/userinfo/XXX，其中XXX表示一個具體的ID值，通過命名路由的形式，可以將ID值作為獲取對應信息的憑據。

后端介紹

文件結構

拉取數據的接口都寫在routes目錄里，針對登錄、聊天、聯系人三個功能分別實現了三個路由文件，每個文件里包含若干接口。

與WebSocket相關的代碼都在socket目錄里。在index.js中初始化WebSocket並且開始監聽，在onlineUsers.js中維護了一個在線用戶的數據結構，用來針對性的發送消息。

代碼原理

1. 當前端用戶登錄時，會向后端發送join消息並帶上用戶ID，這時后端會將該用戶的ID和對應socket對象存入數組中。

2. 當前端用戶發送消息時，會向后端發送send消息並帶上消息內容和會話ID，后端接收到后會將這條消息新增到對應ID的會話中，然后通知該會話ID中包含的所有在線成員。通知是以后端發送refresh信息實現的。

3. 當前端用戶斷開連接時，后端接收到disconnect消息后，會將該socket對象從數組中刪除。

目前存在的問題

這個項目的初衷是希望通過部署到leancloud的托管服務器上，來獲得一個免費的可訪問的公網服務端。但是由於某些我還不清楚的原因，WebSocket會提示連接超時，無法實現實時通訊的效果。

想運行起來看效果的同學，就在本地同時運行后端和前端即可。