使用egg-socket.io 搭建socket 服務

1.後臺

安裝 egg-socket.io

npm i egg-socket.io --save

開啓插件

// {app_root}/config/plugin.js
exports.io = {
  enable: true,
  package: 'egg-socket.io',
};

配置

// {app_root}/config/config.${env}.js
exports.io = {
  init: { }, // passed to engine.io
  namespace: {
    '/': {
      connectionMiddleware: [中間件],
      packetMiddleware: [中間件],
    },
    '/example': {
      connectionMiddleware: [],
      packetMiddleware: [],
    },
  },
};

namespace 是指分配到不一樣的接入點或者路徑,前端連接socket時須要和此保持一致

io(http://127.0.0.1:7001{namespace})

connectionMiddleware 在每個客戶端連接或者退出時發生做用,socket連接先走的中間件,能夠在這裏處理受權認證,連接處理等操做

packetMiddleware 做用於數據包(每一條消息),一般對消息進行預處理(信息加密)

路由

// {app_root}/app/router.js

module.exports = app => {
  const { router, controller, io } = app;

  // default
  router.get('/', controller.home.index);

  // socket.io
  io.of('/').route('server', io.controller.home.server);
};

對於在命名空間"/" 下,監聽到的serve事件將由 app/io/controller/home 中 server 方法處理
server 方法能夠前端能夠經過調用 socket.emit('server',{name:'jjj'}),能夠將數據傳遞到app/io/controller/home 中 server 方法中進行處理

//後臺 server方法 
 async server() {
    const { ctx, app } = this;
    const nsp = app.io.of('/');
    const message = ctx.args[0] || {};
    const socket = ctx.socket;
    const client = socket.id;
   await nsp.emit('server',{age:12})
  }

2.前端

前端使用vue 框架,須要vue-socket.io 插件

安裝vue-socket.io

npm install vue-socket.io --save

在入口文件main.js中使用插件,並創建socket連接

import VueSocket from 'vue-socket.io'
Vue.use(new VueSocket({
  debug:true,
  connection:'http://127.0.0.1:7001/', // namespace --> /
}))

在組件中調用方法

// 前端代碼
 this.$socket.emit('server',{name:'jjj'})

前端emit 數據,後臺返回結果這樣咱們就能在瀏覽器上看到返回的數據