使用 express 和 socket.io 的简单节点客户端服务器通信不起作用答案

【问题标题】：simple node client server communication not working using express and socket.io使用 express 和 socket.io 的简单节点客户端服务器通信不起作用
【发布时间】：2021-08-24 01:36:48
【问题描述】：

我正在尝试编写一个简单的客户端服务器应用程序。

这就是 HTML：

<!DOCTYPE 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>Document</title>
</head>

<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script src="client.js"></script>
</body>

</html>

server.js 文件：

const express = require('express');
const app = express();
const port = 3000;
const server = app.listen(port);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.send('Hello World!');
});

io.on('connection', (socket) => {
    console.log('a user connected');
});

client.js 文件：

const socket = io('https://localhost:3000/');

此时，如果我通过在终端上键入 node server 来启动服务器并使用 LiveServer vs 扩展名打开 HTML 文件，控制台不会显示文本 a user已连接，它还会返回一个错误：

获取 https://localhost:3000/socket.io/?EIO=4&transport=polling&t=NdZ4wOd 网络::ERR_SSL_PROTOCOL_ERROR

我不知道我做错了什么。

【问题讨论】：

您可能没有运行 SSL 证书，应该改用 http://
@Kwright02 我已经尝试过了，它显示更多错误：从源 'localhost:3000/socket.io/…' 访问 XMLHttpRequest 已被 CORS 策略阻止：没有'访问控制-Allow-Origin' 标头出现在请求的资源上。 localhost:3000/socket.io/?EIO=4&transport=polling&t=NdZ9GyU:1 加载资源失败：net::ERR_FAILED
这意味着你还没有在 express 中启用 cors，但这也让我想知道你在这里实际上想做什么。
@Kwright02 我正在关注本教程，它似乎对他有用：youtu.be/PXBy6pB4mTU
@Seo 我不确定 liveserver 究竟是如何工作的，但看起来它从端口 5500 提供 index.html 文件，而您的后端在 3000 上运行，因此出现 cors 错误。幸运的是，socketio 有一个很好的文档来解决它：socket.io/docs/v4/handling-cors。您还可以直接从您的 express 服务器提供 index.html，在这种情况下，您不需要配置 cors。

标签： javascript html node.js express socket.io

【解决方案1】：

在 client.js 文件中，您可以尝试 const socket = io.connect();，我不确定，但我认为 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> 应该在标题中，但我可能错了。

【讨论】：

【解决方案2】：

**在您的服务器文件中进行更改**

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;
app.use(cors());
const server = app.listen(port);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.send('Hello World!');
});

io.on('connection', (socket) => {
    console.log('a user connected');
});

在使用 npm i cors 启动服务器之前安装 cors npm 包

【讨论】：

它说“标识符'express'已经被声明”，我想我只需要从第二行中删除“const”。
不，这是我复制粘贴的错误，我已经编辑了答案，请立即尝试。
谢谢，还是不行，不知道我做的对不对，我用liveserver打开html文件，把服务器和客户端文件中的端口改成5501，（使用liveserver打开文件的那个）