怎么在vue中使用socket.io實現(xiàn)一個聊天室

今天就跟大家聊聊有關(guān)怎么在vue 中使用socket.io實現(xiàn)一個聊天室，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)西峽免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

可以達到的需求

• 能查看在線用戶列表

• 能發(fā)送和接受消息

使用到的框架和庫

• socket.io做為實時通訊基礎(chǔ)

• vuex/vue：客戶端Ui層使用

• Element-ui：客戶端Ui組件

類文件關(guān)系圖

服務(wù)端：

客戶端：

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

實現(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 = 1
let 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事件

• 當有客戶端連接時，觸發(fā)connection事件，縣立即調(diào)用"服務(wù)端上下文(后面簡稱cxt)"的createChannel方法創(chuàng)建一個管道，此時的管道上是沒有用戶信息的。

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

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

• index.js：聊天室服務(wù)端上下文創(chuàng)建入口，創(chuàng)建context，并初始化房間到上下文中。

• context.js：聊天室服務(wù)端上下文類，用戶、房間、消息、管道等類在此中做集中管理。

• room目錄：包含房間和房間集合的實現(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)
}

此時會創(chuàng)建一個管道實例，然后初始化管道實例，并將管道添加到管道數(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出去一個默認的房間 */
  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()
}

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

• 將通訊socket添加一個到房間中，方便后期好廣播消息

• 向當前連接上來的socket發(fā)送房間信息，設(shè)定為第一個房間

• 監(jiān)聽三個事件：用戶注冊、新消息、關(guān)閉連接。此處都要邏輯處理，可以參考源碼。

客戶端實現(xiàn)

主要實現(xiàn)連接服務(wù)、注冊用戶、發(fā)送和接受消息的功能。首先以main.js為入口，且需要先裝配好vue相關(guān)配件，如vuex、ElemUi、客戶端通訊管道等，然后創(chuàng)建vue實例和連接消息服務(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.SETROOMINFO
Vue.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目錄中實例的與消息服務(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 = null

export function getCxt () {
 if (cxt == null) {
  cxt = new Context(url, eventKeys, io)
 }
 return cxt
}

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

二、vuex的結(jié)合

在store目錄中實現(xiàn)，包含了vuex類相關(guān)的實現(xiàn)，還有業(yè)務(wù)層的實現(xiàn)。其中業(yè)務(wù)層會引用"客戶端通訊管道"，而vuex實現(xiàn)類有可能會引用業(yè)務(wù)層相關(guān)實現(xiàn)類，以此實現(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 store
export const busCxt = _busCxt /** 業(yè)務(wù)處理上下文 */
export function getBusCxt () {
 return _busCxt
}

三、組件

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

• Login.vue：用戶注冊組件

• HChat.vue：主界面容器組件

• Message/MsgWriter.vue：發(fā)送消息組件

• Message/MsgList.vue：接受和顯示消息列表組件

如何運行實例

• cnpm run install 安裝所有的依賴

• npm run sokcetIo 啟動消息服務(wù)器

• npm run dev 啟動客戶端

看完上述內(nèi)容，你們對怎么在vue 中使用socket.io實現(xiàn)一個聊天室有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站欄目：怎么在vue中使用socket.io實現(xiàn)一個聊天室
網(wǎng)站網(wǎng)址：http://muchs.cn/article16/gedcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、建站公司、移動網(wǎng)站建設(shè)、小程序開發(fā)、面包屑導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)