Nuxt，Express，套接字无法连接答案

【问题标题】：Nuxt, Express, Sockets can't get connectionNuxt，Express，套接字无法连接
【发布时间】：2021-03-17 10:15:32
【问题描述】：

我尝试创建一个小应用程序并想向其中添加 websockets，但我在连接时遇到了一些问题。我正在使用 nuxt-socket-io 和 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' })
  })
}

这是用于在服务器上创建套接字

我的 nuxt-config 是

['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
    }],

然后在我的 .vue 文件中

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

我收到服务器的响应

{"msg":"server is set"}

但我从来没有连接过

console.log('Made socket connection')

但我似乎无法连接以运行任何发射，我不知道为什么

你可以在https://github.com/Chris9540/mappertron看到完整的代码仓库如果这有助于让您对正在发生的事情有更多的了解这是我第一次尝试添加套接字，所以我可能会完全错误地做这件事

【问题讨论】：

标签： node.js express sockets nuxt.js

【解决方案1】：

我已经设法通过使用 socket-io 和 socket.io-client 使其正常工作，请参阅我主要遵循本指南 https://stackoverflow.com/a/65226573/7805726 请参阅 repo 了解更多详细信息 (https://github.com/Chris9540/mappertron) 我仍然想让它正常工作与nuxt-socket-io，但我有插座，所以我很高兴

为了我的修复，我将一些应用程序设置为一个新文件

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

摆脱了 nuxt-socket-io 配置

在我的 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`
        })
      })

和

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

【讨论】：