Vue.js + Nuxt.js：无法使用 socket.io-client 连接套接字服务器答案

【问题标题】：Vue.js + Nuxt.js: Can't connect with socket server using socket.io-clientVue.js + Nuxt.js：无法使用 socket.io-client 连接套接字服务器
【发布时间】：2021-05-26 15:07:32
【问题描述】：

我用于客户端和服务器端：socket.io-client v3.0.5

index.vue

import socket from '~/plugins/socket.js'

<script>
    mounted() {
        socket.open()
    }
</script>

plugins/socket.js

import io from 'socket.io-client'

const options = {
  path: '/socket.io',
  transports: ['websocket'],
  forceNew: true,
  reconnectionAttempts: 3,
  timeout: 2000,
  reconnection: false,
}
const socket = io(process.env.PROXY_SOCKET_URL, options)

export default socket

nuxt.config.js

plugins: [
    '~/plugins/socket.js',
],

在安装时我得到了这个：2 commas after '40' code in data of ws

由于数据中有 2 个逗号，我的客户端和服务器端无法连接。我通过 SocketIo 客户端工具测试了我的套接字服务器，它可以工作。我在 docker 中的前端和后端。

如何删除这些逗号？

【问题讨论】：

标签： javascript vue.js socket.io nuxt.js

【解决方案1】：

您可以使用“nuxt-socket-io”(v1.1.18) 模块代替 socket.io-client。它帮助我连接前端和服务器。

这是我的认识：

nuxt.config.js

modules: [
    'nuxt-socket-io',
],
io: {
    // module options
    sockets: [
      {
        name: 'main',
        default: true,
        url: process.env.PROXY_SOCKET_URL,
      },
    ],
  },

index.vue

<script>
    mounted() {
      window.socket = this.$nuxtSocket({
        path: '/socket.io',
        transport: ['websocket'],
      })
      window.socket.open()
    }
</script>

【讨论】：