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";

/**
 * @param {Egg.Application} app - egg application
 */
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

<template>
  <div>this is carouselLists 访问量{{ visited }}</div>
</template>

<script>
import Vue from "vue";
import VueSocketio from "vue-socket.io";

Vue.use(
  new VueSocketio({
    debug: true,
    connection: "http://127.0.0.1:7001/",
  })
);

export default {
  name: "CarouselList",
  data() {
    return {
      visited: null,
    };
  },
  mounted() {
    // socket客户端向服务端通讯，每次访问当前页面，通过visitedServer更新访问量
    this.$socket.emit("visitedServer");
  },
  sockets: {
    // 成功链接的回调
    connect: function () {
      console.log("socket connected");
    },
    // 初始化调用io.controller.visited.server
    // CustomVisited 接受的socket.io传递过来的 visited访问量
    CustomVisited: function (visited) {
      console.log("前端收到了客户端的消息", visited);
      this.visited = visited;
    },
  },
};
</script>

<style></style>