vue + socket.io实现一个简易聊天室示例代码


Posted in Javascript onMarch 06, 2017

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

可以达到的需求

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

使用到的框架和库

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

类文件关系图

服务端:

vue + socket.io实现一个简易聊天室示例代码

客户端:

vue + socket.io实现一个简易聊天室示例代码

服务端实现

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

一、通讯服务建立

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:接受和显示消息列表组件

如何运行实例

  • cnpm run install 安装所有的依赖
  • npm run sokcetIo 启动消息服务器
  • npm run dev 启动客户端

示例截图

vue + socket.io实现一个简易聊天室示例代码

下载地址:vue-Socket_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
js选项卡的制作方法
Jan 23 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 #Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 #Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 #Javascript
Bootstrap模态框案例解析
Mar 05 #Javascript
video.js使用改变ui过程
Mar 05 #Javascript
Angular开发者指南之入门介绍
Mar 05 #Javascript
JavaScript自定义文本框光标
Mar 05 #Javascript
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
ip签名探针
2006/10/09 PHP
很实用的一个完整email发送程序
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
公共事业管理本科生求职信
2013/10/07 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
工作目标责任书
2014/07/23 职场文书