Nuxt, Express, Sockets can't get connection

Question

Im try in to create a little app and wanted to add websockets to it but im having some issues getting a connection. Im using the nuxt-socket-io and socket io.

const socket = require('socket.io')

// Options can be host, port, ioSvc, nspDir:
module.exports = (app) => {
  let server = null
  let io = null
  app.use('/ws', (req, res) => {
    if (!server) {
      server = res.connection.server
      io = socket(server)

      io.on('connection', function (socket) {
        console.log('Made socket connection')

        socket.on('msg', (msg) => {
          console.log('Recived: ' + msg)

          setTimeout(() => {
            socket.emit('msg', `Response to: ${msg}`)
          }, 1000)
        })

        socket.on('disconnect', () => console.log('disconnected'))
      })
    }

    res.json({ msg: 'server is set' })
  })
}

this is being used to create the sockets on the server

and my nuxt-config is

['nuxt-socket-io', {
      sockets: [ // Required
        { // At least one entry is required
          name: 'main',
          url: 'http://localhost:3000/api/ws',
          path: 'ws',
          default: true
        }
      ],
      server: false
    }],

then in my .vue file

mounted () {
    this.socket = this.$nuxtSocket({
      path: '/api/ws'
    })
  },
  methods: {
    callSocket () {
      console.log('trying to call socket')
      this.socket.emit('msg', 'test message', (resp) => {
        console.log(resp)
        this.resp = resp
      })
    }
  }

I get a response from the server

{"msg":"server is set"}

but I never get to the connection

console.log('Made socket connection')

but I can't seem to get connected to run any of the emits and i'm not sure why

you can see the full code repo at https://github.com/Chris9540/mappertron if that will help give you more of an idea of what going on This is my first time trying to add sockets so I may may done this completely wrong feel free to fork my branch with any alterations you suggest if I'm doing this completely wrong

score 1 · Answer 1 · answered Mar 17 '21 at 16:05

I've manage to get it working by just using socket-io and socket.io-client see the I mainly followed this guide https://stackoverflow.com/a/65226573/7805726 see the repo for more details (https://github.com/Chris9540/mappertron) I would still like to get it working with nuxt-socket-io but I have sockets so im happy

for my fix I abstracted out some of the app set up to a new file

const app = require('express')()
const socket = require('socket.io')
const bodyParser = require('body-parser')
let server = null
let io = null

app.all('/ws', (req, res) => {
  if (!server) {
    server = res.connection.server
    io = socket(server)

    io.on('connection', function (socket) {
      console.log('Made socket connection')

      socket.on('msg', (msg) => {
        console.log('Recived: ' + msg)

        setTimeout(() => {
          socket.emit('msg', `Response to: ${msg}`)
        }, 1000)
      })

      socket.on('disconnect', () => console.log('disconnected'))
    })
  }

  res.json({ msg: 'server is set' })
})
app.use(bodyParser.json())
module.exports = app

got rid of the nuxt-socket-io configs

and in my vue

this.$axios.$get('/api/ws')
      .then((resp) => {
        // eslint-disable-next-line no-undef
        this.socket = io()
        this.socket.on('msg', function (msg) {
          console.log('socket responce', msg)
          this.resps += `${msg}\n`
        })
      })

and

this.socket.emit('msg', JSON.stringify({ id: 1, x: 1, y: 1 }))

Nuxt, Express, Sockets can't get connection

1 Answers1