前言

laravel-websocket 官网中有说明如何使用SSL，但可能因为我服务器是 WindowsServer 的原因，最终按其所述步骤配置后甚至 ws:// 都无法访问，故寻求其他方法。官网提供了使用 Nginx 反向代理来实现 wss:// 连接的方法，但项目使用的是 Apache，故想在 Apache 上应用反向代理的思路来使用 wss:// 连接

服务器环境

本文的环境如下，不同环境下的 Apache 配置可能存在不同，请自行修改。

• WindowsServer 2016
• WAMP 3.2.0 ( Apache 2.4.41 )

正文

原理

使用 Apache 并应用 SSL 加密，使用户与服务端的数据传输加密，再在 Apache 上配置反向代理，将接收到的请求以明文的方式转发给本地 Websocket 端口。

步骤

假设应用地址为 www.example.com，由于本文是基于https下 Websocket 无法连接而提出的，所以本文假设你本地的 SSL 模块已开启。

1. 配置 SSL 虚拟主机
   打开 Apache 的 http-ssl.conf，新增基于端口的虚拟主机，并配置反向代理

   <VirtualHost *:6002>
    ServerName netsport.scaumis.cn:6002
    ServerAdmin admin@example.com
    ErrorLog "${SRVROOT}/logs/error.log"
    TransferLog "${SRVROOT}/logs/access.log"
    SSLEngine on
    SSLProxyEngine on
    SSLProxyVerify none
    SSLProxyCheckPeerCN off
    SSLProxyCheckPeerName off
    SSLProxyCheckPeerExpire off
    # 由于没有使用新的域名，此处与你的应用一致
    SSLCertificateFile
   "${SRVROOT}/conf/cert/netsport.scaumis.cn_server.crt"
    # 由于没有使用新的域名，此处与你的应用一致
    SSLCertificateKeyFile "${SRVROOT}/conf/cert/netsport.scaumis.cn_server.key"
    #SSLCertificateChainFile   ""
   
    # 代理部分
    ProxyRequests off
    ProxyVia on
    RewriteEngine On
    # 将到达本网址的所有请求重写至本地 WebSocket服务
    RewriteCond %{HTTP_HOST} ^www.example.com [NC]
    RewriteRule /(.*) ws://127.0.0.1:6001/$1 [P,L]
    # 正向代理
    ProxyPass / ws://127.0.0.1:6001
    # 反向代理
    ProxyPassReverse / ws://127.0.0.1:6001
   </VirtualHost> 

   由于 Apache 与 Websocket 使用明文传输，代理网址使用 ws:// 即可，此处需要注意：

• 6002 端口并非固定，可以使用其他端口，但请记住在服务器安全组中开放该端口，并使 Apache 监听该端口。

  Listen 6002

• 此处使用的虚拟主机域名与应用域名相同，只是端口不同，所以使用相同的 SSL 证书即可。
• 6001 端口为本地 Websocket 运行的端口，请根据自己应用的端口进行修改。

2. 配置 laravel-echo
   打开项目 resources/js/bootstrap.js，修改其中的 echo 初始化，增加对 wssPort 的初始化。

   // 初始化 laravel-echo 插件
   window.Echo = new Echo({
    cluster: 'mt1',
    broadcaster: 'pusher',
    key: 'example',
    wsHost: location.hostname,
    // socket 监听的端口
    wsPort: 6001,
    // 增加对 wssPort 的初始化
    wssPort: 6002,
    forceTLS: false,
   });

   此步骤需要注意：

• wssPort 的值即为上一步配置的虚拟机的端口
• 编辑后需要运行 npm run dev

3. 启动 WebSocket 服务

   php artisan websockets:serve

   Enjoy it!

本作品采用《CC 协议》，转载必须注明作者和本文链接