Websocket 连接失败（节点，快递，http，socket.io）

Question

我准备了这个最小回购： https://github.com/lucasscheuvens/socket-problem.git

我有一个 node.js express服务器，它应该在与socket.io相同的端口下运行。

这是我的服务器端代码：

(async function() {
  'use strict';
  
  // environment variables
  const PORT          = 8888
  
  // npm packages
  const express       = require('express')
  const app           = express()
  const server        = require('http').createServer(app)
  const io            = require('socket.io')(server)
  const { expressCspHeader, INLINE, SELF } = require('express-csp-header')
  
  io.attach(server)

  app.use(expressCspHeader({
    directives: {
      'default-src': [SELF],
      'script-src': [SELF, INLINE, 'https://cdnjs.cloudflare.com'],
      'connect-src': [SELF],
    }
  }))

  // serve static files in the 'public' directory
  app.use('/', express.static(__dirname + '/public'))
  
  // socket.io functions
  io.on('connection', function (socket) {
    console.log("Somebody connected via socket.io")
  })
  
  // start listening
  server.listen(PORT, () => {
    console.log(`Listening on port ${PORT} (HTTP + SOCKET.IO) ...`)
  }) 
  
})()

这是我的客户端代码：

<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha512-MgkNs0gNdrnOM7k+0L+wgiRc5aLgl74sJQKbIWegVIMvVGPc1+gc1L2oK9Wf/D9pq58eqIJAxOonYPVE5UwUFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  </head>

  <body>
    
    <script type="text/javascript">
    
    let socket = io(window.location.host)

    socket.on('connect_error', (err) => {
      console.log(`connect_error due to ${err.message}`)
    })

    socket.on('connect', function() {
      console.log('Connected to socket.io server')
    }) 

    </script>
    
  </body>
</html>

在 Chrome 中，我收到以下错误消息：

长轮询有效，但我不知道为什么 websockets 不会。 在 Network 选项卡中，它显示 websocket 连接已“完成”：

是什么导致了这个错误？ 对我来说，这似乎是一个非常标准的问题。

我很感激任何帮助。 谢谢！

Answer 1

我在别处得到了答案。 为了完整性：这是因为我连接了服务器两次。

...
const io = require('socket.io')(server)
...
io.attach(server)
...

完整的工作服务器脚本：

(async function() {
  'use strict';
  
  // environment variables
  const PORT          = 8888
  
  // npm packages
  const express                  = require('express')
  const { createServer }         = require('http')
  const { Server: SocketServer } = require('socket.io')
  const { expressCspHeader, INLINE, SELF } = require('express-csp-header')

  const app = express()
  const httpServer = createServer(app)
  const io = new SocketServer(httpServer, { /* options */ })

  app.use(expressCspHeader({
    directives: {
      'default-src': [SELF],
      'script-src': [SELF, INLINE, 'https://cdnjs.cloudflare.com'],
      'connect-src': [SELF],
    }
  }))

  // serve static files in the 'public' directory
  app.use('/', express.static(__dirname + '/public'))
  
  // socket.io functions
  io.on('connection', (socket) => {
    console.log("Somebody connected via socket.io")
  })
  
  // start listening
  httpServer.listen(PORT, () => {
    console.log(`Listening on port ${PORT} (HTTP + SOCKET.IO) ...`)
  }) 
  
})()

Websocket 连接失败（节点，快递，http，socket.io）

问题描述

1 个解决方案

解决方案1
0 2022-01-18 07:50:46

Websocket 连接失败（节点，快递，http，socket.io）

问题描述

1 个解决方案

解决方案1 0 2022-01-18 07:50:46

解决方案1
0 2022-01-18 07:50:46