刚接触的一个涉及实时通信的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. 做反向代理（配置如下）
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+端口
