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 相关文章推荐
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
js实现省市级联效果分享
Aug 10 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python线程、进程和协程详解
2016/07/19 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
应届护士推荐信
2013/11/16 职场文书
护士进修自我鉴定
2014/02/07 职场文书
机关单位动员会主持词
2014/03/20 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
运动会开幕词
2015/01/28 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python