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

lovXin 发布于2019-08-23 18:33 / 1585人阅读

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

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

云服务器 GPU云服务器 pc端与手机端webrtc打不通 pc端 pc端cdn pc端接收短信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105415.html

手机端调试利器 - 总结与实践

摘要：一些调试工具说起手机端调试，相比大家都不陌生。能对手机进行远程调试，能操作，打印输出等。通过使用实现本地与远程调试器的通信。安装各种虚拟机在电脑上进行手机调试。服务端接收到手机发来的消息，把消息广播给所有客户端。一些调试工具说起手机端调试，相比大家都不陌生。由于手机浏览器没有像PC端浏览器一样有开发调试工具，所以一般手机端的调试都要借助于电脑，现在的调试方式通常有以下几种。直...

JasinYip 2019-08-19 18:22 评论0 收藏0
webRTC实战总结

摘要：中微信内置浏览器还不支持我坚信不久的将来就会支持，但在中能够完美支持。因此本项目选择了微信公众号为切入点，通过检测引导用户在中打开页面。为了便于传输可将其处理成字符串，另一端接收时还原并用对应的构造函数构造对应的实例即可。前言前段时间一直在忙一个基于WebRTC的PC和移动端双向视频的项目。第一次接触webRTC，难免遇到了许多问题，比如：webRTC移动端兼容性检测，如何配置Me...

Pandaaa 2019-08-22 13:57 评论0 收藏0
mosquitto 与 websocket 的结合

摘要：前言作为一个消息代理客户端与服务端的通信时基于协议的而现在的主流应用时呈现在浏览器中这意味着用户与服务端只能通过或者这类浏览器能理解的协议传输所以后端还要建立一个代理层将协议传输的内容解析一下以协议发送到最后再由发送到硬件端在浏览器支持的协前言 mosquitto 作为一个消息代理, 客户端与 mosquitto 服务端的通信时基于 MQTT 协议的, 而现在的主流 web 应用时呈...

joy968 2019-08-23 12:16 评论0 收藏0
mosquitto 与 websocket 的结合

摘要：前言作为一个消息代理客户端与服务端的通信时基于协议的而现在的主流应用时呈现在浏览器中这意味着用户与服务端只能通过或者这类浏览器能理解的协议传输所以后端还要建立一个代理层将协议传输的内容解析一下以协议发送到最后再由发送到硬件端在浏览器支持的协前言 mosquitto 作为一个消息代理, 客户端与 mosquitto 服务端的通信时基于 MQTT 协议的, 而现在的主流 web 应用时呈...

tomener 2019-07-30 18:05 评论0 收藏0