时间戳

首页 > 解决方案 > Nuxt 中的 Socket io 客户端问题

vue.js - Nuxt 中的 Socket io 客户端问题

问题描述

我在 Nuxt 中使用 socket.io 客户端时遇到了一些麻烦。当我创建 socket.io 客户端实例时，会创建多个连接。我正在使用 vue-socket.io，在需要添加选项并创建 socket.io 客户端实例之前我没有任何问题。我尝试过其他库并遇到了同样的问题。

我把它写在一个插件中并将它导入我的 nuxt.config

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

const options = {
  transport: ["polling", "websocket"],
  transportOptions: {
    polling: {
      extraHeaders: {
        Authorization: '', //'Bearer h93t4293t49jt34j9rferek...'
      }
    }
} };

//This code working
// export default function () {
//  Vue.use(new VueSocketIO({
//    debug: false,
//    connection: 'http://localhost:3001',
//  }))
// }


//This code not Working
export default function () {
 Vue.use(new VueSocketIO({
   debug: false,
   connection: SocketIO('http://localhost:3001', options),
 }))
}

这显示了控制台。问题不在后面，我用公共套接字试过了，我也有问题

[Nest] 4796   - 25/06/2021 11:30:28 a. m.   [MessageGateway] Client connected: A6TOQpVNSI_b-d5sAAAJ
[Nest] 4796   - 25/06/2021 11:30:29 a. m.   [MessageGateway] Client connected: 7FZyW_K9VtgI3_p1AAAK
[Nest] 4796   - 25/06/2021 11:30:31 a. m.   [MessageGateway] Client connected: TN1hvjkkEN5vC7xEAAAL
[Nest] 4796   - 25/06/2021 11:30:36 a. m.   [MessageGateway] Client connected: X8HUyvr3iJtWvPY7AAAM
[Nest] 4796   - 25/06/2021 11:30:41 a. m.   [MessageGateway] Client connected: MniYR9ketxpmUWBZAAAN

nuxt.config


  plugins: [
    { src: '@/plugins/apexchart.plugin.client.ts', mode: 'client', ssr: false },
    { src: '@/plugins/element-ui.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/vue-cryptoicon.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/v-calendar.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/api.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/dashboard.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/coins.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/wallets.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/accounting.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/deposits.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/investments.plugin.client.ts', mode: 'client', ssr: false},
    { src: '@/plugins/investments.plugin.client.ts', mode: 'client', ssr: false},
    { src: '~/plugins/socket.client.ts'},
  ],

标签： vue.jssocketssocket.ionuxt.js

解决方案

推荐阅读