vue.js - 由于没有服务器，我应该在哪里添加这个 websocket 代码在新的 nuxt.js 设置中？

Question

我正在使用新版本的 Nuxt，它不附带服务器文件夹

在旧版本中，您有一个服务器文件夹和一个 index.js，其中包含应用程序

我想用新版本的 NuxtJS

添加 websocket WS 库

该库需要您通过调用 http.createServer(app) 创建的服务器实例，这意味着正在运行的快速应用程序的实例。您现在将使用此服务器实例来收听 index.js 文件中的 3000。还要创建一个 sessionHandler，您可以通过使用 express-session 库调用 session({}) 来获得它

    const WebSocket = require('ws')
    function websocket({ server, sessionHandler, logger }) {
      // https://github.com/websockets/ws/blob/master/examples/express-session-parse/index.js, if you pass a server instance here 'upgrade' handler will crash
      const wss = new WebSocket.Server({ noServer: true })
      function noop() {}
      function heartbeat() {
        this.isAlive = true
      }
      wss.on('connection', (ws, request, client) => {
        ws.isAlive = true
        ws.on('pong', heartbeat)
        ws.on('message', (msg) => {
          logger.info(`Received message ${msg} from user ${client}`)
          ws.send(true)
        })
      })
      server.on('upgrade', (request, socket, head) => {
        sessionHandler(request, {}, () => {
          logger.info(`${JSON.stringify(request.session)} WEBSOCKET SESSION PARSED`)
          wss.handleUpgrade(request, socket, head, (ws) => {
            wss.emit('connection', ws, request)
          })
        })
      })
      // TODO use a setTimeout here  instead of a setInterval
      setInterval(function ping() {
        // wss.clients => Set
        wss.clients.forEach(function each(ws) {
          if (ws.isAlive === false) return ws.terminate()
          ws.isAlive = false
          ws.ping(noop)
        })
      }, 30000)
      return wss
    }
    module.exports = websocket

有谁知道我如何在没有服务器文件夹

的情况下在新的 Nuxt 设置上进行这项工作

Answer 1

您可以创建自定义模块并使用 nuxt hooks获取监听事件的服务器实例。
创建 modules/ws.js :

const WebSocket = require('ws')
const wss = new WebSocket.Server({ noServer: true })

wss.on('connection', ws => {
  ws.on('message', message => {
    console.log('received: %s', message);
  })
  ws.send('Hello')
})

export default function () {
  this.nuxt.hook('listen', server => {
    server.on('upgrade', (request, socket, head) => {
      wss.handleUpgrade(request, socket, head, ws => {
        wss.emit('connection', ws);
      })
    })
  })
}

并将模块注册到 nuxt.config.js :

export default {
  modules: [
    '~/modules/ws'
  ]
}

在您的情况下，您可以创建一个模块目录而不是单个文件来存储多个相关文件。
创建 modules/ws/index.js

const websocket = require('./websocket') // this is your file

export default function () {
  this.nuxt.hook('listen', server => {
    websocket({
      server,
      sessionHandler (request, _, cb) { // example
        cb()
      },
      logger: console // example
    })
  })
}

然后将您的文件复制到 modules/ws/websocket.js .您可以使用 module.exports这是 CommonJS 格式或将其更改为 ES Module 格式，Nuxt(Webpack) 可以处理。

In your code I notice that ws.send(true) cause an error TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received type boolean (true) which basically mean you cannot send boolean.