問題点
create-react-appで作成したアプリケーションにhttpsでアクセスすると、以下のようにエラーとなりました。SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
httpだと問題なく動きます。
create-react-appで作ったアプリを試しにHerokuに上げてみたときに、この問題を踏みました。
原因
以下でIssuesが上がっていました。
https://github.com/facebook/create-react-app/issues/8075
https://github.com/facebook/create-react-app/pull/8079
WebSocketsを利用している箇所で、httpsの場合はwss(WebSockets over SSL)を利用しなくてはいけないところ、wsを利用してしまっているためのようです。
解決法
問題が発生しているときのpackage.jsonの依存関係は以下です。
package.json
"dependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","react":"^16.12.0","react-dom":"^16.12.0","react-scripts":"3.3.0"}react-scriptの3.3.0で発生している問題なので、3.2.0にバージョンダウンすると、一旦動作するようになります。
$ npm install react-scripts@3.2.0
react-scriptsのバージョン変更がpackage.jsonにも反映され、httpsでも動作するようになりました。
package.json(更新後)
"dependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.4.0","@testing-library/user-event":"^7.1.2","react":"^16.12.0","react-dom":"^16.12.0","react-scripts":"3.2.0"}
上記Issuesは、react-scriptの3.3.1で修正予定(2019/12/15時点)のようなので、バージョン下げは暫定対応とし、修正されたら3.3.1に上げるのがよいと思います。