用node搭建简易服务器vue和socket.io完成一对多聊天功能

领导给我安排个工作，让我自己研究一下前端自己完成页面聊天功能，我就在网上找了多个，不是太过复杂，就是实用性讲解不全

我结合这些，研究了一个，和他们类似的

先说一下思路：

1.先要安装几个依赖

2.建立服务端，在vue项目中服务端就是单独建立一个文件夹，然后js文件（详见下文）

3.建立客户端

4.建立联系

1.安装依赖

npm install -s socket.io

npm install -s vue-socket.io

npm install -s socket.io-client

2.建立服务端

（1）在vue的根目录中新建一个文件夹起名server

（2）在server中建立js文件，起名app.js

（3）在app.js中写如下服务代码

var sever = require('http').createServer();
var io = require('socket.io')(sever)

io.on('connection', function (socket) {
  socket.on('login', function (data) { // 接收连接中的login事件
    console.log(data);
    io.emit('loginmsg', '你发过来的数据是：' + data) // 发送回去 事件名为loginmsg
  })

})
console.log('socket端口：1234');
sever.listen(1234)

（4）在package.json中的scripts添加下面这段代码

"server": "node server/app.js"

（5）之后，在文件中启动

npm run server，这样会打印出socket端口：1234

3.客户端，正常按照写vue组件的方法，写如下组件

4.服务器端和客户端建立联系

在main.js中引入

import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
Vue.use(VueSocketio, socketio('ws://127.0.0.1:8000')) // 与websocket服务端链接

服务端运行这个：npm run server

最后运行项目：npm run dev

客户端和服务器端要在两个窗口下运行