vue+express+socket.io实现前后端保持长连接

vue+express+socket.io实现前后端保持长连接

1.安装依赖包

#vue
npm install vue-socket.io --save
#node
npm install socket.io --save

2.在端项目中main.js引入依赖包

//socket设置
import VueSocketio from 'vue-socket.io';
Vue.use(new VueSocketio({
  debug: true,
  connection: 'http://127.0.0.1:8001' //地址+端口，由后端提供
}));

3.在vue模板文件中使用

3.1连接服务器时应该在mounted生命周期函数中

3.2可以在methods中写一些被动方法

<template>
  <div>
    <div>
      <button @click="sendSocketMsg">发socket信息</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是首页"
    };
  },
  mounted() {
    //添加socket事件监听
    /**
     * 当服务端和客户端连接成功时，服务端会监听到connection和connect事件，
     * 客户端会监听到connect事件，断开连接时服务端对应到客户端的socket与
     * 客户端均会监听到disconcect事件。
     */
    this.sockets.listener.subscribe("connect", () => {
      console.log("已连接到服务端");
    });
    this.sockets.listener.subscribe("disconcect", () => {
      console.log("断开连接");
    });
  },
  methods: {
    sendSocketMsg() {
      //向服务端发送消息
      this.$socket.emit("webdata", { name: "张三" });
      //接收服务端相对应的webdata数据
      this.sockets.listener.subscribe("webdata", data => console.log(data));
    }
  }
};
</script>

4.在后端express中加载模块在./bin/www文件中加载

var socketConnect = require('../socket/index')
var io = require('socket.io').listen(server);
io.on('connection', function (socket) {
  socketConnect(io,socket)
});

5.讲socket相关的设置抽取出来

//       此代码是上一段代码块中导入的../socket/index
module.exports = (io, socket) => {
    console.log('服务端连接到长连接');
    // 接收客户端与  webdata   发送的对应消息
    socket.on('webdata', (data) => {
        console.log(data) //{ name: '张三' }
        socket.emit('webdata', { msg: 'broadcast' });
    })
    // io.emit()方法用于向服务端发送消息，参数1表示自定义的数据名，参数2表示需要配合事件传入的参数
    // io.emit('webdata', { msg: 'client connect server success' });
    // socket.broadcast.emit()表示向除了自己以外的客户端发送消息
    //socket.broadcast.emit('server message', { msg: 'broadcast' });

    // 监听断开连接状态：socket的disconnect事件表示客户端与服务端断开连接
    socket.on('disconnect', function () {
        console.log('服务端已断开长连接');
    });
    //销毁连接
    //socket.disconnect();
}

6.测试

前端点击按钮控制台出现下图表示成功

后端控制台出现下图表示成功