socket.io客户端分析

最近好像看代码也是零零散散的，因为遇到了比较郁闷的事情，让自己损失挺大的，整个人最近都没啥状态。。

组里面最近要做一点东西，推荐学弟用socket.io来实现服务器向web端推送数据，然后学弟遇到了点问题，其实自己对socket.io的了解也不多，是在读pomelo的源代码的时候才了解它的，知道它是对websocket的更高层的封装，会简单的用一下。。但是个人觉得它用起来还是非常的方便的，于是觉得了解一下它的实现原理。。。

那么先从它的客户端的源代码开始分析，一般情况下我们会用如下的代码来建立一个连接，

//进行websocket的链接
    socket = io.connect(url, {'force new connection': true, reconnect: false});

也就是我们用的是io对象下面的函数，那么我们先来看看io对象的定义吧：

(function (exports, global) {

//用于暴露的作用域，其实是全局，windows.io
  var io = exports;

  io.version = '0.9.6';

  io.protocol = 1;

  io.transports = [];  //所有的transport类型，有什么websocket，flashsocket啥的

  io.j = [];


  io.sockets = {};

//这个函数的作用的是建立与远程服务器的连接，并返回socket，不过这里的socket用namespace又代理了一下，
//这里的namespace其实是与http里面的path相似的概念
  io.connect = function (host, details) {
    var uri = io.util.parseUri(host)   //获取远程服务器的地址
      , uuri
      , socket;

    if (global && global.location) {
      uri.protocol = uri.protocol || global.location.protocol.slice(0, -1);
      uri.host = uri.host || (global.document
        ? global.document.domain : global.location.hostname);
      uri.port = uri.port || global.location.port;
    }

    uuri = io.util.uniqueUri(uri);  //"ws://121.199.40.246:3014"

    var options = {
        host: uri.host
      , secure: 'https' == uri.protocol
      , port: uri.port || ('https' == uri.protocol ? 443 : 80)
      , query: uri.query || ''
    };

    io.util.merge(options, details);
//看看当前这个远程地址是否已经有socket的连接，如果有的话就直接封装一个namespace就可以了
    if (options['force new connection'] || !io.sockets[uuri]) {
      socket = new io.Socket(options);
    }
//这里用于将刚刚建立的连接保存起来，以后可以复用
    if (!options['force new connection'] && socket) {
      io.sockets[uuri] = socket;
    }

    socket = socket || io.sockets[uuri];

    // if path is different from '' or /
    //其实真正返回的是一个namespace，里面封装了发送等方法
    //这里的namespace其实是与建立连接的url的path对应的
    return socket.of(uri.path.length > 1 ? uri.path : '');
  };

})('object' === typeof module ? module.exports : (this.io = {}), this);  //这里可以看出，如果是在浏览器里，那么是在全局定义了io对象

到这里其就能够看到，代码在全局定义了一个io对象，然后它就有一个重要的方法，用于建立一个与远程服务器的连接。。。这里建立的连接其实是通过建立一个Socket对象，这里面可能还有很多其余的东西，在注释里面也已经说的比较清楚，无非就是一个远程连接可能会被多个path复用，也就是socket.io所谓的namespace了，到此，在继续看代码之前，先给出一张图形来综合的介绍一下整个客户端的设计吧：

上图就是整个socket.io的设计，它用自己定义的socket对最终的websocket或者其余的什么flashsocket进行了一层封装，类似于进行了一层的代理，这种设计在很多地方都能够看到，例如pomelo的connector组件以及netty都是这样子，这里还能看到一个东西就是transport，它其实是设计的一个顶层对象，用相当于抽象出了一些进行通用的方法，要知道其实javascript也是可以实现面向对象编程的。。。。。

那么接下来我们来看看transport的定义吧，这里其实可已经transport看做是一个接口，然后websocket是其的一种具体实现。。

(function (exports, io) {

  //在io下面申明transport
  exports.Transport = Transport;


//这里的socket是外层封装的socket，不是websocket，这里的sessid是与服务器握手之后获取的id
  function Transport (socket, sessid) {
    this.socket = socket;
    this.sessid = sessid;
  };

  io.util.mixin(Transport, io.EventEmitter);


//相当于是接收到了数据，data是接收到的最原始数据
  Transport.prototype.onData = function (data) {
    this.clearCloseTimeout();
    
    if (this.socket.connected || this.socket.connecting || this.socket.reconnecting) {
      this.setCloseTimeout();  //设置超时
    }

    if (data !== '') {
      // todo: we should only do decodePayload for xhr transports
      //用parser对接收到的数据进行解码，将其转换成规定的格式
      var msgs = io.parser.decodePayload(data);

      if (msgs && msgs.length) {
        for (var i = 0, l = msgs.length; i < l; i++) {
          //处理已经解码过后的数据
          this.onPacket(msgs[i]);
        }
      }
    }

    return this;
  };

//处理已经解码的数据，判断接收到的数据的类型，进行相应的处理
  Transport.prototype.onPacket = function (packet) {
    this.socket.setHeartbeatTimeout();
    //心跳类型的数据
    if (packet.type == 'heartbeat') {
      return this.onHeartbeat();
    }
    //连接建立
    if (packet.type == 'connect' && packet.endpoint == '') {
      this.onConnect();
    }
    //错误
    if (packet.type == 'error' && packet.advice == 'reconnect') {
      this.open = false;
    }
    //处理数据
    this.socket.onPacket(packet);

    return this;
  };

  //设置超时，如果规定的时间没有接收到数据，那么表示已经断开了
  //因为socket.io有心跳数据的
  Transport.prototype.setCloseTimeout = function () {
    if (!this.closeTimeout) {
      var self = this;

      this.closeTimeout = setTimeout(function () {
        self.onDisconnect();
      }, this.socket.closeTimeout);
    }
  };

  /**
   * Called when transport disconnects.
   *
   * @api private
   */
   //表示已经断开了，那么进行相应的处理
  Transport.prototype.onDisconnect = function () {
    if (this.close && this.open) this.close();
    this.clearTimeouts();  //清理超时
    this.socket.onDisconnect();   //通知外层的socket，连接已经断开了
    return this;
  };

  /**
   * Called when transport connects
   *
   * @api private
   */
//表示连接建立，通知外层的socket 
  Transport.prototype.onConnect = function () {
    this.socket.onConnect();
    return this;
  }

//关闭超时
  Transport.prototype.clearCloseTimeout = function () {
    if (this.closeTimeout) {
      clearTimeout(this.closeTimeout);
      this.closeTimeout = null;
    }
  };


//清理重开的超时
  Transport.prototype.clearTimeouts = function () {
    this.clearCloseTimeout();

    if (this.reopenTimeout) {
      clearTimeout(this.reopenTimeout);
    }
  };


//这里是用于发送数据，首先要用parser进行编码，这个方法将会在外面的socket的namespace里面调用
  Transport.prototype.packet = function (packet) {
    var data = io.parser.encodePacket(packet);
    this.send(data);
  };


//接收到心跳数据，那么还要给服务器回一个心跳数据
  Transport.prototype.onHeartbeat = function (heartbeat) {
    this.packet({ type: 'heartbeat' });
  };
 
//当open之后会调用的方法，还要通知外面的socket
  Transport.prototype.onOpen = function () {
    this.open = true;
    this.clearCloseTimeout();
    this.socket.onOpen();
  };


//当关闭的时候会调用，而且要通知外层的socket
  Transport.prototype.onClose = function () {
    var self = this;
    this.open = false;
    this.socket.onClose();
    this.onDisconnect();
  };

//用于将url转化为特定的格式
  Transport.prototype.prepareUrl = function () {
    var options = this.socket.options;

    return this.scheme() + '://'
      + options.host + ':' + options.port + '/'
      + options.resource + '/' + io.protocol
      + '/' + this.name + '/' + this.sessid;
  };


//表示当前已经准备好进行连接了，这个方法可能会被具体的实现覆盖
  Transport.prototype.ready = function (socket, fn) {
    fn.call(this);
  };
})(
    'undefined' != typeof io ? io : module.exports
  , 'undefined' != typeof io ? io : module.parent.exports
);

其实transport本身的定义还是很简单的，主要是由三个部分：

（1）接受到数据进行处理，这里还需要用parser进行decode

（2）发送数据，这里需要用parser进行encode

（3）处理心跳数据，socket.io自己定义了心跳数据，如果超时间内没有数据收到或者收不到心跳数据，那么就断开。

好了，到这里transport的定义就这样了，接下来就来看看怎么定义的Socket的吧：

(function (exports, io, global) {

//在io上面申明socket
  exports.Socket = Socket;
//构造函数
  function Socket (options) {
    this.options = {
        port: 80
      , secure: false
      , document: 'document' in global ? document : false
      , resource: 'socket.io'
      , transports: io.transports  //所有的transport类型，有websocket等
      , 'connect timeout': 10000
      , 'try multiple transports': true
      , 'reconnect': true
      , 'reconnection delay': 500
      , 'reconnection limit': Infinity
      , 'reopen delay': 3000
      , 'max reconnection attempts': 10
      , 'sync disconnect on unload': true
      , 'auto connect': true
      , 'flash policy port': 10843
    };

    io.util.merge(this.options, options);  //合并默认配置和用户传进来的配置

    this.connected = false;  //表示当前还没有建立连接
    this.open = false;   //没有打开
    this.connecting = false;
    this.reconnecting = false;
    this.namespaces = {};   //这个socket的所有namespace，就像同一个url可以对应好多path，fjs.com/aa与fjs.com/bb，那么aa与bb就是两个namespace
    this.buffer = [];
    this.doBuffer = false;

    if (this.options['sync disconnect on unload'] &&
        (!this.isXDomain() || io.util.ua.hasCORS)) {
      var self = this;

      io.util.on(global, 'unload', function () {
        self.disconnectSync();
      }, false);
    }

    if (this.options['auto connect']) {
      this.connect();  //建立连接
    }
};

  io.util.mixin(Socket, io.EventEmitter);

//这里是设置名字空间，所谓的namespace其实就是url后面的path，同一个连接可以对应多个path
  Socket.prototype.of = function (name) {
    if (!this.namespaces[name]) {  //如果没有这个namespace，那么创建一个
      //新建一个namespace
      this.namespaces[name] = new io.SocketNamespace(this, name);

      if (name !== '') {//默认的namespace就是空的字符串，
        this.namespaces[name].packet({ type: 'connect' });
      }
    }

    return this.namespaces[name];
  };

//向所有的namespace发送事件，传进来的参数是事件类型
  Socket.prototype.publish = function () {
    this.emit.apply(this, arguments);

    var nsp;
//遍历所有的namespace
    for (var i in this.namespaces) {
      if (this.namespaces.hasOwnProperty(i)) {
        nsp = this.of(i);
        //在当前这个namespace上面触发事件
        nsp.$emit.apply(nsp, arguments);
      }
    }
  };

  function empty () { };

//用于与server进行握手，获取sessionid，心跳间隔，传输方式等
//这里比较神奇的是居然用的是http的get来获取
  Socket.prototype.handshake = function (fn) {
    var self = this
      , options = this.options;

    function complete (data) {
      if (data instanceof Error) {
        self.onError(data.message);
      } else {
        fn.apply(null, data.split(':'));  //sid:heartbeat:close:transports
      }
    };

    var url = [
          'http' + (options.secure ? 's' : '') + ':/'
        , options.host + ':' + options.port
        , options.resource
        , io.protocol
        , io.util.query(this.options.query, 't=' + +new Date)
      ].join('/');

    if (this.isXDomain() && !io.util.ua.hasCORS) {
      var insertAt = document.getElementsByTagName('script')[0]
        , script = document.createElement('script');

      script.src = url + '&jsonp=' + io.j.length;
      insertAt.parentNode.insertBefore(script, insertAt);

      io.j.push(function (data) {
        complete(data);
        script.parentNode.removeChild(script);
      });
    } else {
      var xhr = io.util.request();

      xhr.open('GET', url, true);
      xhr.withCredentials = true;
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          xhr.onreadystatechange = empty;

          if (xhr.status == 200) {
            complete(xhr.responseText);
          } else {
            !self.reconnecting && self.onError(xhr.responseText);
          }
        }
      };
      xhr.send(null);
    }
  };

//overide =[ flashsocket,websocket,htmlfile,xhr-polling,jsonp-polling]
  Socket.prototype.getTransport = function (override) {
    var transports = override || this.transports, match;
//遍历当前io定义的所有transport，选取一个
    for (var i = 0, transport; transport = transports[i]; i++) {
      if (io.Transport[transport]
        && io.Transport[transport].check(this)
        && (!this.isXDomain() || io.Transport[transport].xdomainCheck())) {
        //这里用于筛选出transport，传进去的参数是当前这个socket对象，以及sessionid
        return new io.Transport[transport](this, this.sessionid);
      }
    }

    return null;
  };

  Socket.prototype.connect = function (fn) {
    if (this.connecting) {
      return this;
    }

    var self = this;

//transports = flashsocket,websocket,htmlfile,xhr-polling,jsonp-polling
    this.handshake(function (sid, heartbeat, close, transports) {
      self.sessionid = sid;  //sessionid
      self.closeTimeout = close * 1000;  //超时时间
      self.heartbeatTimeout = heartbeat * 1000;
      self.transports = transports ? io.util.intersect(
          transports.split(',')  //将服务器支持的transport转换为数组
        , self.options.transports
      ) : self.options.transports;

      self.setHeartbeatTimeout();   //设置心跳超时

      function connect (transports){
        if (self.transport) self.transport.clearTimeouts();

//这里获取的transport一般情况下都是websocket
        self.transport = self.getTransport(transports);
        if (!self.transport) return self.publish('connect_failed');

        // once the transport is ready
        //如果当前的transport准备好了，那么将会调用回调函数
        self.transport.ready(self, function () {
          self.connecting = true;
          self.publish('connecting', self.transport.name);
          //这里才是真正的建立与服务器的连接
          self.transport.open();

          if (self.options['connect timeout']) {
            //设置连接超时，还可以尝试一下别的transport
            self.connectTimeoutTimer = setTimeout(function () {
              if (!self.connected) {
                self.connecting = false;

                if (self.options['try multiple transports']) {
                  if (!self.remainingTransports) {
                    self.remainingTransports = self.transports.slice(0);
                  }

                  var remaining = self.remainingTransports;

                  while (remaining.length > 0 && remaining.splice(0,1)[0] !=
                         self.transport.name) {}

                    if (remaining.length){
                      connect(remaining);
                    } else {
                      self.publish('connect_failed');
                    }
                }
              }
            }, self.options['connect timeout']);
          }
        });
      }

      connect(self.transports);
      //如果连接建立了，那么需要清理连接超时
      self.once('connect', function (){
        clearTimeout(self.connectTimeoutTimer);

        fn && typeof fn == 'function' && fn();
      });
    });

    return this;
  };

//设置心跳的超时
  Socket.prototype.setHeartbeatTimeout = function () {
    clearTimeout(this.heartbeatTimeoutTimer);

    var self = this;
    this.heartbeatTimeoutTimer = setTimeout(function () {
      self.transport.onClose();
    }, this.heartbeatTimeout);
  };

//用于发送数据，其实这里是调transport进行数据的发送
  Socket.prototype.packet = function (data) {
    if (this.connected && !this.doBuffer) {
      this.transport.packet(data);
    } else {
      this.buffer.push(data);
    }

    return this;
  };

  Socket.prototype.setBuffer = function (v) {
    this.doBuffer = v;

    if (!v && this.connected && this.buffer.length) {
      this.transport.payload(this.buffer);
      this.buffer = [];
    }
  };

//关闭当前的连接，用默认的namespace来发送disconnect数据
  Socket.prototype.disconnect = function () {
    if (this.connected || this.connecting) {
      if (this.open) {
        this.of('').packet({ type: 'disconnect' });
      }

      // handle disconnection immediately
      this.onDisconnect('booted');
    }

    return this;
  };

  Socket.prototype.disconnectSync = function () {
    // ensure disconnection
    var xhr = io.util.request()
      , uri = this.resource + '/' + io.protocol + '/' + this.sessionid;

    xhr.open('GET', uri, true);

    // handle disconnection immediately
    this.onDisconnect('booted');
  };

//是否需要跨域的访问
  Socket.prototype.isXDomain = function () {

    var port = global.location.port ||
      ('https:' == global.location.protocol ? 443 : 80);

    return this.options.host !== global.location.hostname 
      || this.options.port != port;
  };


//表示已经建立了连接，下层的websocket会通知这个方法
  Socket.prototype.onConnect = function () {
    if (!this.connected) {
      this.connected = true;  //表示连接已经建立了
      this.connecting = false;
      if (!this.doBuffer) {
        // make sure to flush the buffer
        this.setBuffer(false);
      }
      this.emit('connect'); //发起connect事件
    }
  };

  Socket.prototype.onOpen = function () {
    this.open = true;
  };


  Socket.prototype.onClose = function () {
    this.open = false;
    clearTimeout(this.heartbeatTimeoutTimer);
  };

//获取相应的namespace来处理数据
  Socket.prototype.onPacket = function (packet) {
    this.of(packet.endpoint).onPacket(packet);
  };

  Socket.prototype.onError = function (err) {
    if (err && err.advice) {
      if (err.advice === 'reconnect' && (this.connected || this.connecting)) {
        this.disconnect();
        if (this.options.reconnect) {
          this.reconnect();
        }
      }
    }

    this.publish('error', err && err.reason ? err.reason : err);
  };

//当底层的连接断开之后会发生的事情
  Socket.prototype.onDisconnect = function (reason) {
    var wasConnected = this.connected
      , wasConnecting = this.connecting;

    this.connected = false;
    this.connecting = false;
    this.open = false;

    if (wasConnected || wasConnecting) {
      this.transport.close();
      this.transport.clearTimeouts();
      if (wasConnected) {
        //出发所有namespace的disconnect事件
        this.publish('disconnect', reason);

        if ('booted' != reason && this.options.reconnect && !this.reconnecting) {
          this.reconnect();
        }
      }
    }
  };

//重新连接
  Socket.prototype.reconnect = function () {
    this.reconnecting = true;
    this.reconnectionAttempts = 0;
    this.reconnectionDelay = this.options['reconnection delay'];

    var self = this
      , maxAttempts = this.options['max reconnection attempts']
      , tryMultiple = this.options['try multiple transports']
      , limit = this.options['reconnection limit'];

    function reset () {
      if (self.connected) {
        for (var i in self.namespaces) {
          if (self.namespaces.hasOwnProperty(i) && '' !== i) {
              self.namespaces[i].packet({ type: 'connect' });
          }
        }
        self.publish('reconnect', self.transport.name, self.reconnectionAttempts);
      }

      clearTimeout(self.reconnectionTimer);

      self.removeListener('connect_failed', maybeReconnect);
      self.removeListener('connect', maybeReconnect);

      self.reconnecting = false;

      delete self.reconnectionAttempts;
      delete self.reconnectionDelay;
      delete self.reconnectionTimer;
      delete self.redoTransports;

      self.options['try multiple transports'] = tryMultiple;
    };

    function maybeReconnect () {
      if (!self.reconnecting) {
        return;
      }

      if (self.connected) {
        return reset();
      };

      if (self.connecting && self.reconnecting) {
        return self.reconnectionTimer = setTimeout(maybeReconnect, 1000);
      }

      if (self.reconnectionAttempts++ >= maxAttempts) {
        if (!self.redoTransports) {
          self.on('connect_failed', maybeReconnect);
          self.options['try multiple transports'] = true;
          self.transport = self.getTransport();
          self.redoTransports = true;
          self.connect();
        } else {
          self.publish('reconnect_failed');
          reset();
        }
      } else {
        if (self.reconnectionDelay < limit) {
          self.reconnectionDelay *= 2; // exponential back off
        }

        self.connect();
        self.publish('reconnecting', self.reconnectionDelay, self.reconnectionAttempts);
        self.reconnectionTimer = setTimeout(maybeReconnect, self.reconnectionDelay);
      }
    };

    this.options['try multiple transports'] = false;
    this.reconnectionTimer = setTimeout(maybeReconnect, this.reconnectionDelay);

    this.on('connect', maybeReconnect);
  };

})(
    'undefined' != typeof io ? io : module.exports
  , 'undefined' != typeof io ? io : module.parent.exports
  , this
);

这里socket的定义够多的吧，一些主要的方法有一些什么用上面的注释都已经说的较为清楚了吧，其实说白了它就是底层的transport与上层的namespace之间的一层代理，具体的发送数据等操作需要调用下层的transport来实现，然后对于transport接收到的数据则将其进行一些处理，然后通知上面的namespace进行处理。。。

好了，就不细说代码了，应该也还算挺简单额，那么接下来来看看前面一直提到过的namespace的定义：

(function (exports, io) {

  exports.SocketNamespace = SocketNamespace;

//socket是上面定义的socket，其实它是对websocket的封装，name是这个namespace的名字，也就是url里面的path
//因为同一个连接其实可以对应多个namespace，也就是好多个path
  function SocketNamespace (socket, name) {
    this.socket = socket;
    this.name = name || '';
    this.flags = {};
    this.json = new Flag(this, 'json');
    this.ackPackets = 0;
    this.acks = {};  //用于记录需要确认的数据的回调函数，当确认消息接收到以后会调用
  };

  io.util.mixin(SocketNamespace, io.EventEmitter);

  SocketNamespace.prototype.$emit = io.EventEmitter.prototype.emit;

  SocketNamespace.prototype.of = function () {
    return this.socket.of.apply(this.socket, arguments);
  };

//这里相当于是调用socket来发送数据，而socket则是调用下面的transport来发送数据
  SocketNamespace.prototype.packet = function (packet) {
    packet.endpoint = this.name;  //也就是当前连接的path
    this.socket.packet(packet);
    this.flags = {};
    return this;
  };

//这里是真正的发送数据
//这里如果提供了回调函数，那么表示这个数据需要确认，当确认消息接收到了以后，回调用这个回调函数
  SocketNamespace.prototype.send = function (data, fn) {
    var packet = {
        type: this.flags.json ? 'json' : 'message'
      , data: data
    };

    if ('function' == typeof fn) {
      packet.id = ++this.ackPackets;   //为这个packet分配id
      packet.ack = true;   //表示这个packet需要确认
      this.acks[packet.id] = fn;     //记录回调函数
    }

    return this.packet(packet);
  };

  //发送数据，采取事件的方式进行发送
  //其实说白了就是另外一种发送数据的方法，用过socket.io的就知道了
  SocketNamespace.prototype.emit = function (name) {
    var args = Array.prototype.slice.call(arguments, 1)
      , lastArg = args[args.length - 1]
      , packet = {
            type: 'event'
          , name: name
        };

    if ('function' == typeof lastArg) {
      packet.id = ++this.ackPackets;
      packet.ack = 'data';
      this.acks[packet.id] = lastArg;
      args = args.slice(0, args.length - 1);
    }

    packet.args = args;

    return this.packet(packet);
  };


//这里用于断开当前namespace的连接，如果是默认namespace或者仅有的namespace的话，那么会断开实际的底层websocket连接
  SocketNamespace.prototype.disconnect = function () {
    if (this.name === '') {
      this.socket.disconnect();
    } else {
      this.packet({ type: 'disconnect' });
      this.$emit('disconnect');
    }

    return this;
  };

//用于处理接收到 的数据，packet
  SocketNamespace.prototype.onPacket = function (packet) {
    var self = this;
//这里用于向服务器发送确认消息
    function ack () {
      self.packet({
          type: 'ack'
        , args: io.util.toArray(arguments)
        , ackId: packet.id
      });
    };
//判断发送过来的数据的类型，然后进行相应的处理
    switch (packet.type) {
      case 'connect':   
        this.$emit('connect');
        break;

      case 'disconnect':
        if (this.name === '') {
          this.socket.onDisconnect(packet.reason || 'booted');
        } else {
          this.$emit('disconnect', packet.reason);
        }
        break;

      case 'message':
      case 'json':
        var params = ['message', packet.data];

        if (packet.ack == 'data') {
          params.push(ack);
        } else if (packet.ack) {
          this.packet({ type: 'ack', ackId: packet.id });
        }

        this.$emit.apply(this, params);
        break;

      case 'event':
        var params = [packet.name].concat(packet.args);

        if (packet.ack == 'data')
          params.push(ack);

        this.$emit.apply(this, params);
        break;

      case 'ack':  //表示是确认消息，
        if (this.acks[packet.ackId]) {
          this.acks[packet.ackId].apply(this, packet.args); //调用消息的回调函数
          delete this.acks[packet.ackId];
        }
        break;

      case 'error':
        if (packet.advice){
          this.socket.onError(packet);
        } else {
          if (packet.reason == 'unauthorized') {
            this.$emit('connect_failed', packet.reason);
          } else {
            this.$emit('error', packet.reason);
          }
        }
        break;
    }
  };

  function Flag (nsp, name) {
    this.namespace = nsp;
    this.name = name;
  };


  Flag.prototype.send = function () {
    this.namespace.flags[this.name] = true;
    this.namespace.send.apply(this.namespace, arguments);
  };

  Flag.prototype.emit = function () {
    this.namespace.flags[this.name] = true;
    this.namespace.emit.apply(this.namespace, arguments);
  };

})(
    'undefined' != typeof io ? io : module.exports
  , 'undefined' != typeof io ? io : module.parent.exports
);

上述namespace的定义也就是socket.io为用户暴露的api（其实个人感觉socket.io自己又定义了一层namespace有那么一点点繁琐了，其实完全不用这个，因为通过用户的代码很容易就能实现相似的功能，而框架自己实现一个namespace机制，让框架不那么轻便），还是很简单，最为主要的功能两个：

（1）下面socket接受的数据会让相应的namespace来处理，那么namespace需要对数据的类型进行分别，然后进行相应的处理，然后触发相应的事件，让用户的代码来处理这些数据

（2）对于用户的一些操作，例如发送数据，断开连接等，调用socket的相应方法来处理。。。

好了，接下来来看看socket.io对websocket的封装吧。。。。这里要强调一下：它继承自transport

(function (exports, io, global) {

  exports.websocket = WS;

//这里直接调用transport的构造函数，这里要记住，websocket直接继承了transport
  function WS (socket) {
    io.Transport.apply(this, arguments);
  };

//这里的websocket需要继承上面的transport
  io.util.inherit(WS, io.Transport);

  WS.prototype.name = 'websocket';

//打开，相当于是建立于服务器的连接
  WS.prototype.open = function () {
    var query = io.util.query(this.socket.options.query)
      , self = this
      , Socket


    if (!Socket) {  //这里将socket指向定义的websocket，因为不同的浏览器可能有不同的实现，不同的名字
      Socket = global.MozWebSocket || global.WebSocket;
    }
//这里就相当于是建立真正的websocket连接了
    this.websocket = new Socket(this.prepareUrl() + query);
    //当下层的websocket打开了
    this.websocket.onopen = function () {
      self.onOpen();
      self.socket.setBuffer(false);
    };
    //当下层的websocket收到了数据
    this.websocket.onmessage = function (ev) {
      self.onData(ev.data);
    };
    this.websocket.onclose = function () {
      self.onClose();
      self.socket.setBuffer(true);
    };
    this.websocket.onerror = function (e) {
      self.onError(e);
    };

    return this;
  };

//其实调用的是内部的websocket来发送
  WS.prototype.send = function (data) {
    this.websocket.send(data);
    return this;
  };

//可以理解为批量处理接收到的数据
  WS.prototype.payload = function (arr) {
    for (var i = 0, l = arr.length; i < l; i++) {
      this.packet(arr[i]);
    }
    return this;
  };
//这几调用底层的websocket来关闭
  WS.prototype.close = function () {
    this.websocket.close();
    return this;
  };
//当有错误发生的时候
  WS.prototype.onError = function (e) {
    this.socket.onError(e);
  };

//wss或者ws
  WS.prototype.scheme = function () {
    return this.socket.options.secure ? 'wss' : 'ws';
  };

//判断浏览器是否支持原生的websocket
  WS.check = function () {
    return ('WebSocket' in global && !('__addTask' in WebSocket))
          || 'MozWebSocket' in global;
  };

  WS.xdomainCheck = function () {
    return true;
  };

//表示当前支持websocket
  io.transports.push('websocket');  //相当于这里的多了一种传输方式，将其保存在io的transports数组中

})(
    'undefined' != typeof io ? io.Transport : module.exports
  , 'undefined' != typeof io ? io : module.parent.exports
  , this
);

这部分代码很简单吧，最重要的也就是open方法了，这里将会真正建立于server端的连接，然后还设置了一些处理函数，例如当数据进来的时候该做什么处理等等。。。

到这里位置，socket.io的client部分的整个设计也都差不太多了，当然我只看了websocket，什么flashsocket什么的我都没有看。。

最上面是namespace，接下来下面有socket，那么在socket里面又包含了transport，对应的也就是websocket。、、、

最后说一下发送的数据的编码格式吧：type:id:path:data  

这里type就是数据的类型，例如event，message，ack等，id就是这个数据的id，如果数据需要确认的话，那么这个id将会有用，path就是那个namespace，data就是data了。。

好了，socket.io的客户端就这样了。。。接下来看看他的服务端吧。。。