NGINX如何配置才能支持wss

1. 前言

PHP搭建websocket的服务端还是比较简单的，不得不夸一下swoole，点赞！

//创建WebSocket Server对象，监听0.0.0.0:9502端口。
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9502);

//监听WebSocket连接打开事件。
$ws->on('Open', function ($ws, $request) {
    $ws->push($request->fd, "hello, welcome\n");
});

//监听WebSocket消息事件。
$ws->on('Message', function ($ws, $frame) {
    echo "Message: {$frame->data}\n";
    $ws->push($frame->fd, "server: {$frame->data}");
});

//监听WebSocket连接关闭事件。
$ws->on('Close', function ($ws, $fd) {
    echo "client-{$fd} is closed\n";
});

$ws->start();

当我们把代码运行起来(在终端执行php websocketServer.php)，并且把云服务器的安全组开放9502端口之后，ws://协议就已经可以使用了。
客户端连接：

let url = `ws://110.122.1.58:9502`;

// 打开一个websocket
let websocket = new WebSocket(url);
// 建立连接
websocket.onopen = () => {
  console.log("连接成功");
};

2. 如何使用wss协议呢？

注意：wss协议不支持ip+端口的形式连接！
所以当我们直接将URL改成let url = 'wss://110.122.1.58:9502'是连接不上的，这时候就需要后端服务器的配合，利用NGINX做一个反向代理。

把URL改成域名的形式：
let url = 'wss://domain.com/abc'
最后的abc是自定义的，一般会取名为wss或者websocket。

在NGINX的配置文件中添加如下配置：

#nginx转发websocket服务端处理
location /abc{
    #websocket服务端监听的地址和端口
    proxy_pass http://127.0.0.1:9502;
    proxy_read_timeout 300s;
    proxy_send_timeout 300s;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_set_header Connection "upgrade";
    proxy_set_header Upgrade $http_upgrade;
}

重启服务器，wss协议就可以连通啦~