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.測試

前端點擊按鈕控制檯出現下圖表示成功

後端控制檯出現下圖表示成功