Connection to secure web socket python server from reactjs client

Question

Trying to connect websocket python server from the reactjs client.

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Web socket python server

ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
localhost_pem = pathlib.Path(__file__).with_name("localhost.pem")
ssl_context.load_cert_chain(localhost_pem)

start_server = websockets.serve(
    asl_video, "0.0.0.0", 8766, ssl=ssl_context, ping_interval=30, ping_timeout=30, max_size=None
)

Code in reactjs application

var webSocket =  new W3CWebSocket('wss://10.12.5.112:8766');

Answer 1

I updated the following line (line number 62) in the file node_modules/react-dev-utils/webpackHotDevClient.js

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws', protocol: window.location.protocol === 'https:' ? 'wss' : 'ws', which was previously protocol: 'ws',

It resolved the error SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Thanks,