實現基於vue全家桶+mint-ui+node.js+socket.io+MongoDB模仿微信的網頁即時聊天項目

 

一、項目介紹

用到的所有工具除了node.js，其他都是第一次接觸，沒有什麼深刻理解，只基於個人邊學邊做的經驗，記錄一下此項目，並供同樣想實現類似項目的小夥伴們參考。另外分享一下初期入手時很有幫助的vue+vuex基礎視頻，也是論壇中別人分享的，原鏈接打不開了，附上我的網盤分享：https://pan.baidu.com/s/1z2v4qffxFiYG-Nsav8Sxrg 密碼：ajxb

項目體驗地址：112.74.53.108/dist （電腦上打開時請按F12然後點擊Toggle device mode或ctrl+shift+M）

github：https://github.com/GaoMinjian/mychat

實現的主要功能：

1.登錄與註冊

2.羣聊與私聊

3.已存在的會話顯示在首頁，並動態更新顯示的最新信息，如圖：

4.個人資料如頭像、暱稱的更改

5.退出登錄

ps:如有其它功能添加或修改意見歡迎留言

 

二、所用框架或庫介紹

package.json:

"less": "^3.7.1",
"less-loader": "^4.1.0",
"mint-ui": "^2.2.13",
"mongoose": "^5.2.5",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"style-loader": "^0.21.0",
"uws": "^10.148.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-socket.io": "^2.1.1-b",
"vuex": "^3.0.1"

簡單介紹：

個人經驗，安裝插件在命令窗口中直接

#npm install -g xx

在項目中無法使用，需在項目目錄下或用軟件打開項目後在terminal中輸入命令(一定不能少了--save，不然不會寫入到packge.json中，以後分享源碼給別人時別人就無法安裝項目所有的插件)：

#npm install --save xxx

 

less：css擴展語言，此項目中只用到一種用法，應該都看得懂。

mint-ui：餓了麼開發的框架，包含手機端界面各種組件，雖然有些時候沒有自己寫用着那麼如意，但是能很大地提高效率。官方文檔：http://mint-ui.github.io/docs/#/zh-cn2

mongoose：node中對MongoDB進行操作的API。MongoDB安裝最後一步一定要取消勾選左下角的選項，不要試水...(盜圖)

socket.io及相關API：實現客戶端（就是我們打開項目頁面的窗口）與服務端（就是# node xxx.js 起的服務）實時的請求、廣播交互。如客戶端設置監聽命名爲x的廣播，服務端發送名爲X的廣播，客戶端便能收到作爲參數的數據。socket.io在不瞭解概念的時候會被客戶端服務端之類的搞暈，個人查網上文章並嘗試了兩整天才成功實現最簡單的通信（很多網上的方法不適用），想明白了後其實很簡單。不管看哪篇文章最好都結合官方文檔https://socket.io/docs/

vuex：同級組件間共享數據，此項目中僅僅用來儲存數組，其他數據都用sessionStorage儲存，沒有特殊複雜需求的話如果爲了學習一下如何使用可以用一下，不然不如自己寫個js文件來儲存數據。

 

三、項目的目錄結構

其中dist爲項目打包後生成的文件夾，mychat爲guthub倉庫，均與項目本身無關。

node_modules中爲項目中所有安裝的插件。

src中一般存放項目製作過程所有新建的文件，根據個人習慣，我在assets中存放所有的css,js,圖片等靜態資源，components放置組件，page中放置主要頁面。

router的index.js的功能是將所有的vue頁面暴露給路由（vue中所有組件都需暴露後纔可被引用），即暴露給App.vue中的<router-view>，App.vue則掛載到index.html中，頁面才得以顯示。

main.js則對應了App.vue，是對全局的引用，第二步中用到的組件均需在這裏引用，代碼如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App'
import router from './router'
import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
import store from './vuex/store'

Vue.use(VueSocketio, socketio('http://localhost:3000'))
Vue.use(MintUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

項目製作過程中根據功能增加的文件（非項目建立時固有文件）：

database中db.js，在服務端的node文件中被引用，相當於在js中模擬mongo數據庫中具體的某個表，不管是對某個表的什麼操作，都根據schema中定義的數據。mongoose教程（必看）：http://cw.hubwiz.com/card/c/543b2e7788dba02718b5a4bd/1/1/1/

 

四、服務端即Node文件

let http = require('http');

let user = require('./database/db').user; //mongo model
let privateHistory = require('./database/db').privateHistory;
let groupHistory = require('./database/db').groupHistory
let socketId = [],users = []//用賬號對應客戶端 儲存socket連接

let server = http.createServer(function (req, res) {
}).listen(3000);//創建http服務

console.log('Server running ');
var io = require('socket.io').listen(server);

node中與服務相關的只有創建一個http服務並監聽端口，再讓socket監聽此服務，3000端口只是我使用的，可以自己更改，但是在App.vue中，socket發送請求的端口也要相應更改。

示範一下socket.io的用法：

服務器端（js）中監聽客戶端連接及其他信息：

io.sockets.on('connection', (socket) => { //監聽客戶端連接，返回當前socket
  console.log('鏈接成功'+ socket.id);
  user.find({},function (err,docs) { //在user關聯的表中查找所有數據
    socket.emit('allUsers',docs) //給當前客戶端發送廣播
  })


socket.on('login', (data) => { 
    ... ...
}

客戶端中監聽‘allusers’廣播：

sockets: { //所有廣播的監聽必須寫在sockets中
    allUsers (docs) {
      this.$store.state.allusers = docs //儲存到vuex中
     }
  }

 

五、小結

大概介紹了一下整個項目，儘量使新入門的小夥伴能看得懂，具體的內容可以從github中下載源碼。有什麼錯誤或講解不詳細的地方歡迎指正或提出。

另附幾張項目界面(發現中的功能都沒做)：