vue + socket.io實(shí)現(xiàn)一個簡易聊天室示例代碼

2019-11-19 17:18:39

字體：大中小

供稿：網(wǎng)友

vue + vuex + elementUi + socket.io實(shí)現(xiàn)一個簡易的在線聊天室，提高自己在對vue系列在項(xiàng)目中應(yīng)用的深度。因?yàn)閷W(xué)會一個庫或者框架容易，但要結(jié)合項(xiàng)目使用一個庫或框架就不是那么容易了。功能雖然不多，但還是有收獲。設(shè)計(jì)和實(shí)現(xiàn)思路較為拙劣，懇請各位道友指正。

可以達(dá)到的需求

能查看在線用戶列表
能發(fā)送和接受消息

使用到的框架和庫

socket.io做為實(shí)時(shí)通訊基礎(chǔ)
vuex/vue：客戶端Ui層使用
Element-ui：客戶端Ui組件

類文件關(guān)系圖

服務(wù)端：

客戶端：

服務(wù)端實(shí)現(xiàn)

實(shí)現(xiàn)聊天服務(wù)器的相關(guān)功能，包含通訊管道的創(chuàng)建、用戶加入、消息的接受與轉(zhuǎn)發(fā)等。

一、通訊服務(wù)建立

build/server-config.js：聊天服務(wù)器的入口

let socketIo = require('socket.io');let express = require('express'); let cxt = require('../src/services-server');let httpPort = 9001;let channelId = 1let app = express();app.get('/',function(req,res){  res.send('啟動成功：' + httpPort);}); let server = require('http').createServer(app);let io = socketIo(server);io.on('connection',function(socket){   console.log('有客戶端連接');  cxt.createChannel(channelId++,socket)});server.listen(httpPort); //用server連接console.log('io listen success !! ' + httpPort);

通過express創(chuàng)建一個server對象，然后利用socketIo創(chuàng)建io對象
然后通過io的on方法監(jiān)聽connection事件
當(dāng)有客戶端連接時(shí)，觸發(fā)connection事件，縣立即調(diào)用"服務(wù)端上下文(后面簡稱cxt)"的createChannel方法創(chuàng)建一個管道，此時(shí)的管道上是沒有用戶信息的。

二、創(chuàng)建上下文(服務(wù)端上下文)

實(shí)現(xiàn)一個聊天室上下文，包含：用戶、房間、消息、管道等數(shù)組，所以代碼都在service-server目錄中。

index.js：聊天室服務(wù)端上下文創(chuàng)建入口，創(chuàng)建context，并初始化房間到上下文中。
context.js：聊天室服務(wù)端上下文類，用戶、房間、消息、管道等類在此中做集中管理。
room目錄：包含房間和房間集合的實(shí)現(xiàn)
channel：服務(wù)端與客戶端通訊的管道類

結(jié)合"通訊服務(wù)建立"中的connectiong事件的觸，其后轉(zhuǎn)到cxt.createChannel方法

createChannel (id, socket) {  let channel = new Channel(id, socket, this)  channel.init()  channel.index = this.channels.length  this.channels.push(channel)}

此時(shí)會創(chuàng)建一個管道實(shí)例，然后初始化管道實(shí)例，并將管道添加到管道數(shù)組中。以下是初始化管道實(shí)例的代碼：

init () {  let self = this  let roomInfo = this.cxt.room.collections[0]  this.roomInfo = roomInfo  this.socket.join('roomId' + roomInfo.id)  this.socket.emit(this.cxt.eventKeys.emit.sendRooms, roomInfo) /* send出去一個默認(rèn)的房間 */  this.socket.on(this.cxt.eventKeys.client.registerUser, function (id, name) {   console.log(id + '-' + name + '--' + self.id)   self.cxt.createUserById(id, name, self.id)  }) /** 新用戶注冊 */  this.socket.on(this.cxt.eventKeys.client.newMsg, function (msg) { /** 發(fā)送消息 */   self.notifyMsg(msg)   console.log(msg)   self.cxt.addMsg(msg)  })  this.socket.on(this.cxt.eventKeys.client.closeConn, function () {   console.log(self.id + '--關(guān)閉連接')   self.cxt.remove(self)  })  this.sendUsers()}

在初始化管道實(shí)例時(shí)做了如下事件：

將通訊socket添加一個到房間中，方便后期好廣播消息
向當(dāng)前連接上來的socket發(fā)送房間信息，設(shè)定為第一個房間
監(jiān)聽三個事件：用戶注冊、新消息、關(guān)閉連接。此處都要邏輯處理，可以參考源碼。

客戶端實(shí)現(xiàn)

主要實(shí)現(xiàn)連接服務(wù)、注冊用戶、發(fā)送和接受消息的功能。首先以main.js為入口，且需要先裝配好vue相關(guān)配件，如vuex、ElemUi、客戶端通訊管道等，然后創(chuàng)建vue實(shí)例和連接消息服務(wù)器，代碼如下：

import '../node_modules/bootstrap/dist/css/bootstrap.css'import Vue from 'vue'import ElemUi from 'element-ui'import 'element-ui/lib/theme-default/index.css'import App from './App'import * as stores from './store'import { Keys } from './uitls'import { getCxt } from './services-client'let initRoomInfo = Keys.SETROOMINFOVue.use(ElemUi)/* eslint-disable no-new */new Vue({ store: stores.default, el: '#app', template: '<App/>', components: { App }, created: function () {  let self = this  getCxt().createIo(this, function (roomInfo) {   stores.busCxt.init() /** 初始化view與service層的交互層(業(yè)務(wù)層) */   self.$store.dispatch(initRoomInfo, roomInfo)   getCxt().refUsers(function (users) {    stores.busCxt.userCxt.refUsers(users)   })  }) }})

一、與服務(wù)端的通訊

service-client目錄中實(shí)例的與消息服務(wù)器通訊，其中包含創(chuàng)建用戶、接受和發(fā)送消息等。一個客戶端只能擁有一個消息管道，以下代碼是消息管理的創(chuàng)建：

import * as io from 'socket.io-client'import Context from './context'let eventKeys = require('../services-uitls/event.keys')let url = 'http://localhost:9001/'let cxt = nullexport function getCxt () { if (cxt == null) {  cxt = new Context(url, eventKeys, io) } return cxt}

在main.js中的vue實(shí)例的created勾子中調(diào)用了Context的createIo實(shí)例方法，用于創(chuàng)建一個與消息服務(wù)器的連接，并接受其中房間發(fā)送回來的房間信息。然后就初始化業(yè)務(wù)層。

二、vuex的結(jié)合

在store目錄中實(shí)現(xiàn)，包含了vuex類相關(guān)的實(shí)現(xiàn)，還有業(yè)務(wù)層的實(shí)現(xiàn)。其中業(yè)務(wù)層會引用"客戶端通訊管道"，而vuex實(shí)現(xiàn)類有可能會引用業(yè)務(wù)層相關(guān)實(shí)現(xiàn)類，以此實(shí)現(xiàn)ui到"消息服務(wù)器"的通訊。 store/index.js代碼如下：

import Vuex from 'vuex'import Vue from 'vue'import RoomViewCxt from './room/roomViewCxt'import UserViexCxt from './userViewCxt'import MsgViewCxt from './msg/msgViewCxt'import BusCxt from './indexForBus'let _busCxt = new BusCxt()let _rvCxt = new RoomViewCxt()let _uvCxt = new UserViexCxt(_busCxt.userCxt)let _mvCxt = new MsgViewCxt()let opt = { state: null, getters: null, mutations: null, actions: null}_rvCxt.use(opt)_uvCxt.use(opt)_mvCxt.use(opt)Vue.use(Vuex)let store = new Vuex.Store(opt)export default storeexport const busCxt = _busCxt /** 業(yè)務(wù)處理上下文 */export function getBusCxt () { return _busCxt}

三、組件

組件只實(shí)現(xiàn)了用戶注冊、主界面容器、消息發(fā)送和消息接受等。組件只會引用store目錄中相關(guān)類，不會直接引用管道類。