基於 Apaache 的 laravel-websocket SSL配置（wss連線）

微波爐發表於2021-10-15
LaravelWeb

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 埠並非固定，可以使用其他埠，但請記住在伺服器安全組中開放該埠
  • 此處使用的虛擬主機域名與應用域名相同，只是埠不同，所以使用相同的 SSL 證照即可。
  • 6001 埠為本地 Websocket 執行的埠，請根據自己應用的埠進行修改。
  1. 配置 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
  1. 啟動 WebSocket 服務
    php artisan websockets:serve
    Enjoy it!
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章