vue+egg.js使用websocket

==> 服務端促使客戶端退出的小案例，

1 安裝與配置

1.1 安裝依賴包

# 1 egg 專案中安裝
npm install egg-socket.io

# 2 vue 專案中安裝
npm install vue-socket.io

1.2 配置 egg.js

config/config.default.js

module.exports = appInfo => {
  const config = exports = {};
  
  ......
  
  // 關閉 csrf
  config.security = {
    csrf: {
      enable: false,
    },
  };

  // cors 跨域配置
  config.cors = {
    origin: '*',
    // 允許請求的方法
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
  };
 	
  // ************** socket.io 配置 **************
  config.io = {
    init: {},
    namespace: { // 命名空間
      '/': { // 可通過 app.io.of('/') 獲取到這個命名空間，下面代碼中有用到
        // 對應下面的 app/io/middleware/connection.js
        connectionMiddleware: [ 'connection' ],
        // 對應下面的 app/io/middleware/packet.js
        packetMiddleware: [ 'packet' ],
      }
    }
  };
  // *******************************************
    
  return {
    ...config
  };
}

config/plugin.js

module.exports = {
  ......
  ......
  io: {
    enable: true,
    package: 'egg-socket.io',
  },
};

app/io/middleware/connection.js

/**
 * 在每一個客戶端連接或者退出時發生作用
 * @param app
 * @returns {(function(*, *): Promise<void>)|*}
 */
module.exports = app => {
  return async (ctx, next) => {
    ctx.socket.emit('res', 'connected!');
    console.log('server socket connected');
    await next();
  };
};

app/io/middleware/packet.js

/**
 * 對訊息進行預處理
 * @param app
 * @returns {(function(*, *): Promise<void>)|*}
 */
module.exports = app => {
  return async (ctx, next) => {
    ctx.socket.emit('res', 'packet received!');
    console.log('packet:', ctx.packet);
    await next();
  };
};

2 egg.js 中 websocket 使用

class AdminController extends Controller {
  ......
    // 其他代碼
  ......

  /**
   * @description: 修改用戶資訊
   * @param {*}
   * @return {*}
   */
  async update() {
    const { ctx, app } = this;
    // =================== 引入 nsp，用于 websocket 相關操作 ===================
    const nsp = app.io.of('/'); // 獲取到對應的命名空間的內容
    // =====================================================================

    let res;
    const reqBody = ctx.request.body;
    if (reqBody.type === 'rename') {
      // 重命名
      res = await ctx.service.admin.rename(ctx.params.id, reqBody);
    } else if (reqBody.type === 'editPassword') {
      // 重置密碼
      res = await ctx.service.admin.editPassword(ctx.params.id, reqBody);
    } else if (reqBody.type === 'editStatus') {
      // 設定用戶狀態
      res = await ctx.service.admin.editStatus(ctx.params.id, reqBody);
      if (res) {
        if (reqBody.userStatus === 2 || reqBody.userStatus === 3) {
          // ====================== 發送訊息 ======================
          nsp.emit('logout', { msg: 'logout', id: ctx.params.id });
          // ====================================================
        }
      }
    }

    if (res) {
      ctx.body = new SuccessResponse(null, '修改成功')
    } else {
      ctx.body = new ErrorResponse(null, '修改失敗')
    }
  }
  ......
    // 其他代碼
  ......
}

3 vue 中使用 websocket

main.js

// 引入 websocket
import VueSocketIO from 'vue-socket.io'

// 配置
const vueSocketIO = new VueSocketIO({
  debug: true,
  // 后端服務地址
  connection: 'http://127.0.0.1:7001',
})
// 監聽connect事件
vueSocketIO.io.on('connect', () => {
  console.log('socket connect from main.js');
});
Vue.use(vueSocketIO)

home.vue

<script>
......
export default{
  sockets: {
    // 連接事件
    connect: function() {
      console.log("socket connect from HOME page");
    },
    // 登出事件
    logout: function(data) {
      console.log("wesocket-logout", data);
      if (data.id === sessionStorage.getItem("userId")) {
        this.$notify.error({
          title: "您的賬號已被停用/注銷/洗掉！"
        });
        console.log("我退出了");
        this.logout();
      }
    }
  },
  data(){...}
}
</script>

4 參考文獻

[1] vue-socket.io使用教程與踩坑記錄.

[2] egg-socket在egg中的使用.