使用Vue+Node.js+Express+Socket.io实现简易聊天室Demo并解决跨域问题

github ：https://github.com/DannyZeng2/EasyChat-SimpleDemo

完整版聊天室正在更新中，欢迎大家交流：https://www.jianshu.com/p/47c221ccd393

Socket.io的默认事件列表

服务端事件

事件名称	描述
connection	socket连接成功之后触发，用于初始化
message	客户端通过socket.send来传送消息时触发此事件
anything	收到任何事件时触发
disconnect	socket失去连接时触发

客户端事件

事件名称	描述
connect	连接成功
connecting	正在连接
disconnect	断开连接
connect_failed	连接失败
error	错误发生，并且无法被其他事件类型所处理
message	同服务器端message事件
anything	同服务器端anything事件
reconnect_failed	重连失败
reconnect	成功重连
reconnecting	正在重连

依赖引入

前端依赖

npm i vue-socket.io -S
npm i socket.io-client -S
npm i element-ui -S

后端依赖

npm i express -S
npm i socket.io -S

前端代码

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import VueSocketIO from 'vue-socket.io';
import SocketIO from 'socket.io-client'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('ws://localhost:3000')
}))

new Vue({
  render: h => h(App),
}).$mount('#app')

Chat.vue

后端代码

app.js (添加第8-10行代码即可解决跨域问题)

const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const socketIO = require('socket.io')

const io = socketIO(server, {
  cors: {
    origin: '*'
  }
});

const ENTER = 0
const LEAVE = 1
const MESSAGE = 2

let count = 0

io.on('connection', socket => {
  console.log('user connected')
  count++
  let user = `用户${count}`

  io.sockets.emit('broadcast_msg',
    {
      type: ENTER,
      msg: `${user}加入群聊`,
      time: new Date().toLocaleString()
    }
  )

  socket.on('send_msg', (data) => {
    console.log(`收到客户端的消息：${data}`)
    io.sockets.emit('broadcast_msg', {
      type: MESSAGE,
      msg: `${user}:${data}`,
      time: new Date().toLocaleString()
    })
  })

  socket.on('disconnect', () => {
    console.log('user disconnected')
    io.sockets.emit('broadcast_msg', {
      type: LEAVE,
      msg: `${user}离开了群聊`,
      time: new Date().toLocaleString()
    })
    count--
  });
});

server.listen(3000, () => {
  console.log("server running on port 3000")
})

效果展示：

chat.png