用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组件的方法，写如下组件

<template>
  <div>
    <div> 
      <input type="text" v-model="msg">
      <button @click='Login'>向8000端口发送数据</button>
      {{backdata}}
    </div>
 
  </div>
</template>
<script>
export default{
  data:function (){
    return {
      msg:"aaaa",
      backdata:'',
    }
  },
  sockets:{ //在此接收又服务器发送过来的数据 ps：注意此处的方法名要与服务器的发送的事件保持一致才能接收到
   connect:function() {      //与ws:127.0.0.1:8000连接后回调
    console.log('连接成功');
   },
   loginmsg:function(value) {
    console.log(value);//监听login(后端向前端emit login的回调)
    this.backdata=value;
   }
  },
  methods:{
    Login(){
      this.$socket.emit('login',this.msg);
    }
  }
    
 }
</script>

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

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