阅读 262

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

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

前端代码

  1. 安装
npm i vue-socket.io --save
复制代码
  1. 在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')
复制代码
  1. 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文件夹

屏幕截图 2021-10-01 200818.png

1.安装

 npm i egg-socket.io --save
复制代码
  1. 在config/plugin.js 中激活插件
io: { 
    enable: true, 
    package: 'egg-socket.io', 
},
复制代码
  1. 在config/config.default.js里面写入
config.io = {
    init: {}, // passed to engine.io
    namespace: {
      '/': {
        connectionMiddleware: ['connection'],
        packetMiddleware: [],
      },
      '/msg':{
        connectionMiddleware: [],
        packetMiddleware: [],
      }
    }
 };
复制代码
  1. 配置路由
  • 第一种写法
'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); 
复制代码

屏幕截图 2021-10-01 203454.png

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

 io.of('/res').route('res', io.controller.home.server); 
复制代码

屏幕截图 2021-10-01 203454.png

上图表示:会执行 /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
};
复制代码
文章分类
后端
文章标签