如何让 socket.io 与 ES6 导入模块一起工作？ [复制]答案

【问题标题】：How to get socket.io working with ES6 import modules? [duplicate]如何让 socket.io 与 ES6 导入模块一起工作？ [复制]
【发布时间】：2022-01-05 16:04:33
【问题描述】：

我将一个简单的 socket.io 示例从 CommonJS require 语法重构为 ES6 import 语法，但是当我启动服务器并访问网站时，尽管它显示了 HTML 文本（“test from server.js” )，它不会通知服务器它已连接。

然而控制台中根本没有错误，它就像 socket.io 根本没有加载一样。

在我的package.json 文件中，我有以下条目以便 ES6 模块在 Node 中工作：

"type": "module",

为什么 socket.io 不工作？

server.js

import path from 'path';
import http from 'http';
import express from 'express';
import { Server as socketIO } from 'socket.io';

const app = express();
const PORT = 5011;
const __dirname = path.resolve(path.dirname(''));
const server = http.Server(app);
const io = new socketIO(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
    console.log('user connected');
    socket.emit('greeting-from-server', {
        greeting: 'you loaded the page'
    });
})

app.listen(PORT, () => {
    console.log(`listening on port http://localhost:${PORT}`);
});

/public/index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Socket.IO</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io('http://localhost:5011');
        socket.on('greeting-from-server', (data) => {
            console.log(data);
            socket.emit('greeting-from-client', {
                greeting: 'Hello Server'
            });
        });
    </script>
</head>

<body>
    test from server.js
</body>

</html>

【问题讨论】：

标签： javascript node.js socket.io

【解决方案1】：

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
const io = new Server(httpServer, {
  // ...
});

io.on("connection", (socket) => {
  // ...
});enter code here

httpServer.listen(3000);

【讨论】：

我的意图是让它与 Express 一起工作，但您的 createServer() 代码让我意识到我需要在 app 上而不是在 server 上调用 listen。我的快速代码现在可以工作了。谢谢。
这样的答案根本没有关于您修复的内容/原因的文字解释是一个难题，需要读者尝试弄清楚。请添加解释性文字以及您所做的更改以及原始问题的原因和问题。