记一次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的说明，

• Mock.js

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根，希望大家在使用第三方库的时候，一定要看好文档