背景：
项目开发客服聊天系统，使用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的参数，发现是在两个环境的参数不一致，
XHR.prototype.request =function (opts) {
opts = opts || {};
opts.uri =this.uri();
opts.xd =this.xd;
opts.xs =this.xs;
opts.agent =this.agent ||false;
opts.supportsBinary =this.supportsBinary;
opts.enablesXDR =this.enablesXDR;
opts.withCredentials =this.withCredentials;
// SSL options for Node.js client
opts.pfx =this.pfx;
opts.key =this.key;
opts.passphrase =this.passphrase;
opts.cert =this.cert;
opts.ca =this.ca;
opts.ciphers =this.ciphers;
opts.rejectUnauthorized =this.rejectUnauthorized;
opts.requestTimeout =this.requestTimeout;
// other options for Node.js client
opts.extraHeaders =this.extraHeaders;
console.log('prototype.opts',opts);
return new Request(opts);
};
5.继续寻找参数来源的问题，发现mock/index.js中有处理参数的部分，
export function mockXHR() {
// mock patch
// https://github.com/nuysoft/Mock/issues/300
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
console.log('Mock.XHR.prototype.proxy_send',Mock.XHR.prototype.proxy_send);
Mock.XHR.prototype.send =function() {
console.log('custom.xhr',this.custom.xhr);
console.log('responseType',this.responseType);
console.log('...arguments',...arguments);
if (this.custom.xhr) {
this.custom.xhr.withCredentials =this.withCredentials ||false
if (this.responseType) {
this.custom.xhr.responseType =this.responseType
}
}
this.proxy_send(...arguments)
}
6.由于mockXHR为export function，寻找使用mockXHR的文件，最终在src/main.js中找到了原因，
import {mockXHR }from '../mock';
if (process.env.NODE_ENV ==='production') {
mockXHR();
}
7.此处为vue-element-admin的说明，
由此可见，是项目前端将mock的引入场景判断写为了生产环境，导致了socket的参数被处理，无法正常建立连接，至此暂时告一段落。
后记：这个坑找了好久，头发最起码消耗了86根，希望大家在使用第三方库的时候，一定要看好文档
网友评论