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