vue + socket.io实现一个简易聊天室示例代码
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度。因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了。功能虽然不多,但还是有收获。设计和实现思路较为拙劣,恳请各位道友指正。 可以达到的需求
使用到的框架和库
类文件关系图服务端: 客户端: 服务端实现实现聊天服务器的相关功能,包含通讯管道的创建、用户加入、消息的接受与转发等。 一、通讯服务建立build/server-config.js:聊天服务器的入口 let httpPort = 9001;
let channelId = 1 let app = express(); app.get('/',function(req,res){ let server = require('http').createServer(app);
二、创建上下文(服务端上下文)实现一个聊天室上下文,包含:用户、房间、消息、管道等数组,所以代码都在service-server目录中。
结合"通讯服务建立"中的connectiong事件的触,其后转到cxt.createChannel方法 此时会创建一个管道实例,然后初始化管道实例,并将管道添加到管道数组中。以下是初始化管道实例的代码: 在初始化管道实例时做了如下事件:
客户端实现主要实现连接服务、注册用户、发送和接受消息的功能。首先以main.js为入口,且需要先装配好vue相关配件,如vuex、ElemUi、客户端通讯管道等,然后创建vue实例和连接消息服务器,代码如下: let initRoomInfo = Keys.SETROOMINFO
Vue.use(ElemUi) / eslint-disable no-new / new Vue({ store: stores.default,el: '#app',template: '',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目录中实例的与消息服务器通讯,其中包含创建用户、接受和发送消息等。一个客户端只能拥有一个消息管道,以下代码是消息管理的创建: let eventKeys = require('../services-uitls/event.keys')
let url = 'http://localhost:9001/' let cxt = null export function getCxt () { 在main.js中的vue实例的created勾子中调用了Context的createIo实例方法,用于创建一个与消息服务器的连接,并接受其中房间发送回来的房间信息。然后就初始化业务层。 二、vuex的结合在store目录中实现,包含了vuex类相关的实现,还有业务层的实现。其中业务层会引用"客户端通讯管道",而vuex实现类有可能会引用业务层相关实现类,以此实现ui到"消息服务器"的通讯。 store/index.js代码如下: 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 opt = { Vue.use(Vuex) let store = new Vuex.Store(opt) 三、组件组件只实现了 用户注册、主界面容器、消息发送和消息接受等。组件只会引用store目录中相关类,不会直接引用管道类。
如何运行实例
示例截图下载地址: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Swift GYB 简易教程
- ruby – 在Rails 4中的ActiveRecord中加载database.yml的位
- ruby-on-rails-3 – Rails 3-检索最后N条记录
- ruby – 为什么我收到错误“uninitialized constant Secure
- c# – WPF ListView将SelectedItem与相同的项混淆
- ios – 如何在仅适用于iPhone的应用程序中为XCode 4.3指定i
- vue-prop父组件向子组件进行传值的方法
- swift2 – Xcode 7不显示swift 2的函数调用者
- React Native探索(五)使用fetch进行网络请求
- 一个用XML构建Swing视图的框架