同个前端页面，在手机端和PC端打开，访问到的资源有可能不是同一个

记录项目遇到的问题，问题表现为：

1、用手机端和PC端打开同一个前端页面，通讯到达的后端服务却不是同一个

排查：

1、确认手机端和PC端打开后，实际访问的前端资源并不是同一个

2、手机端配置的socket端口有误，所以没有到达正确的后端服务

一、例

1、前端页面访问地址：http://127.0.0.1:8229/xxx/index_websocket.html

2、在PC端打开，实际访问到的是：index_websocket.html

3、在手机端打开，实际访问到的是：index_app.html

4、通过查看前端代码，手机端打开时的跳转页面是可以自己定义的，案例代码如下

function getPgjs(){
    
    
	var agent = navigator.userAgent.toLowerCase();
	var res = agent.match(/android/);
	if(res == "android")
		return 'android';
	res = agent.match(/iphone/);
	if(res == "iphone")
		return "iphone";
	res = agent.match(/ipad/);
	if(res == "ipad")
		return "ipad";
	res = agent.match(/windows/);
	if(res == "windows")
		return "wp";
	return "pc";
}
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || getPgjs() == 'ipad') {
    
    
	//wap
	var questionMsg = decodeURI(getQueryString('question'));//带入问题并且中文转码
	if(questionMsg){
    
    
		window.location.href = "./index_app.html?question="+questionMsg;
	}else{
    
    
		window.location.href = "./index_app.html";
	}
    
} else {
    
    
	//pc
}
 var Sys = {
    
    };
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
    if (Sys.ie){
    
    
		if(Sys.ie<10.0){
    
    
			var questionMsg = decodeURI(getQueryString('question'));//带入问题并且中文转码
			if(questionMsg){
    
    
				window.location.href = "./index_socket.html?question="+questionMsg;
			}else{
    
    
				window.location.href = "./index_socket.html";
			}
		}
	}

二、知识点

通讯方面

1、手机端的通讯，可以是Socket、HTTP

2、PC端的通讯，可以是WebSocket、Socket、HTTP

3、查看Socket、HTTP通信信息

 
4、查看websocket通信信息

问题的定位

1、出现问题时，先确认PC端、手机端各自的通讯配置是否有误，确保消息的通讯能到达正确的后端服务

2、PC端应检查：WebSocket、Socket、HTTP等配置的地址及端口号

3、手机端应检查：Socket、HTTP等配置的地址及端口号

在PC端以手机模式打开并调试前端页面

1、在浏览器输入需要调整的前端页面访问地址

2、按F12进入开发者调试页面

3、点击以下按钮就能以手机模式访问该前端页面