egg.socket.io后端开发

1. 安装egg-socket.io

npm i egg-socket.io@4.1.6 --save

最好指定egg-socket.io的版本号，比如我后端使用"egg-socket.io": "^4.1.6", 因为跟前端的socket.io-client是一一关联，socket.io-client用高版本或低版本，都不兼容了，可以查看egg-socket.io的依赖文件，比如在node_modules中可以看到客户端socket.io-client使用的版本号：

比如我前端安装依赖：

"socket.io-client": "^2.5.0",

2. config/plugin.js引入

io: {
        enable: true,
        package: 'egg-socket.io',
    },

3.配置socket.js

/config/config/socket.js

module.exports = config => {
    // socket.io
    config.io = {
        init: {
            wsEngine: 'ws', //ws 引擎
        },
        namespace: {
            '/': {
              connectionMiddleware: [
                //'auth', 连接中间件
              ],
              packetMiddleware: [],
            }
        },
        redis: {
            host: '127.0.0.1',
            port: 6379,
            auth_pass: '',
            db: 2,
        },
    }
}

4.在config.default.js引入

require('./config/socket')(config)//socket.io

5.使用路由,

/router/platform.js

'use strict';

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

  //测试 这里的'test'跟前端的路由要保持一致
  io.of('/').route('test', io.controller.test.test)

  io.of('/').route('connenct',io.controller.notice.connenct)

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

};

6.先来看下egg-socket.io的项目目录结构

your-project-name
├── app
│   ├── extend
│   │   └── helper.js
│   ├── io
│   │   ├── controller
│   │   │   └── chat.js
│   │   └── middleware #插件中间件, 基于 socket 模型设计，处理 socket.io 请求 
│   │       ├── auth.js #对应刚才配置的connectionMiddleware: ['auth']
│   └── router.js
├── config
└── package.json

在app目录下新建io文件夹，io下新建controller

'use strict';

const Controller = require('egg-cloud').Controller;

/**
 * 测试socket
 */

class TestController extends Controller {

    async test() {
        const { ctx, app } = this;

        //测试连接 控制台自动输出
        //console.log("-------test--------")

        //前端传过来的参数
        let message = ctx.args[0];

        console.log(message);
    }

}

module.exports = TestController;

8. 使用知识

使用 emit() 方法发送事件： 通常用在后端，触发给前端，前端用on()接收

使用 on() 方法监听事件： 通常用在前端

9. 比如这里的路由是

//测试 这里的'test'跟前端的路由要保持一致
  io.of('/').route('test', io.controller.test.test)

10. 在前端怎么写呢？

actions: {
        //连接socket
        connectSocket({ state, dispatch }) {
            const S = io('http://127.0.0.1:7001', {
                query: {},//可以传token参数
                transports: ['websocket'],
                timeout: 5000
            })
            //监听连接
            S.on('connect', () => {
                console.log("socket.io已连接")

                //测试推送一条消息
                S.emit('test', '123456')/触发给后端
                
            })
            //监听失败
            S.on('error', () => {
                state.socket = null
            })
            //监听断开
            S.on('disconnect', () => {
                state.socket = null
            })
        }
    }

后端的controller方法的test 就能收到

async test() {
        const { ctx, app } = this;

        //测试连接 控制台自动输出
        //console.log("-------test--------")

        //前端传过来的参数
        let message = ctx.args[0];

        console.log(message);
    }