为你的flarum配置websocket以代替pusher进行消息推送

傑克•特裡•斯科鋪

插件flarum官方讨论贴：Websockets - Locally Hosted Alternative for Pusher (Now Free) - Flarum Community

extiverse上的插件介绍：kyrne/websocket : Extiverse

本篇文章只是对教程进行了一遍无脑的翻译，以及宝塔面板的演示。

插件的作者是Kyrne，之前这个插件是付费的，现在是免费的，开发者yyds。

为什么需要他？

消息推送是一个论坛不可少的功能，flarum带了基于pusher的消息推送插件，但是由于pusher的服务器在国外,
那为什么我们不能自己搭一个类似于pusher的服务呢？
这时基于websocket协议进行推送的插件应运而生。

安装要求

你的网站需要ssl

你的网站不能托管在虚拟主机上

你的web服务器是nginx

注本楼针对域名直接解析源站的大佬，如果您在使用cdn，请看3楼

修改nginx配置过程

1.修改伪静态配置

然而，这一步似乎不是必要的，修改成@web后，就会报错了，建议直接跳到下一步

打开宝塔面板网站设置的伪静态配置下，确保内容跟flarum根目录下一致。
你应该看到的是这样的

# Pass requests that don't refer directly to files in the filesystem to index.php

location / {

  try_files $uri $uri/ /index.php?$query_string;

}

把location 后面的 / 改成 @web
即这样

# Pass requests that don't refer directly to files in the filesystem to index.php
location @web {
  try_files $uri $uri/ /index.php?$query_string;
}

2.打开网站的配置文件

首先将

map $http_upgrade $type {

  default "web";

  websocket "ws";

}

粘贴在配置文件顶部

然后将下方代码粘贴在几个location{xxxx}之间
像这样

location / {
		try_files /nonexistent @$type;
	}

	location @ws {
	    proxy_pass             http://127.0.0.1:2083;
	    proxy_read_timeout     60;
	    proxy_connect_timeout  60;
	    proxy_redirect         off;

	    # Allow the use of websockets
	    proxy_http_version 1.1;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection 'upgrade';
	    proxy_set_header Host $host;
	    proxy_cache_bypass $http_upgrade;
	}

PS:原文的教程上方那段代码中@web是 /的，经过测试，需要改成@web才能通过测试

然后整个配置文件类似这样，

map $http_upgrade $type {
  default "web";
  websocket "ws";
}
server
{
    listen 80;
	listen 443 ssl http2;
    server_name test11.cplusc.top;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/xxx/public;
    
    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #HTTP_TO_HTTPS_START
    if ($server_port !~ 443){
        rewrite ^(/.*)$ https://$host$1 permanent;
    }
    #HTTP_TO_HTTPS_END
    ssl_certificate    /www/server/panel/vhost/cert/xxx.com/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/xxx.com/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;

    #SSL-END
    
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-74.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/xxx.com.conf;
    #REWRITE-END
    
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null; 
    }
    location @web {
		try_files /nonexistent @$type;
	}

	location @ws {
	    proxy_pass             http://127.0.0.1:2083;
	    proxy_read_timeout     60;
	    proxy_connect_timeout  60;
	    proxy_redirect         off;

	    # Allow the use of websockets
	    proxy_http_version 1.1;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection 'upgrade';
	    proxy_set_header Host $host;
	    proxy_cache_bypass $http_upgrade;
	}
    access_log  /www/wwwlogs/xxx.com.log;
    error_log  /www/wwwlogs/xxx.com.error.log;
}

配置插件

1.安装插件以及相关依赖。

执行composer require kyrne/websocket -W

安装websocket插件及依赖

通常，您在不加-W是会如下方一样出错，您需要加上-W设置忽略版本匹配

2.放行相关端口

websocket默认端口是2083，请到安全栏下放行2083端口

3.开启websocket插件并配置证书

打开flarum后台,启用websocket插件并修改两项内容本地SSL证书路径&本地 SSL 私钥路径
nginx配置文件中11和12行的ssl_certificate和ssl_certificate_key的内容就分别对应了本地SSL证书路径和本地 SSL 私钥路径

保存

3.开启websocket服务

这时候，你只需要在你的flarum根目录下运行
php flarum websocket:serve
以开启websocket服务

当他出现这样的提示时，代表您的websocket已经开启成功

等等

为什么我关闭终端，websocket就不行了

这时候，您需要Supervisor管理器，它能够守护您的websocket服务进程
在软件商店安装好后
设置=>添加守护进程=>名称随便，用户默认root，目录选择您flarum的根目录，命令填入php flarum websocket:serve
然后确定，当您看到

出错？状态backoff？
请关闭刚刚在终端运行的服务。

尽情享受websocket带给你的推送(新)体验！

websocket

Q&A

q：我的论坛用了cdn，能用这个插件吗？
a：可以前提是你套了cf，又拍云等支持websocket的cdn

傑克•特裡•斯科鋪

9/8补充说明

据说又拍云一个域名只能绑定一个服务，即不能同时用cdn和websocket服务

傑克•特裡•斯科鋪

CDN用户解决方案

~~不会吧，不会吧，不会还有人像我们一样用CDN吧~~
通常，我们为了缓解源站压力，以及增强安全性，我们会为网站套上CDN。但是CDN也有一定的局限性，大多数CDN提供商只会加速HTTP(S),对于websocket协议ws（s）也就无能为力了，这也意味着你在使用这些提供商的服务时不能用websocket为你的flarum进行消息推送。

当然，也还是由一些商家的支持websocket加速的，例如又拍云以及大名鼎鼎的cloud flare。又拍的要求挺苛刻的，CDN和websocket不能绑定同一加速域名，cf则支持的很好，两者可以同时使用。并且如果你在用cf的话，操作起来很简便。

对于不用cdn，域名直接解析到源站的大佬

请看一楼

对于一般cdn的用户

我们的方案是，用另外一个域名绑定websocket服务，本楼层旨在介绍我们的踩坑过程

请结合一楼修改nginx配置以及配置websocket插件前两步，完成之前的配置。

注意上文修改的网站配置文件是你flarum站的配置。

完成上述操作后，可以开始以下操作

1.创建一个新的网站，域名填写你专门用来提供websocket服务的，php版本直接留静态就行。

2.为这个域名创建ssl证书，我们可以选择Let's Encrypt免费证书，有效期3个月。

这时，你可能意识到说直接回到flarum启动websocket插件，填好本地 SSL 私钥路径，本地 SSL 证书路径，再把主机改成你websocket的域名，再去终端执行

php flarum websocket:serve
就完事了。
NONONO,你太天真了，这时你可能跟我一样遇到这样的错误

Given URI "tcp://xxx.xxx.com" does not contain a valid host IP

这是因为你websocket服务的域名跟flarum不在同一网站下，
当然用Supervisor管理器也是不行的，也会提示backoff

在研究了好一会后才找到（暂时的）解决方案，回到flarum后台，在websocket页面中，将刚刚填入新域名的主机的空的域名值删掉，保存。
接下来用Supervisor管理器添加任务
名称随便，用户默认root，目录选择您flarum的根目录，命令填入php flarum websocket:serve

当状态为running时，再回到后台，将主机改回你的新的专门用于websocket的域名。
这时回到flarum的首页，按下f12，你便会惊喜的发现wss请求的域名已经变成了你的那个专门的域名了

消息栏下这样显示就说明你已经成功了。