解决此反应 websocket 问题的正确方法？答案

【问题标题】：proper way to fix this react websocket issue?解决此反应 websocket 问题的正确方法？
【发布时间】：2020-01-22 00:52:04
【问题描述】：

我已向 Google Cloud Provider 部署了一个基本的测试 React 应用，但在 https://{my-app}.appspot.com/ 处返回以下错误：

SecurityError: 无法构造“WebSocket”：不安全的 WebSocket 连接可能不会从通过 HTTPS 加载的页面启动。

我发现了这个问题和 PR：

https://github.com/facebook/create-react-app/issues/8075 https://github.com/facebook/create-react-app/pull/8079

以下文章引用了这两个网址：

https://medium.com/@sydbails/create-react-app-websocket-error-and-solution-you-re-welcome-7ba9c2f48546

这篇文章的作者提到了一种直接修改部分代码的解决方法：

node_modules > react-dev-utils > webpackHotDevClient.js

但是根据我在这篇文章的第二个 url 中提供的 PR，难道不是已经存在 PR 来解决这个问题吗？那么作者为什么要更改node_module代码呢？但是即使使用作者提到的解决方法，在部署环境中仍然返回以下错误：

错误：服务器错误服务器遇到临时错误，可以未完成您的请求。请在 30 秒后重试。

对我来说，针对此问题应用 PR 修复的正确方法是什么？

【问题讨论】：

标签： reactjs

【解决方案1】：

错误告诉您您的问题。您的网站托管在 https 上，因此浏览器不允许您对 http 或 ws 内容进行任何 API 或 websocket 调用，因为它不安全。您需要使用 SSL over wss 协议托管您的 websocket 服务器，然后您的代码将能够进行调用。否则通过 http 而不是 https 托管您的网站（坏主意）。阅读此Difference between ws and wss?

【讨论】：