基於 Apaache 的 laravel-websocket SSL配置(wss連線)

微波爐發表於2021-10-15

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 協議》,轉載必須註明作者和本文連結

相關文章