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所开放的端口，相当于内部端口，并不能对外访问

解决办法：

修改html的js，var socket = io('ws://内网ip:81'); 这里的81并不是websocket的访问端口，而是nginx的访问端口
做反向代理（配置如下）

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端调试成功，手机端不可通信

相关推荐