搭建微信小程序wss环境-Apache篇

微信小程序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代理

  1. 将以下内容添加到放在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截图

搭建微信小程序wss环境-Apache篇_第1张图片

  1. 修改加密套件如下,以下内容查找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测试代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="米唐[email protected]">
    <title>WebSocket Testtitle>
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环境-Apache篇_第2张图片
这里用的是浏览器客户端测试结果,说明此时我们配置的wss:/域名/wss是通过的,也就符合了小程序后台设置要求,没有带端口,当然这里主要用到代理的方法。如有问题欢迎issue。

未经授权请勿转载,本文参考文档workerman开发手册,指在帮助微信小程序phper开发者快速配置wss,

你可能感兴趣的:(微信小程序)