使用 Node 和 React 应用程序连接到 WebSocket 服务器

Question

我的树莓派上运行着一个 nginx Web 服务器。在网络服务器中，我有一个 React 应用程序，在后端有一个节点服务器。当我在本地运行时，一切都很好。但我很难让虚拟主机配置能够利用并访问 websocket 服务器。我已经尝试了一百万次，如果我无法解决这个问题，我准备将这个树莓派重新用于我的 3D 打印机。

以下是与此问题相关的代码。

在前端：

import useWebSocket, { ReadyState } from 'react-use-websocket';

const WS_URL = wss://localhost:3000/ws

；我也试过

ws://localhost:3000

。

NODE 服务器代码：

const { WebSocket, WebSocketServer } = require('ws');
const http = require('http');
require('dotenv').config();

// Spinning the http server, the WebSocket server, and initiating Redis.
const server = http.createServer();
const wsServer = new WebSocketServer({ server });
const port = 3000;
const redis = createClient({
  url: process.env.REDIS_CONNECTION_URL
});
redis.on('error', err => console.log('Redis Client Error', err));
server.listen(port, async () => {
  await redis.connect();
  console.log(`WebSocket server is running on port ${port}`);
});
And last, but certainly not least is the nginx conf.

server {
        server_name stef.page www.stef.page;
        root /var/www/stef.page/build;
        index index.html;

location /ws {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/stef.page/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/stef.page/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.stef.page) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = stef.page) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name stef.page www.stef.page;
    return 404; # managed by Certbot

}

当我运行“node index.js”时，响应令人满意。一切似乎都在运转。但在客户端上，我当前在此配置中收到的错误是：WebSocket 连接到“wss://localhost:3000/ws”失败

Answer 1

如果您的客户端不是 Pi，那么您需要更新您的 websocket url 以使用 Pi 的主机名或 IP 地址，而不是

localhost

。它在本地运行良好，因为客户端和服务器都在同一主机上运行。但是当尝试启动 websocket 连接时，PC 上的客户端（可能是浏览器）本身是 localhost，因此它尝试在您的 PC 而不是 Pi 上打开 Web 套接字。