记一次socket.io的debug记录

背景：

项目开发客服聊天系统，使用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的说明，

vue-element-admin

由此可见，是项目前端将mock的引入场景判断写为了生产环境，导致了socket的参数被处理，无法正常建立连接，至此暂时告一段落。

后记：这个坑找了好久，头发最起码消耗了86根，希望大家在使用第三方库的时候，一定要看好文档