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

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);

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()
}

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)
   })
  })
 }
})

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
}

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
}