前言

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 虚拟主机
2. 打开 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> 

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

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

Listen 6002

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

1. 配置 laravel-echo
2. 打开项目 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,
});

1. 此步骤需要注意：

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

1. 启动 WebSocket 服务

php artisan websockets:serve

1. Enjoy it!