The same front-end page is opened on the mobile phone and PC, and the accessed resources may not be the same

Record the problems encountered by the project, and the problems are manifested as:

1. Open the same front-end page with the mobile phone and PC, but the back-end service that the communication reaches is not the same

Check:

1. After confirming that the mobile terminal and the PC terminal are opened, the front-end resources actually accessed are not the same

2. The socket port configured on the mobile phone is wrong, so the correct backend service is not reached

One case

1. Front-end page access address: http://127.0.0.1:8229/xxx/index_websocket.html

2. Open it on the PC side, and the actual access is: index_websocket.html

3. Open it on the mobile phone, and what you actually visit is: index_app.html

4. By viewing the front-end code, the jump page when the mobile terminal is opened can be defined by yourself. The case code is as follows

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";
			}
		}
	}

2. Knowledge points

communication

1. The communication on the mobile phone can be Socket, HTTP

2. The communication on the PC side can be WebSocket, Socket, HTTP

3. View Socket, HTTP communication information
insert image description here
 
4. View websocket communication information
insert image description here

Location of the problem

1. When a problem occurs, first confirm whether the communication configurations of the PC and the mobile phone are wrong, and ensure that the communication of the message can reach the correct back-end service

2. The PC side should check: the address and port number of WebSocket, Socket, HTTP and other configurations

3. The mobile terminal should check: Socket, HTTP and other configured addresses and port numbers

Open and debug the front-end page in mobile phone mode on the PC side

1. Enter the access address of the front-end page that needs to be adjusted in the browser

2. Press F12 to enter the developer debugging page

3. Click the following button to access the front-end page in mobile mode
insert image description here

Guess you like

Origin blog.csdn.net/weixin_52116015/article/details/130801145