小程序開發之搭建WebSocket的WSS環境（Apache+WorkerMan框架+PHP）

最近公司的一個IoT項目用到了小程序的WSS協議環境，如今把整個的搭建開發過程分享給你們。

這裏咱們用的是WorkerMan框架，服務器是CentOS，Web服務器是Apache，開發語言是PHP。

由於WSS是WebSocket和SSL的結合，因此須要提早準備好對應域名的SSL證書，通常狀況下是三個證書文件，好比下面：

SSLCertificateFile "/www/wwwroot/test.crt"
SSLCertificateKeyFile "/www/wwwroot/test.key"
SSLCertificateChainFile "/www/wwwroot/test-ca-bundle.crt"

好，開始吧！

 

搭建能夠端口訪問的WSS協議長鏈接環境

我以端口號39001（必須接入防火牆白名單）爲例，代碼以下：

 1 <?php
 2 require_once __DIR__ . '/Workerman/Autoloader.php';
 3 use Workerman\Worker;
 4 
 5 // 證書最好是申請的證書
 6 $context = array(
 7 
 8     'ssl' => array(
 9         // 請使用絕對路徑
10         'local_cert'                 => '/www/wwwroot/test.pem', // 也能夠是crt文件
11         'local_pk'                   => '/www/wwwroot/test.key',
12         'verify_peer'                => false,
13         // 'allow_self_signed' => true, //若是是自簽名證書須要開啓此選項
14     )
15 );
16 // 這裏設置的是websocket協議（端口任意，可是須要保證沒被其它程序佔用）
17 $worker = new Worker('websocket://0.0.0.0:39001', $context);
18 // 設置transport開啓ssl，websocket+ssl即wss
19 $worker->transport = 'ssl';
20 $worker->onMessage = function($con, $msg) {
21     $con->send('ok');
22 };
23 
24 Worker::runAll();

這樣搭建完以後，Workerman就監聽了端口爲39001的wss協議，客戶端就能夠經過wss協議來鏈接workerman實現安全即時通信了。

客戶端的測試鏈接代碼以下，能夠經過打開chrome瀏覽器，按F12打開調試控制檯，在Console一欄輸入，或者把下面代碼放入到html頁面用js運行。

1 ws = new WebSocket("wss://www.bojuwang.net:39001");
2 ws.onopen = function() {
3     alert("WSS鏈接成功");
4     ws.send('伯駒網絡');
5     alert("給服務端發送一個字符串：伯駒網絡");
6 };
7 ws.onmessage = function(e) {
8     alert("收到服務端的消息：" + e.data);
9 };

握手鍊接過程當中若是出現404或者503的錯誤，通常是程序的問題，請本身檢查。返回200說明總體鏈接成功。

這樣咱們就搭建了一個完整的WSS環境，可使用了。可是小程序的WSS還比較特殊，由於它不容許使用443（SSL服務的默認端口）以外的端口，也就是咱們只能使用這樣的wss://www.bojuwang.net鏈接網址而不能使用這樣帶端口的wss://www.bojuwang.net:39001。這就須要咱們使用Apache的代理服務，來解決這個問題。

 

搭建小程序WSS協議長鏈接環境（不帶端口）

首先，咱們先建立監聽39001的WebSocket，而後經過Apache代理將ws協議轉爲wss協議。

使用Workerman建立監聽

<?php

require_once __DIR__ . '/workerman/Autoloader.php';
use Workerman\Worker;
use Workerman\Lib\Timer;

$ws_worker = new Worker("websocket://0.0.0.0:39001");

$ws_worker->count = 4;

// 當收到客戶端發來的數據$data，處理以後發送給客戶端
$ws_worker->onMessage = function($connection, $data)
{
   // 向客戶端發送消息
    $connection->send('5,'.$data.',1');
};


// 運行worker
Worker::runAll();

這個時候咱們使用上面的測試方法鏈接ws協議的網址是能夠成功的，接下來將ws轉換成wss。首先啓用Apache的SSL鏈接配置以及代理模塊，這一步很是重要，若是不啓用的話，代理就沒法生效。

具體啓用方法找到apache的httpd.conf，啓用代理模塊，方法以下：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

而後啓用SSL安全鏈接：

# Secure (SSL/TLS) connections
Include conf/extra/httpd-ssl.conf

具體的鏈接配置在這個httpd-ssl.conf文件中。而後咱們找到httpd-ssl.conf文件進行以下配置：

 1 Listen 443 
 2 <VirtualHost *:443> 
 3 
 4  # Proxy Config
 5  SSLProxyEngine on
 6  ProxyRequests Off
 7  
 8  DocumentRoot "/www/wwwroot/" 
 9  ServerName www.bojuwang.net:443
10  SSLEngine on 
11  SSLProtocol all -SSLv2 -SSLv3
12  SSLCipherSuite HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM
13  SSLHonorCipherOrder on
14  SSLCertificateFile "/www/wwwroot/test.crt" 
15  SSLCertificateKeyFile "/www/wwwroot/test.key" 
16  SSLCertificateChainFile "/www/wwwroot/test-ca-bundle.crt" 
17  
18  <Directory "/www/wwwroot/"> 
19     AllowOverride All 
20     Require all granted 
21  </Directory>
22  
23 
24  ProxyPass / ws://0.0.0.0:39001
25  ProxyPassReverse / ws://0.0.0.0:39001
26 </VirtualHost> 

配置過程當中監聽端口不要重複，不然重啓apache時會報錯。

 

各個代理路徑證書路徑也要注意，不然也會報錯。

至此，大功告成！

這個時候服務器監聽到443的SSL請求，就會代理到39001長鏈接端口，實現了WSS協議。