我有一个React应用程序（客户端）和Express（服务器端）。我正在尝试使用Socket.io建立连接。
第一个月

// server/server.js:

const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const socketioJwt = require('socketio-jwt');
const cors = require('cors');
const helmet = require('helmet');

const app = express();

// Enable CORS for all routes
app.use(cors());

// Enable Trust Proxy
app.set("trust proxy", 1);

// Use Helmet middleware to enhance security
app.use(helmet());

// Add this line to parse JSON data in incoming requests
app.use(express.json());

const httpServer = createServer(app);
const io = new Server(httpServer, {
cors: {
origin: "http://localhost:3000", // here i am putting the Ngork Client Url "https://ngrok-url.com"
methods: \["GET", "POST"\],
credentials: true,
},
});

const port = process.env.PORT || 4821;

io.use((socket, next) =\> {
const clientIP = socket.handshake.address;

Configure JWT authentication middleware
io.use(
socketioJwt.authorize({
secret: secretKey, // my secret from .env file
handshake: true,
})
);

个字符
NGROK服务器：（在虚拟机/Linux Ubuntu/Node.js LTS 18上）

1. sudo ufw status，//（active），sudo ufw allow 4821，sudo ufw reload
   1.启动/server - npm start; // script：nodemon node server.js
   1.使用- ngrok启动服务器//ngrok.yml http localhost：4821启动ngrok隧道
   1.获取Ngrok https服务器URL
   1.将Ngrok服务器URL粘贴到/client/App. js//键入cnpm +c，npm重新启动App.js
   NGROK客户端：（在MAC上）
   1.启动-/client/src/App.js- npm start
   1.使用- ngrok start客户端//ngrok.yml http localhost：3000启动ngrok隧道
   1.获取Ngrok https客户端URL
   1.将Ngrok客户端URL粘贴到/server/server. js//在终端中键入“rs”以重新启动nodemon
   当我使用localhost：3000（客户端）和localhost：4821（服务器）时，我可以看到Socket.io连接，我没有任何问题。但是当我使用Ngrok时，我有一个大问题，我看不到Socket.io连接。
   我在浏览器控制台中没有错误。
   在网络选项卡（ALL）中，当我点击/socket时，我看到：
   Request URL: https://f65b-185-213-154-249.ngrok-free.app/socket.io/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InNhdG9zaGlAMjFubWlsbC5pbyIsImlhdCI6MTY5ODUwNjE1M30.v5hCOKlmMHf3RSEdXTumzO7PEtKzYz-XZrA6CqPsCkg&EIO=4&transport=polling&t=OjssoEr Request Method: GET Status Code: 200 OK (from service worker) Referrer Policy: strict-origin-when-cross-origin Access-Control-Allow-Origin: * Content-Length: 1396 Content-Security-Policy: default-src 'self' https://cdn.ngrok.com 'unsafe-eval' 'unsafe-inline'; img-src data: w3.org/svg/2000 Content-Type: text/html Date: Sat, 28 Oct 2023 15:15:55 GMT Ngrok-Trace-Id: 7ca3e23723940ef090231cf42ad421a1 Referrer-Policy: no-referrer X-Content-Type-Options: nosniff Accept: */* Referer: https://ed5e-185-213-154-249.ngrok-free.app/ Sec-Ch-Ua: "Chromium";v="118", "Brave";v="118", "Not=A?Brand";v="99" Sec-Ch-Ua-Mobile: ?0 Sec-Ch-Ua-Platform: "macOS"个
   在网络选项卡（WS）中，当我点击/socket.时，我只看到一个sockjs-node，然后当我点击sockjs-node时：
   Request URL: wss://ed5e-185-213-154-249.ngrok-free.app/sockjs-node Request Method: GET Status Code: 101 Switching Protocols Connection: Upgrade Ngrok-Trace-Id: 58a6ffcdbd0cd5a1ef2d633378c24398 Sec-Websocket-Accept: ONgwe/ms0WvXB6Tb2eIyPvx6dVo= Upgrade: websocket Accept-Encoding: gzip, deflate, br Accept-Language: en-GB,en-US;q=0.9,en;q=0.8 Cache-Control: no-cache Connection: Upgrade Cookie: abuse_interstitial=ed5e-185-213-154-249.ngrok-free.app Host: ed5e-185-213-154-249.ngrok-free.app Origin: https://ed5e-185-213-154-249.ngrok-free.app Pragma: no-cache Sec-Gpc: 1 Sec-Websocket-Extensions: permessage-deflate; client_max_window_bits Sec-Websocket-Key: QQjVTB/9a2Ou5OcaPX2YnA== Sec-Websocket-Version: 13 Upgrade: websocket User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36\个
   我认为错误的是我没有Ngrok（Let's Encrypt）的SSL证书。我还认为我需要在client/src/App.js文件中添加两行额外的代码，但我不确定是否真的需要：

// /client/src/App.js 

...  

const socket = io("http:/localhost:4821", 
{   query: { token },   
withCredentials: true, // NEW LINE   
transport: [websockets, polling], // NEW LINE 
});

型