websocket pc端调试成功，手机端不可通信

刚接触的一个涉及实时通信的h5项目，前期开发没遇到什么大问题，在pc端chrome调试都一切正常，

用手机访问页面时，却出现了一个问题，node启动服务的命令行界面并没有打印出用户访问页面的信息，

也就是说手机端的页面没有连接到websocket服务，且本地计算机和手机是连的是同一个wifi，也就是说网络环境相同，

那为何会造成本地调试可行，而手机访问又不能连接websocket服务呢？

在网上查找的各种资料，其实基本都与此问题无关，

最后突然想起前段时间做过的一个python项目，在linux搭建的环境为gunicorn+python+nginx ，而gunicorn充当的就是一个启动python环境的角色，而gunicorn访问的是localhost+端口，再利用nginx做反向代理，这个项目非常类似，于是我想到了做nginx反向代理。

nginx反向代理简单解释，用户访问页面，由nginx转接，转到服务器端的内部开放端口（不对外）。

问题原因：

手机端进入页面时访问的是内网ip，这时nginx能识别内网ip，并转到对应的项目上，但是页面js调用的socket= io('ws://内网ip:3000')，并不能直接访问websocket，会先转到nginx，再由nginx来访问websocket服务，websocket所开放的端口，相当于内部端口，并不能对外访问

解决办法：

1. 修改html的js，var socket = io('ws://内网ip:81'); 这里的81并不是websocket的访问端口，而是nginx的访问端口

2. 做反向代理（配置如下）在nginx.conf文件中的http模块下，添加如下配置，注意修改端口号

map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream websocket {
server localhost:3000; # 这里是websocket的访问端口
}

server {
server_name 192.168.33.174; # 这里是内网端口
listen 81;
location / {
proxy_pass http://websocket;
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 Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}

配上wsServer.js

var app = require('http').createServer()
var io = require('socket.io')(app);

app.listen(3000);    // websocket访问的端口
var amount = 0

index.html

var socket = io('ws://192.168.33.174:81');    // 内网ip+端口

websocket pc端调试成功，手机端不可通信

猜你喜欢