欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+socket.io+express+mongodb 實現(xiàn)簡易多房間在線群聊示例

 更新時間:2017年10月21日 16:00:15   作者:gjincai  
本篇文章主要介紹了vue+socket.io+express+mongodb 實現(xiàn)簡易多房間在線群聊示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。

項目簡介

主要是通過做一個多人在線多房間群聊的小項目、來練手全棧技術(shù)的結(jié)合運用。

項目源碼:chat-vue-node

主要技術(shù): vue2全家桶 + socket.io + node(express) + mongodb(mongoose)

環(huán)境配置: 需安裝配置好 node,mongodb環(huán)境(參考:http://www.dbjr.com.cn/article/109449.htm); 建議安裝 Robomogo 客戶端來管理mongodb數(shù)據(jù)。

編譯運行:

1.開啟MongoDB服務(wù),新建命令行窗口1:

mongod

2.啟動服務(wù)端node,新建命令行窗口2:

cd server
node index.js

3.啟動前端vue頁面

cd client
cnpm install
npm run dev

然后在瀏覽器多個窗口打開 localhost:8080,注冊不同賬號并登錄、即可進行多用戶多房間在線聊天。

主要效果預(yù)覽:

代碼目錄概覽

|--chat-vue-node
  |--client        // 前端客戶端:基于 vue-cli 搭建的所有聊天頁面
  |--server        // 后臺服務(wù)端
    |--api.js       // express 通過 mongoose 操作 mongodb 數(shù)據(jù)庫的所有接口
    |--db.js       // 數(shù)據(jù)庫初始化、Schema數(shù)據(jù)模型
    |--index.js      // 后臺服務(wù)啟動入口
    |--package.json
  .gitignore
  README.md

soeket.io 基礎(chǔ)

soeket.io 在該項目中用到的基本功能如下(詳情請看GitHub中的chatGroup.vue、server/index.js這兩文件代碼):

// 客戶端連接
var socket = io.connect('http://localhost:8081')
// 服務(wù)端監(jiān)聽到連接
io.on('connection', function(socket){
 // ......
}

// 客戶端發(fā)送進入房間請求
socket.emit('joinToRoom', data)
// 服務(wù)端監(jiān)聽
socket.on('joinToRoom', function (data) {
 // ......
 // 服務(wù)端處理進入房間、離開房間
 socket.join(roomGroupId)
 // 有人進入房間,向該群其它的成員發(fā)送更新在線成員
 io.sockets.in(roomGroupId).emit('joinToRoom', chat)
 io.sockets.in(roomGroupId).emit('updateGroupNumber', roomNum[roomGroupId])
}

// 客戶端發(fā)送聊天消息
socket.emit('emitChat', chat)
// 服務(wù)端監(jiān)聽并向群內(nèi)其它人群發(fā)該消息
socket.on('emitChat', function (data) {
 let roomGroupId = chat.chatToGroup
 // 向特定的群成員轉(zhuǎn)發(fā)消息
 socket.in(roomGroupId).emit('broadChat', chat)
})

數(shù)據(jù)結(jié)構(gòu)設(shè)計

主要有三個數(shù)據(jù)結(jié)構(gòu)模型:

// 用戶信息的數(shù)據(jù)結(jié)構(gòu)模型
const accountSchema = new Schema({
 account: {type: Number},  // 用戶賬號
 nickName: {type: String},  // 用戶昵稱
 pass: {type: Number},    // 密碼
 regTime: {type: Number}   // 注冊時間
})
// 聊天群的數(shù)據(jù)結(jié)構(gòu)模型:聊天群包含的成員
const relationSchema = new Schema({
 groupAccount: Number,    // 群賬號
 groupNickName: String,   // 群昵稱
 groupNumber: []       // 群成員
})
// 單個聊天群的聊天消息記錄
const groupSchema = new Schema({
 account: Number,      // 聊天者的賬號
 nickName: String,      // 聊天者的昵稱
 chatTime: Number,      // 發(fā)消息的時間戳
 chatMes: String,      // 聊天的消息內(nèi)容
 chatToGroup: Number,    // 聊天的所在群賬號
 chatType: String      // 消息類型:進入群、離開群、發(fā)消息
})

vue-router 路由設(shè)計

頁面路由的跳轉(zhuǎn)全部由前端的 vue-router 處理,頁面功能少而全、僅3個:注冊登錄頁、個人中心頁、群聊頁

routes: [
 // {path: '/', name: 'Hello', component: Hello},
 {path: '/', redirect: '/login', name: 'Hello', component: Hello},
 {path: '/login', name: 'Login', component: Login},
 {path: '/center', name: 'Center', component: Center},
 {path: '/chatGroup', name: 'ChatGroup', component: ChatGroup}
]
// 未登錄時,通過編程式跳去登錄頁:
router.push({ path: 'login' })

vuex 全局狀態(tài)

主要是通過vuex來全局管理個人賬號的登錄狀態(tài)、當(dāng)前所在群聊房間的信息:

export default new Vuex.Store({
 state: {
  chatState: {
   account: null,
   nickName: null
  },
  groupState: null  // 點擊進群的時候更新
 },
 mutations: {
  updateChatState (state, obj) {
   state.chatState = obj
  },
  updateGroupState (state, obj) {
   state.groupState = obj
  }
 },
 actions: {
  updateChatState ({commit}, obj) {
   commit('updateChatState', obj)
  },
  updateGroupState ({commit}, obj) {
   commit('updateGroupState', obj)
  }
 },
 getters: {
  getChatState (state) {
   return state.chatState
  },
  getGroupState (state) {
   return state.groupState
  }
 }
})

在全局中更新state、獲取state:

// 更新
this.$store.dispatch('updateChatState', {account: null, nickName: null})
// 獲取
this.$store.getters.getChatState

數(shù)據(jù)庫接口api

module.exports = function (app) {
 app.all("*", function(req, res, next) {
  next()
 })
 // api login 登錄
 app.get('/api/user/login', function (req, res) { // ... })
 // api register 注冊
 app.get('/api/user/register', function (req, res) { // ... })
 // getAccountGroup 獲取可進入的房間
 app.get('/api/user/getAccountGroup', function (req, res) { // ... })
 // getGroupNumber 獲取當(dāng)前房間的群成員
 app.get('/api/user/getGroupNumber', function (req, res) { // ... })
 // api getChatLog 獲取當(dāng)前房間的聊天記錄
 app.get('/api/getChatLog', function (req, res) { // ... })
 app.get('*', function(req, res){
  res.end('404')
 })
}

更多詳細的實現(xiàn),請看 源碼chat-vue-node ,里面保留著開發(fā)摸索時的很多注釋。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue 技巧之控制父類的 slot

    Vue 技巧之控制父類的 slot

    插槽(Slot)是Vue提出來的一個概念,正如名字一樣,插槽用于決定將所攜帶的內(nèi)容,插入到指定的某個位置,從而使模板分塊,具有模塊化的特質(zhì)和更大的重用性。
    2020-02-02
  • VUE3基礎(chǔ)學(xué)習(xí)之click事件詳解

    VUE3基礎(chǔ)學(xué)習(xí)之click事件詳解

    由于vue是一個雙向數(shù)據(jù)綁定的框架,它的點擊事件與以前常用的還是有很大的差別的,下面這篇文章主要給大家介紹了關(guān)于VUE3基礎(chǔ)學(xué)習(xí)之click事件的相關(guān)資料,需要的朋友可以參考下
    2022-01-01
  • 如何在vue3+ts項目中使用query和params傳參

    如何在vue3+ts項目中使用query和params傳參

    Vue3中的路由傳參有兩種方式:query和params,下面這篇文章主要給大家介紹了關(guān)于如何在vue3+ts項目中使用query和params傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • 詳解vue項目的構(gòu)建,打包,發(fā)布全過程

    詳解vue項目的構(gòu)建,打包,發(fā)布全過程

    小編給大家通過本文詳細介紹了關(guān)于vue.js項目的構(gòu)建、打包、發(fā)布的全過程,文章很以后價值,值得你參考。
    2017-11-11
  • vue中解決微信html5原生ios虛擬鍵返回不刷新問題

    vue中解決微信html5原生ios虛擬鍵返回不刷新問題

    這篇文章主要介紹了vue中解決微信html5原生ios虛擬鍵返回不刷新問題,本文給大家分享解決方法,通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • vue-element-admin后臺生成動態(tài)路由及菜單方法詳解

    vue-element-admin后臺生成動態(tài)路由及菜單方法詳解

    vue-element-admin后臺管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺生成動態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下
    2023-09-09
  • 詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別

    詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別

    這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • Vue組件間數(shù)據(jù)傳遞的方式(3種)

    Vue組件間數(shù)據(jù)傳遞的方式(3種)

    這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • 一文帶你搞定svg-icon的使用方式

    一文帶你搞定svg-icon的使用方式

    這篇文章主要介紹了一文帶你搞定svg-icon的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue微信分享的實現(xiàn)(在當(dāng)前頁面分享其他頁面)

    vue微信分享的實現(xiàn)(在當(dāng)前頁面分享其他頁面)

    這篇文章主要介紹了vue微信分享,在當(dāng)前頁面分享其他頁面,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04

最新評論