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

Question

I am using for client and server sides: 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',
],

And on mount i got this: 2 commas after '40' code in data of ws

My client side and server side not connecting because of 2 commas in data. I tested my socket server via SocketIo Client tool and it works. My frontend and backend in docker.

How can i remove those commas?

Answer 1

You can use "nuxt-socket.io"(v1.1.18) module instead of socket.io-client. It helped me connect front and server.

Here my realization:

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>

Answer 2

I've been playing with this the past few days, and have a module-free solution.

In order to run the socket.io server on the same server that nuxt is providing we need to get access to Nuxt's server. Luckily, Nuxt's listen hook provides the server once it has been started. We can use this server to start our socket.io server by adding the following to nuxt.config.ts :

import startSocketServer from "./server/sockets"

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

and inside of ~/server/sockets/index.ts we export a function that accepts this server and spins up the socket.io server:

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")
  });
};

That's it for the server!

If we now have an app.vue that looks like this:

<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>

We should see "Hello world" from the server when we load the page.