使用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 数据,后台返回结果这样我们就能在浏览器上看到返回的数据