标签：运行 生产 gif send name http click environ exp
背景：
项目开发客服聊天系统，使用socket.io进行开发，前端采用vue-element-admin，后端语言php，项目在本地运行功能正常，但是发布到测试环境的时候，socket的连接一直不成功，可以成功返回socketid，但是请求时并没有将sid作为参数进行请求。
解决过程：
1.首先从socket建立连接开始入手，连接是可以成功的，而且返回值也正常，
2.然后对比socket client和socket server的版本，版本一致，
3. 前项目使用的是-socket.io.js，新项目则采用npm加载的socker.js，为了排除两者之间的不同，将js替换为本地引入的js，问题也没有得到解决，
4.查看polling-xhr.js，确定request的参数，发现是在两个环境的参数不一致，
1 XHR.prototype.request = function (opts) { 2 opts = opts || {}; 3 opts.uri = this.uri(); 4 opts.xd = this.xd; 5 opts.xs = this.xs; 6 opts.agent = this.agent || false; 7 opts.supportsBinary = this.supportsBinary; 8 opts.enablesXDR = this.enablesXDR; 9 opts.withCredentials = this.withCredentials; 10 11 // SSL options for Node.js client 12 opts.pfx = this.pfx; 13 opts.key = this.key; 14 opts.passphrase = this.passphrase; 15 opts.cert = this.cert; 16 opts.ca = this.ca; 17 opts.ciphers = this.ciphers; 18 opts.rejectUnauthorized = this.rejectUnauthorized; 19 opts.requestTimeout = this.requestTimeout; 20 21 // other options for Node.js client 22 opts.extraHeaders = this.extraHeaders; 23 console.log(‘prototype.opts‘,opts); 24 return new Request(opts); 25 };
5.继续寻找参数来源的问题，发现mock/index.js中有处理参数的部分，
1 export function mockXHR() { 2 // mock patch 3 // https://github.com/nuysoft/Mock/issues/300 4 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send 5 console.log(‘Mock.XHR.prototype.proxy_send‘,Mock.XHR.prototype.proxy_send); 6 Mock.XHR.prototype.send = function() { 7 console.log(‘custom.xhr‘,this.custom.xhr); 8 console.log(‘responseType‘,this.responseType); 9 console.log(‘...arguments‘,...arguments); 10 if (this.custom.xhr) { 11 12 this.custom.xhr.withCredentials = this.withCredentials || false 13 14 if (this.responseType) { 15 this.custom.xhr.responseType = this.responseType 16 } 17 } 18 this.proxy_send(...arguments) 19 }
6.由于mockXHR为export function，寻找使用mockXHR的文件，最终在src/main.js中找到了原因，
import { mockXHR } from ‘../mock‘;
if (process.env.NODE_ENV === ‘production‘) {
mockXHR();
}
7.此处为vue-element-admin的说明，
When we use Mock.js to simulate data locally, the real-world api method is used online. This is similar to the easy-mock method above. We mainly judge that when it is an online environment, we use real-world api. We only import Mock.js locally.
// main.js // use environment variables to determine is required if (process.env.NODE_ENV === ‘development‘) { require(‘./mock‘) // simulation data }
Mock data is only import in the local environment.
由此可见，是项目前端将mock的引入场景判断写为了生产环境，导致了socket的参数被处理，无法正常建立连接，至此暂时告一段落。
后记：这个坑找了好久，头发最起码消耗了86根，希望大家在使用第三方库的时候，一定要看好文档
标签：运行 生产 gif send name http click environ exp
原文地址：https://www.cnblogs.com/jonathanshi/p/13371779.html
