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_jb51.rar