vue-socket.io以及egg-socket.io简单示例

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

前端代码

1. 安装

npm i vue-socket.io --save

2. 在main.js种引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://127.0.0.1:7001',
}))


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. home.vue中使用

<template>
  <div class="home">
    

  </div>
</template>

<script>
export default {
    mounted(){
       // 向服务端发送数据
      this.$socket.emit('res',{
        name:1
      })
      // 接受来自服务的数据
      this.sockets.subscribe('res', res => {
        console.log(res)
      })
    }
}
</script>

<style>

</style>

后端代码

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

1.安装

 npm i egg-socket.io --save

2. 在config/plugin.js 中激活插件

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

3. 在config/config.default.js里面写入

config.io = {
    init: {}, // passed to engine.io
    namespace: {
      '/': {
        connectionMiddleware: ['connection'],
        packetMiddleware: [],
      },
      '/msg':{
        connectionMiddleware: [],
        packetMiddleware: [],
      }
    }
 };

4. 配置路由

• 第一种写法

'use strict';

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

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller, io} = app;
  router.get('/', controller.home.index);
  io.of('/res').route('res', io.controller.home.server);
};

• 第二种写法

'use strict';

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

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller, io} = app;
  router.get('/', controller.home.index);
  io.route('res', io.controller.home.server);
};

这两种写法有什么区别呢，答案是"如果没有写的话会默认匹配/命名空间,如没有设置命名空间就不会匹配"

 io.route('res', io.controller.home.server); 

上图表示：会执行 / 下的中间件以及包

 io.of('/res').route('res', io.controller.home.server); 

上图表示：会执行 /msg 下的中间件以及包

接收前端的数据

app/io/controller/home.js

module.exports = app => {
    class Controller extends app.Controller {
        async server() {
            let data = this.ctx.args[0] // 前端发送过来的数据
        }
    }
    return Controller
};

给前端发送数据

app/io/controller/home.js

module.exports = app => {
    class Controller extends app.Controller {
        async server() {
            await this.ctx.socket.emit('res','你好前端') // 前端发送过来的数据
        }
    }
    return Controller
};