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

HTKLPXH 2019-11-08

刚接触的一个涉及实时通信的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+端口加粗文字

相关推荐