搭建微信小程式wss環境-Apache篇

阿新 • • 發佈：2019-02-06

微信小程式wss簡介

在微信小程式開發時，有時候根據業務需求遇到需要用到websocket這個api，但微信官方的規則是在配置websocket伺服器地址時候必須要求wss以及不能攜帶埠，因此，本文介紹了thinkphp5在wamp下如何配置一個符合要求的微信小程式所需要的wss。

利用apache代理wss

前期準備

1、編寫socket服務（本文用的workerman）監聽 8888 埠（這裡可以隨意指定可用的非被佔用埠）——(websocket協議)
2、已經申請了ssl證書，並且配置ssl安全協議
3、利用apache轉發443埠至指定埠8888
4、httpd-ssl.conf 已載入
5、openssl 已安裝

開啟httpd.conf中的相應模組

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

新增wss代理

將以下內容新增到放在httpd-ssl.conf的VirtualHost標籤內

ProxyRequests Off
ProxyPass /wss ws://127.0.0.1:8888
ProxyPassReverse /wss ws://127.0.0.1:8888

下面是httpd-ssl.conf截圖

這裡寫圖片描述

修改加密套件如下，以下內容查詢httpd-ssl.conf相應內容修改即可

SSLProtocol all -SSLv2 -SSLv3
SSLCipherSuite HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM
SSLHonorCipherOrder on

程式碼測試

服務端程式碼

class Worker extends Server
{
    protected $socket = 'websocket://0.0.0.0:8888';
    /**
     * 收到資訊
     * @param $connection
     * @param $data
     */ 

    public function onMessage($connection, $data)
    {
        $connection->send('我收到你的資訊了');
    }
    /**
     * 當連線建立時觸發的回撥函式
     * @param $connection
     */
    public function onConnect($connection)
    {
    }
    /**
     * 當連線斷開時觸發的回撥函式
     * @param $connection
     */
    public function onClose($connection)
    {
    }
    /**
     * 當客戶端的連線上發生錯誤時觸發
     * @param $connection
     * @param $code
     * @param $msg
     */
    public function onError($connection, $code, $msg)
    {
        echo "error $code $msg\n";
    }
    /**
     * 每個程序啟動
     * @param $worker
     */
    public function onWorkerStart($worker)
    {
    }
}

這裡解釋下繼承的Server是tp5整合workerman的Server類，這裡用到的是tp官網下載的thinkphp5.0.7完整包。

websocket測試程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="米唐[email protected]">
    <title>WebSocket Test</title>
</head>
<body>
<script>
    //這裡解釋下域名後面的/wss是剛剛我們配置的ProxyPass後面的/wss
    var ws = new WebSocket("wss://你配置的伺服器ssl域名/wss");
    ws.onopen = function() {
        console.log("連線成功");
        ws.send('test');
    };
    ws.onerror = function (ev) {
        console.log('連結失敗')
    }
    ws.onmessage = function(e) {
        console.log("收到服務端的訊息：" + e.data);
    };
</script>
</body>
</html>

執行結果截圖

這裡寫圖片描述
這裡用的是瀏覽器客戶端測試結果，說明此時我們配置的wss:/域名/wss是通過的，也就符合了小程式後臺設定要求，沒有帶埠，當然這裡主要用到代理的方法。如有問題歡迎issue。

未經授權請勿轉載，本文參考文件workerman開發手冊，指在幫助微信小程式phper開發者快速配置wss，

搭建微信小程式wss環境-Apache篇

前期準備

開啟httpd.conf中的相應模組

新增wss代理

程式碼測試

搭建微信小程式wss環境-Apache篇

快速搭建微信小程式開發環境

阿里雲服務搭建微信小程式開發環境

搭建微信小程式基本的https與wss環境

搭建微信小程式環境的一些心得

微信小程式開發環境搭建

微信小程式開發環境（阿里雲服務搭建+可執行的demo）

3步搭建微信小程式服務端環境筆記

基於Ubuntu搭建微信小程式服務

搭建微信小程式的本地測試伺服器 json-server

springboot搭建微信小程式

【微信小程式控制硬體①】全網首發，藉助 emq 訊息伺服器帶你如何搭建微信小程式的mqtt伺服器，輕鬆控制智慧硬體！

ubuntu/linux部署微信小程式開發環境

怎麼搭建微信小程式的本地測試伺服器

微信小程式開發環境部署

基於CentOS搭建微信小程式服務

【微信小程式】入門第一篇註冊賬號

微信小程式開發教程(基礎篇)6-logs頁面解析

微信小程式開發教程(基礎篇)3-app.js 解析

微信小程式開發教程(基礎篇)8-資料繫結下

搭建微信小程式wss環境-Apache篇

前期準備

開啟httpd.conf中的相應模組

新增wss代理

程式碼測試

相關推薦