vue+socket.io实现一个简易聊天室

Sam先生的博客 Sam先生的博客     2022-08-23     273

关键词:

     vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度。因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了。功能虽然不多,但还是有收获。设计和实现思路较为拙劣,恳请各位道友指正

可以达到的需求

  • 能查看在线用户列表
  • 能发送和接受消息

使用到的框架和库

  • socket.io做为实时通讯基础
  • vuex/vue:客户端Ui层使用
  • Element-ui:客户端Ui组件

类文件关系图

服务端:

客户端:

服务端实现

    实现聊天服务器的相关功能,包含通讯管道的创建、用户加入、消息的接受与转发等。

一、通讯服务建立

    build/server-config.js:聊天服务器的入口

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创建一个server对象,然后利用socketIo创建io对象
  • 然后通过io的on方法监听connection事件
  • 当有客户端连接时,触发connection事件,县立即调用"服务端上下文(后面简称cxt)"的createChannel方法创建一个管道,此时的管道上是没有用户信息的。

二、创建上下文(服务端上下文)

实现一个聊天室上下文,包含:用户、房间、消息、管道等数组,所以代码都在service-server目录中。

  • index.js:聊天室服务端上下文创建入口,创建context,并初始化房间到上下文中。
  • context.js:聊天室服务端上下文类,用户、房间、消息、管道等类在此中做集中管理。
  • room目录:包含房间和房间集合的实现
  • channel:服务端与客户端通讯的管道类
    结合"通讯服务建立"中的connectiong事件的触,其后转到cxt.createChannel方法
createChannel (id, socket) {
    let channel = new Channel(id, socket, this)
    channel.init()
    channel.index = this.channels.length
    this.channels.push(channel)
}

此时会创建一个管道实例,然后初始化管道实例,并将管道添加到管道数组中。以下是初始化管道实例的代码:

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) { /** 发送消息 */
      self.notifyMsg(msg)
      console.log(msg)
      self.cxt.addMsg(msg)
    })
    this.socket.on(this.cxt.eventKeys.client.closeConn, function () {
      console.log(self.id + '--关闭连接')
      self.cxt.remove(self)
    })
    this.sendUsers()
}

在初始化管道实例时做了如下事件:

  • 将通讯socket添加一个到房间中,方便后期好广播消息
  • 向当前连接上来的socket发送房间信息,设定为第一个房间
  • 监听三个事件:用户注册、新消息、关闭连接。此处都要逻辑处理,可以参考源码。

客户端实现

    主要实现连接服务、注册用户、发送和接受消息的功能。首先以main.js为入口,且需要先装配好vue相关配件,如vuex、ElemUi、客户端通讯管道等,然后创建vue实例和连接消息服务器,代码如下:

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层的交互层(业务层) */
      self.$store.dispatch(initRoomInfo, roomInfo)
      getCxt().refUsers(function (users) {
        stores.busCxt.userCxt.refUsers(users)
      })
    })
  }
})

一、与服务端的通讯

service-client目录中实例的与消息服务器通讯,其中包含创建用户、接受和发送消息等。一个客户端只能拥有一个消息管道,以下代码是消息管理的创建:

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勾子中调用了Context的createIo实例方法,用于创建一个与消息服务器的连接,并接受其中房间发送回来的房间信息。然后就初始化业务层。

二、vuex的结合

     在store目录中实现,包含了vuex类相关的实现,还有业务层的实现。其中业务层会引用"客户端通讯管道",而vuex实现类有可能会引用业务层相关实现类,以此实现ui到"消息服务器"的通讯。 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 /** 业务处理上下文 */
export function getBusCxt () {
  return _busCxt
}

三、组件

组件只实现了 用户注册、主界面容器、消息发送和消息接受等。组件只会引用store目录中相关类,不会直接引用管道类。

  • Login.vue:用户注册组件
  • HChat.vue:主界面容器组件
  • Message/MsgWriter.vue:发送消息组件
  • Message/MsgList.vue:接受和显示消息列表组件

如何运行实例

  • 源码地址[2019-09-11更新,由于原下载地址失效]
  • cnpm run install 安装所有的依赖
  • npm run sokcetIo 启动消息服务器
  • npm run dev 启动客户端
  • 示例截图

简易聊天室代码分享js+socket.io(代码片段)

先言这我以前写的,这里就是单纯分享下代码,不算正经文章。效果如下,前端用一个单html文件。然后后端用node.js和socket.io,也是只用一个单js文件就好。这里可以看下代码的实现逻辑就好,因为来连数据库... 查看详情

简易聊天室代码分享js+socket.io(代码片段)

先言这我以前写的,这里就是单纯分享下代码,不算正经文章。效果如下,前端用一个单html文件。然后后端用node.js和socket.io,也是只用一个单js文件就好。这里可以看下代码的实现逻辑就好,因为来连数据库... 查看详情

socket.io入门,简易聊天室(代码片段)

介绍通常我们web使用的是http协议,但是HTTP协议有一个缺陷:通信只能由客户端发起。所以我们需要一个可以由服务端主动发出的协议,即WebSocket。WebSocket是HTML5新增的一种通信协议,其特点是服务端可以主动向客户端推送信息... 查看详情

使用nodesocket.io搭建简易聊天室

官方介绍(​​链接​​)Socket.io是一个WebSocket库,会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,而且支持的浏览器最低达IE5.5。​​Socket.io​​服务器和​​Socket.io​​客... 查看详情

简易聊天室代码分享js+socket.io(代码片段)

先言这我以前写的,这里就是单纯分享下代码,不算正经文章。效果如下,前端用一个单html文件。然后后端用node.js和socket.io,也是只用一个单js文件就好。这里可以看下代码的实现逻辑就好,因为来连数据库... 查看详情

使用 Socket.IO 和 NodeJS 实现音频聊天

】使用Socket.IO和NodeJS实现音频聊天【英文标题】:ImplementingAudiochatwithSocket.IOandNodeJS【发布时间】:2015-05-2207:09:57【问题描述】:我使用sails.js(node.js)和socket.IO创建了一个聊天应用程序。我需要同时实现audiochat和filetransfers。谁能... 查看详情

讨论:使用 node.js / socket.io 实现聊天室的最佳方式?

】讨论:使用node.js/socket.io实现聊天室的最佳方式?【英文标题】:Discussion:Bestwaytoimplementachatroomwithnode.js/socket.io?【发布时间】:2011-11-2018:49:48【问题描述】:我说的不是一般的聊天应用程序,而是专门讨论聊天室的实现。所以... 查看详情

使用socket.io+express+mongodb制作在线聊天室

一、先用websocket制作简易版本的聊天室使用Websocket制作简易聊天室二、再用socket.io+express+mongodb制作复杂一点的在线聊天室代码地址:https://github.com/ChangYanwei/chatroom体验地址:http://8.131.68.141:7000使用socket.io监听连接... 查看详情

一个关于vue+mysql+express的全栈项目------实时聊天部分socket.io(代码片段)

一、基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client)Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上... 查看详情

node.jswebsocket使用socket.io库实现实时聊天室

认识websocketWebSocketprotocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。其实websocket并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket... 查看详情

socket.io入门篇

...il/591b114bb1d4fe074099d9c9.html前言本篇介绍使用node.js模块组件socket.io实现一个非常非常简易的聊天案例。本系列文章不对socket.io历史背景做过多阐述,只会通过一个个的案例带领大家进入socket.io的殿堂,增进小伙伴在socket.io实际开发... 查看详情

如何从 Vue.js 组件连接到 socket.io?

...我正在使用Vue-cliwebpack模板来生成我的关于带有socket.io的聊天室的项目。当我单击按钮时,我已经用一个简单的实例对其进行了测试,客户端会将参数发送到服务器端。但是当我点击按钮时,服务器端没有任何东西。谁能告 查看详情

使用socket.io开发聊天室

前言Socket.IO是一个用来实现实时双向通信的框架,其本质是基于WebSocket技术。我们首先来聊聊WebSocket技术,先设想这么一个场景:·用户小A,打开了某个网站的充值界面,该界面上有一个付款的二维码。·当小A用某宝的APP扫码... 查看详情

Socket.io 与 Rabbitmq 进行一对一聊天

】Socket.io与Rabbitmq进行一对一聊天【英文标题】:Socket.iowithRabbitmqforonetoonechat【发布时间】:2020-05-1816:14:25【问题描述】:我正在与Socket.io和RabbitMQ建立一对一的聊天我的一对一聊天的实现是有效的,但我不确定这个实现是否正... 查看详情

使用socket.io实现简单的聊天功能(代码片段)

Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法首先得在你的项目中安装socket.io$npminstallsocket.io服务端代码:varapp=require(‘http‘).createServer()vario=require(‘socket.io‘)(app)varPORT=5555;varclientCount=0;app 查看详情

vue使用websocket模拟实现聊天功能-简易版(代码片段)

vue使用WebSocket模拟实现聊天功能-简易版效果展示两个浏览器相互模拟1.创建模拟node服务在vue根目录下创建server.js文件模拟后端服务器**在server终端目录下载**npminstall--sws2.编写server.js文件代码如下varuserNum=0;//统计在线人数varchat... 查看详情

socket.io 在一页上进行多个聊天

】socket.io在一页上进行多个聊天【英文标题】:socket.iomultiplechatsononepage【发布时间】:2014-10-1405:02:41【问题描述】:我想在一个页面上实现多个聊天窗口(例如facebook)。目前使用“房间”,简化代码:[客户]socket.emit(\'join\',\'ro... 查看详情

csssocket.io聊天示例来自vue.jshttp://socket.io/get-started/chat/(代码片段)

查看详情