Nuxt Socket.io is unresponsive without any error

Question

I'm using nuxt-socket-io along with an Express.js server with socketio as well. When I start up the client/server, the server-side socket.io connects and console for the server will print "connected").

When I try to connect with nuxt (the client-side part of socket.io), nothing happens. Mounted() is called correctly (the "hm" console log prints out), but the socket never seems to be made. I tried testing this.socket.on('connect-error') and this.socket.on('connect-timeout') for the CLIENT side (the server-side socket.io connects properly), but nothing was ever emitted after about 5 minutes of waiting. The persist: true isn't the issue either; I tried to remove it and had the same issue. I initially didn't have this.socket.open() and had the same problems, so I don't think that line does anything, either.

NuxtJS frontend

mounted() {
    console.log("hm");
    this.socket = this.$nuxtSocket({
      channel: '/profile',
      persist: true
    })
    this.socket.open();

    this.socket.on('connection', (socket) => {
      console.log("connected")
    })

    //Listens for the SERVER-EMITTED event 'send'
    this.socket.on('send', (message) => {
      console.log("client received event!")
      console.log(message);
    });

  },
  methods: {
    sendMessage() {
      // This method IS CALLED correctly with a button (I checked), but the emit is not transmitting
      // sends a CLIENT-EMITTED event to the server
      this.socket.emit('send-message', {
        message: "hey!"
      }, (res) => {console.log(res)})
    },

nuxt.config.js

  io: {
    sockets: [{
      name: 'main',
      default: true,
      url: 'http://localhost:3000'
    }]
  },

My Express Backend (port is 8080)

import express from "express";
import { db } from "./app/config/db.config";
import { authRouter } from "./app/routes/auth.router";
import * as dotenv from "dotenv";
const http = require('http');
const socketio = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketio(server, {
  cors: {
    origin: '*',
    methods: ["GET", "POST"]
  }
});

// run on connection to socket
io.on('connection', (socket: any) => {
  console.log("connected")
})

// listens for the CLIENT-EMITTED event 'send-message'
io.on('send-message', (message: any) => {
  console.log(message + "server received!");
  // sends a SERVER-EMITTED event "send" to be received by nuxt client
  io.emit('send', "message!")
  
})

server.listen(process.env.PORT, () => {
  console.log(`Server is running on port ${process.env.PORT}`);
});

Axios is also running on port 8080, I don't know if that would cause any issues but I don't get any errors when I try to run my whole program (which includes login/registration with axios). Anyone know why my events aren't transmitting? Thank you!

user_3185387 · Answer

In your server code, you're adding your 'send-message' event listener to the io object, which is your main socket.io Server instance. However, event listeners should be added to the socket object you get from the connection event. Something like:

// A new connection comes in
io.on('connection', (socket: Socket) => {
  // Now we listen for the event that comes from this particular socket
  socket.on('send-message', (message: any) => {
    // You also use the Socket instance to send events back to clients, not to the `io` Server.
    socket.emit('send', "message!");
  });
});

The Socket instance docs have more info on what you can do with these sockets.

Nuxt Socket.io is unresponsive without any error

1 Answers