nginx 使用Node和React App连接到WebSocket服务器

hgc7kmma  于 2023-10-17  发布在  Nginx
关注(0)|答案(1)|浏览(121)

这个问题是来自超级用户的migrated,因为它可以在Stack Overflow上回答。Migrated上个月。
我有一个Nginx Web服务器运行在我的树莓派。在Web服务器中,我有一个React App,后端有一个节点服务器。当我在本地运行时,一切都很好。但是我在获得虚拟主机配置以便能够利用和访问WebSocket服务器上遇到了困难。我已经尝试了一百万件事,我准备重新利用这个树莓派回到我的3d打印机,如果我不能得到这个弄清楚。
下面是应该与此问题相关的代码。
在前端:

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

const WS_URL = wss://localhost:3000/ws;我也试过ws://localhost:3000
NODE服务器代码:

  1. const { WebSocket, WebSocketServer } = require('ws');
  2. const http = require('http');
  3. require('dotenv').config();
  4. // Spinning the http server, the WebSocket server, and initiating Redis.
  5. const server = http.createServer();
  6. const wsServer = new WebSocketServer({ server });
  7. const port = 3000;
  8. const redis = createClient({
  9. url: process.env.REDIS_CONNECTION_URL
  10. });
  11. redis.on('error', err => console.log('Redis Client Error', err));
  12. server.listen(port, async () => {
  13. await redis.connect();
  14. console.log(`WebSocket server is running on port ${port}`);
  15. });
  16. And last, but certainly not least is the nginx conf.
  17. server {
  18. server_name stef.page www.stef.page;
  19. root /var/www/stef.page/build;
  20. index index.html;
  21. location /ws {
  22. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  23. proxy_set_header Host $host;
  24. proxy_pass http://localhost:3000;
  25. proxy_http_version 1.1;
  26. proxy_set_header Upgrade $http_upgrade;
  27. proxy_set_header Connection "upgrade";
  28. }
  29. listen [::]:443 ssl ipv6only=on; # managed by Certbot
  30. listen 443 ssl; # managed by Certbot
  31. ssl_certificate /etc/letsencrypt/live/stef.page/fullchain.pem; # managed by Certbot
  32. ssl_certificate_key /etc/letsencrypt/live/stef.page/privkey.pem; # managed by Certbot
  33. include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  34. ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
  35. }
  36. server {
  37. if ($host = www.stef.page) {
  38. return 301 https://$host$request_uri;
  39. } # managed by Certbot
  40. if ($host = stef.page) {
  41. return 301 https://$host$request_uri;
  42. } # managed by Certbot
  43. listen 80;
  44. listen [::]:80;
  45. server_name stef.page www.stef.page;
  46. return 404; # managed by Certbot
  47. }

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

7y4bm7vi

7y4bm7vi1#

如果你的客户端不是Pi,那么你需要更新你的WebSocket url,使用Pi的主机名或IP地址,而不是localhost。它在本地工作正常,因为客户端和服务器都运行在同一台主机上。但是,当试图启动WebSocket连接时,PC上的客户端(可能是浏览器)本身是本地主机,因此它试图在PC上打开一个Web Socket,而不是Pi。

相关问题