Egg - socket.io

我们都知道,ajax是客户端请求服务端(单向),服务端不能够主动给我发送消息

有时候我们在web开发的时候,需要服务端主动向客服端发送消息,这个时候我们就需要用到双工通讯 - socket,当然非常老旧的项目也可以通过ajax轮询解决实时通讯的问题

npm i --save egg-socket.io

config/plugin.js

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

config/config.default.js

exports.io = {
  namespace: {
    "/": {
      connectionMiddleware: ["connection"],
      packetMiddleware: ["receive"],
    },
  },
};

app下创建socket目录app/.io

  app/io

         controller 

             visited.js

         middleware    

             connection.js  创建链接中间件

             receive.js socket服务端收到客服端参数走得中间件

app/io/controller/visited.js

const { Controller } = require("egg");

class VisitedController extends Controller {
  async server() {
    const { ctx, app } = this;
    const visitedCount = await ctx.service.app.get();
    const visited = Number(visitedCount[0].visited) + 1;
    const result = await ctx.service.app.set(visited);
    // 默认调用一次controller，将访问量传递给前端
    // 前端页面访问时，调用visitedServer继续调用本控制器，更新visited访问量
    await ctx.socket.server.emit("CustomVisited", visited);
  }
}

module.exports = VisitedController;

app/io/middelware/connection.js

module.exports = (app) => {
  return async (ctx, next) => {
    // 通知全体
    ctx.socket.emit("res", "connected!");
    await next();
    // execute when disconnect.
    console.log("disconnection!");
  };
};

  app/io/middelware/receive.js

module.exports = (app) => {
  // socket接收到参数的预处理
  return async (ctx, next) => {
    // console.log(ctx.packet);
    await next();
    // execute when disconnect.
    console.log("socket 收到了些参数都会走这里!");
  };
};

 app/router.js

"use strict";


module.exports = (app) => {
  const { router, controller, io } = app;
  
  // io.of('/') socket链接的命名空间
  // route('server') socket 客户端发送server事件时
  io.of("/").route("visitedServer", io.controller.visited.server);
};

npm i --save vue-socket.io

main.js