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

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

<template>
  <div class="main">
    <el-row>
      <el-col :span="16">
        <el-input id='input' v-model="input"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="sendMsg">Send</el-button>
      </el-col>
    </el-row>
    <div id="content"></div>
  </div>
</template>
<script>
​
const ENTER = 0
const LEAVE = 1
​
export default {
  name: 'Chat',
  data() {
    return {
      input: '',
      content: '',
      message: ''
    }
  },
​
  sockets: {
    connect() {
      this.$message({
        message: '连接成功！！！',
        type: 'success'
      });
​
    },
    disconnect() {
      this.$message({
        message: '连接断开！！！',
        type: 'error'
      })
    },
    broadcast_msg(data) {
      var content = document.querySelector('#content')
      var div = document.createElement('div')
      div.innerText = `${data.msg} ---${data.time}`
      if (data.type === ENTER) {
        div.style.color = 'green'
      } else if (data.type === LEAVE) {
        div.style.color = 'red'
      } else {
        div.style.color = 'blue'
      }
      content.appendChild(div)
    }
  },
​
  methods: {
    sendMsg() {
      this.$socket.emit('send_msg', this.input)
    }
  }
}
</script>
​
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  width: 500px;
}
#input {
  width: 10px;
}
#content {
  margin-top: 15px;
  text-align: left;
}
</style>

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