对本地应用程序使用不安全的websocket的PWA

Question

我正在努力理解HTTP、HTTPS、WS和WSS。

我有一个托管在HTTPS端点上的vue PWA。在该应用程序内部，我尝试连接到一台本地PC，该PC在HTTP端点上托管SignalR-hub。

我正在使用@aspnetcore/signalr typescript包。这一切在开发机器上都工作得很好，但只要我用PWA尝试它，我就会得到以下错误：

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

我的连接构建器看起来像这样：

this.signalRConnection = new HubConnectionBuilder()
      .withUrl(`http://${this.localIp}/${this.hubName}`, {
        skipNegotiation: true,
        transport: HttpTransportType.WebSockets
      })
      .configureLogging(LogLevel.Information)
      .build();

我想要实现的目标有可能实现吗？

Answer 1

就像前面提到的错误:从HTTPS站点进行不安全的websocket连接。确保您要连接的websocket服务器支持WSS协议应为wss://

Answer 2

我最近不得不解决一个类似的问题。我最终得到了以下解决方案。我为本地的websocket服务器创建了一个新的A记录，类似于ws.example.org，其中包含本地网络中服务器的IP地址。然后，我必须为此服务器添加一个SSL证书。为此，我使用certbot创建了一个手动证书(我的服务器没有连接到互联网，因此不可能进行自动质询，但可以编写脚本)。最后，在安装证书之后，我的PWA能够建立wss连接。