本文是
【ThinkPHP5 集成使用 GatewayWorker 进行即时通信的配置操作】
的姊妹篇,是对 WSS服务 的配置延伸…
-
首先,本地开发的测试一般都能通信成功
-
而且,如果客户端为
【http】
网络协议的网站,
那么 js 代码基本就是类似——var ws = new WebSocket("ws://47.104.110.54:8283");
的连接方式
出错率是很低的,基本不做赘述 -
最大的难点,个人认为是
WSS 服务配置
…
【操作环境】
系统: CentOS7.2
服务: 阿里云服务器
管理工具: 宝塔(Linux)管理面板
【报错信息】
首先,如果直接将本地开发成功的 GatewayWorker 服务部署到线上,作为鄙人这样的新手,最先遇到的应该是类似如下的报错:
lists.html:187 Mixed Content:
The page at 'https://www.fetow.com/cmsx.html' was loaded over HTTPS,
but attempted to connect to the insecure WebSocket endpoint 'ws://47.104.0.54:8283/'.
This request has been blocked; this endpoint must be available over WSS.
-
截图如下:
-
报错原因:
这是由于不同网络协议之间 websocket 通信受限制造成的
意思是我客户端所在域名网站使用的是 https 协议,
而所请求的【gatewayWorker服务器
】却是 http 协议的域名数据,被浏览器认为是不安全的,所以被阻止了这种情况,根据文档指示,我们接下来最需掌握的就是 【
创建wss服务的技巧
】
【知识点】
wss 协议实际是 websocket+SSL,
就是在 websocket 协议上加入 SSL 层,类似 https(http+SSL)。
所以只需要在 websocket 协议的基础上开启 SSL 即可支持 wss 协议 !
下面,我根据对 【
workerman手册创建CSS服务】
参考的操作,介绍如下两种方式
第一种方式 、直接用 Workerman 开启 SSL
-
①. 下载SSL 证书
首先要知道的是:证书一般是与域名绑定的
对于获得 SSL 证书的方式可能有所不同,以我为例:
我在阿里云下载了证书(pem/crt 文件及 key文件)放在【gatewayWorker 服务器】的磁盘目录/mooz/GatewayWorker/fetow.com_nginx
-
②. 然后修改了【gatewayWorker 服务器】中的
start_gateway.php
文件,以支持 WSS 服务
同时,我选用的并非手册推荐的【443】端口,而是 【8283】
- ③. 解析域名
首先,手册中提到的这句 :【证书一般是与域名绑定的,所以测试的时候客户端请使用域名连接,不要使用 ip 去连】
那么,必然用到了域名解析的操作
此处,我在前面证书所对应的域名下,补充了对 【gatewayWorke 服务器】的解析绑定【极其重要】
【注】
: 别的操作不清楚,但是在我这里,域名的解析有一段的生效时间,一般在十分钟内!
-
④. 客户端连接测试
如此一来,客户端的连接代码为:
var ws = new WebSocket("wss://mozxx.fetow.com:8283");
第二种方式、 利用 nginx 代理 wss
通讯原理及流程:
1、客户端发起 wss 连接连到 nginx
2、nginx 将 wss 协议的数据转换成 ws 协议数据并转发到 Workerman 的 websocket 协议端口
3、Workerman 收到数据后做业务逻辑处理
4、Workerman 给客户端发送消息时,则是相反的过程,数据经过 nginx 转换成 wss 协议然后发给客户端
注意:此方法 workerman 部分千万不要设置 ssl,否则将无法连接
-
①. 首先就是对 【gatewayWorker 服务器】中
start_gateway.php
文件的处理
为了对比,此处鄙人设置的是端口【8284】
如果你是用了下载的压缩包,此处其实也就只是改了一下端口号 (建议跟第一种方式的操作代码进行对比研究)
-
②. 安装并进行 Nginx 网站的配置操作
因为鄙人使用的是 【
宝塔(Linux) 面板管理系统
】,操作起来要方便一点首先便是创建站点 (其中添加的域名来源,便是第一种方式中提及的
【步骤 ③. 解析域名】
)然后,便是 SSL 证书的配置
(图示为使用【宝塔管理系统
】的界面,只是为了方便操作,根据手册上的介绍也可以实现,毕竟目的是一样的)最后,便是在配置文件中,补充一个 wss 的代理入口 (鄙人定的入口为
"moz_wss"
)
注意: 一切配置完毕,要重启 Nginx 服务
-
③. 此方式,要求对端口【443】的开放
如果是
阿里云服务器
,还需要进行安全组的设置
-
④. 客户端连接测试
如此一来,客户端的连接代码为:var ws = new WebSocket("wss://mozxx.fetow.com/moz_wss");
【附录】
- 每次修改
"start_gateway.php"
文件后,要对 【gatewayWorker 服务器】的 workerman 进行重启操作
-
【两种方式,都需要进行 域名解析的绑定操作 】
注意,是
对 【gatewayWorker 服务器】IP 的绑定
,之前因为手册没有提及,一直忘做了这一步 -
【注意要进行防火墙的设置】
尤其,如果是
阿里云服务器
,还需要进行安全组的设置
(鄙人就是总卡在这里忘记!!!
) -
测试发现,如果配置完成 WSS 服务
此时不管客户端网络协议为 【http】还是 【https】, 连接方式都为上面的代码,皆可成功连接 ! -
WebSocket 自动断开的问题 ——
【WebSocket is already in CLOSING or CLOSED state. 报错信息的解决方案】
-
【参考文章】
【thinkphp 5.0报错pcntl_signal() has been disabled for security reasons问题解决】 -
【博主赠言】
一个人在开发学习过程中
很容易卡在各种百度大半天出不来的 BUG 里
如果有机会,建议问下周围的人,毕竟当局者迷啊
此外,如果遇到了很奇怪的问题或者终于解决了一个复杂的需求
那就整理出来经验文章吧,也能帮到更多的小伙伴
然后,好好充电,升职加薪,FIGHTING !!!