当您尝试从一个通过 HTTPS 加载的页面发起一个非安全的 WebSocket 连接时，浏览器会阻止这种行为，因为这可能会导致安全风险。现代浏览器要求，如果页面本身是通过 HTTPS 加载的，那么 WebSocket 连接也必须是加密的，即使用 wss:// 而不是 ws://。

解决这个问题的方法很简单，就是确保您的 WebSocket 连接也是通过 HTTPS (WSS) 建立的。这意味着 WebSocket 服务器也需要支持 SSL/TLS 加密。

如何配置 WebSocket 服务器支持 WSS

1. 获取 SSL 证书：首先，确保您有有效的 SSL 证书。您可以从 Let’s Encrypt 免费获得证书。

2. 配置 WebSocket 服务器：根据您使用的 WebSocket 服务器软件进行配置，以支持 SSL/TLS。下面是一些常见语言的示例：

   • Node.js (ws 库):

     const fs = require('fs');
     const https = require('https');
     const WebSocket = require('ws');
     
     const server = https.createServer({
       cert: fs.readFileSync('/path/to/your_cert.pem'),
       key: fs.readFileSync('/path/to/your_key.pem')
     });
     
     const wss = new WebSocket.Server({ server });
     
     wss.on('connection', function connection(ws) {
       ws.on('message', function incoming(message) {
         console.log('received: %s', message);
       });
     
       ws.send('something');
     });
     
     server.listen(8080, function listening() {
       console.log('Listening on %d', server.address().port);
     });
     

   • Python (websockets 库):

     import asyncio
     import ssl
     import websockets
     
     ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
     ssl_context.load_cert_chain('/path/to/your_cert.pem', '/path/to/your_key.pem')
     
     async def echo(websocket, path):
         async for message in websocket:
             await websocket.send(message)
     
     start_server = websockets.serve(echo, "localhost", 8765, ssl=ssl_context)
     
     asyncio.get_event_loop().run_until_complete(start_server)
     asyncio.get_event_loop().run_forever()
     

3. 更新前端代码：确保前端代码使用 wss:// 协议连接到 WebSocket 服务器。例如：

   var socket = new WebSocket('wss://yourdomain.com:8765');
   

4. 测试连接：确保 WebSocket 服务器正在运行，并且可以通过 wss:// 正常访问。然后，重新加载您的网页，检查 WebSocket 连接是否成功建立。

完成以上步骤后，您应该能够从 HTTPS 页面安全地建立 WebSocket 连接，而不会遇到“An insecure WebSocket connection may not be initiated from a page loaded over HTTPS”的错误。