Vue.js + Nuxt.js：無法使用 socket.io-client 連接套接字服務器

Question

我在客戶端和服務器端使用：socket.io-client v3.0.5

索引.vue

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

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

插件/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',
],

在山上我得到了這個： ws 數據中“40”代碼后的 2 個逗號

由於數據中有 2 個逗號，我的客戶端和服務器端未連接。 我通過 SocketIo 客戶端工具測試了我的套接字服務器，它工作正常。 我的前端和后端在 docker。

我怎樣才能刪除那些逗號？

Answer 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,
      },
    ],
  },

索引.vue

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

Answer 2

過去幾天我一直在玩這個，並且有一個無模塊的解決方案。

為了在 nuxt 提供的同一台服務器上運行 socket.io 服務器，我們需要訪問 Nuxt 的服務器。 幸運的是，Nuxt 的監聽鈎子在服務器啟動后提供了它。 我們可以使用此服務器通過將以下內容添加到nuxt.config.ts來啟動我們的 socket.io 服務器：

import startSocketServer from "./server/sockets"

defineNuxtConfig({
  ...
  hooks: { listen: (server) => startSocketServer(server) },
  ...
})

在~/server/sockets/index.ts中，我們導出一個 function 接受這個服務器並啟動 socket.io 服務器：

import { Server as NuxtServer } from 'node:http'
import {  Socket, Server } from "socket.io";

export default (nuxtServer: NuxtServer) => {
  const io = new Server(nuxtServer)
  io.on("connection", (socket: Socket) => {
    socket.emit('message', "Hello World")
  });
};

這就是服務器！

如果我們現在有一個如下所示的 app.vue：

<script setup lang="ts">
import { io } from "socket.io-client";
const socket = io();
onMounted(() => socket.connect());
onUnmounted(() => socket.close());

const message = ref("");
socket.on("message", (data: string) => (message.value = data));
</script>

<template>
  <div>{{ message }}</div>
</template>

當我們加載頁面時，我們應該從服務器看到“Hello world”。