websocket/vue-socket.io/socket.io

前言

因为项目需要在vue用到所以找了很多帖子与资料，但是原生的需要封装逻辑比较复杂，对于仅仅是使用学习成本比较大，第三方插件的话我找的有vue-.io、.io、.io-，其中vue-.io与.io我使用时都遇到个问题，就是全局组件挂载后没有找到io实例，找到了io实例与相关方法但是却无法使用，例如on方法，使用时无任何报错，但是控制台没打印后台传输的数据，而最后找到了.io-直接挂载io实例使用相关方法前后台传输没问题。希望有大神看到这个帖子能出个详细的vue-.io正确使用教程指教下。

.io

和间的实时数据传输是一个很重要的需求，但最早只能通过AJAX轮询方式实现。在标准没有推出之前，AJAX轮询是一种可行的方案。

AJAX轮询原理是设置定时器，定时通过AJAX同步服务端数据。这种方式存在延时且对服务端造成很大负载。直至2011年，IETF才标准化 - 一种基于TCP套接字进行收发数据的协议。

.io将数据传输部分独立出来形成.io，.io对和AJAX轮询进行了封装，形成了一套API，屏蔽了细节差异和兼容性问题，实现了跨浏览器/跨设备进行双向数据通信。

协议

是HTML5新增的一种 通信协议，其特点是服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

在 API中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务端之间就形成了一条快速通道，两者之间就直接可以数据相互传送，带来的好处是

相互沟通的 很小，大概只有。服务器不再被动的接收到浏览器的请求之后才返回数据，而是在有新数据时就主动推送给浏览器。

为了建立一个连接，浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息 : 表明这是一个申请协议升级的HTTP请求。服务端解析这些头信息，然后产生应答信息返回给客户端，客户端和服务端的连接就建立起来了。双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续直到客户端或者服务端的某一方主动关闭连接

为什么要用

已经支持HTTP协议，为什么还要开发一种新的协议呢？

我们知道 HTTP协议是一种单向的网络协议，在建立连接后，仅允许/向发出请求资源后，才能返回对应的数据，而不能主动的推送数据给/。

最初这么设计HTTP协议的原因是，假设能主动的推送数据给/，那么/就太容易受到攻击了，一些广告商也会主动把广告在不经意间强行的传输给客户端，这不能不说是一个灾难。那么单向的HTTP协议给Web应用开发带哪些问题呢？

现在假设我们要开发一个基于Web的应用去获取当前的实时数据。例如股票实时行情、火车票剩余票数等。这就需要/与之间反复进行HTTP通信，/不断的发送请求去获取当前的实时数据。

常见的方式

轮询是通过/定时向发送HTTP请求，收到请求后把最新的数据发回给/，/得到数据后将其显示，然后再定期重复此过程。

虽然这样可以满足需求，但仍存在问题，例如某段时间内没有更新的数据，但/仍然会定时发送请求过来询问，可以把以前的老数据再传送过去，/把这些没有变化的数据再显示出来。这样既浪费网络带宽，有浪费CPU利用率。

如果说把/发送请求的周期调大一些，就可以缓解这个问题，但如果的数据更新很快时，这样又不能保证Web应用获取数据的实时性。

是对的一种改进。

/发送HTTP请求到，此时可以做2件事情：

如果有新的数据需要传送，就立即把数据发回给/，/收到数据后，立即再发送HTTP请求给。

如果没有新数据需要传送，这里与的方式不同的是，不是立即发送回应给/，而是将这个请求保持住，等待有新的数据来到，再去响应这个请求。当然，如果的数据长期没有更新，一段时间后，这个HTTP请求就会超时，/收到超时信息后，在立即发送一个新的HTTP请求给服务器，然后依次循环这个过程。

的方式虽然在某种程度上减少了网络带宽和CPU利用率等问题，但仍存在缺陷。

例如的数据更新速度较快，在传送一个数据包给/后必须等待的下一个HTTP请求到来，才能传递第二个更新的数据包给。这样的话，显示实时数据最快的时间为2 xRTT（往返时间）。另外在网络拥堵的情况下，这个应该是不能让用户接受的。另外，由于HTTP数据包的头部数据量很大（通常有400多个字节），但真正被服务器需要的数据却很少（有时只有10个字节左右），这样的数据包在网络上周期性传输，难免对网络带宽是一种浪费。

综上所述，要是在有一种新的网路一些，能支持客户端和服务端的双向通信，而且协议的头部又不那么庞大就very nice了。正是肩负这样的使命登上了Web的舞台。

原理

是一种 双向通信协议，它建立在TCP之上，同HTTP一样通过TCP来传输数据，但与HTTP最大不同的是：

是一种双向通信协议，在建立连接后，服务器和/都能主动的向对象发送或接收数据，就像一样，不同的是是一种建立在Web基础上的简单模拟的协议。需要通过握手连接，类似TCP也需要客户端和服务端进行握手连接，连接成功后才能相互通信。

简单说明下握手的过程

当Web应用端调用 new (url) 接口时，就开始了与地址为URL的建立握手连接的过程。

与服务器通过TCP三次握手建立连接，如果这个建立连接失败，那么后面的过程就不会执行，Web应用将收到错误消息通知。在TCP建立连接成功后，/通过HTTP协议传送支持的版本号、协议的字版本号、原始地址、主机地址等一系列字段给服务端。服务器收到/发送来的握手请求后，如果数据包数据和格式正确，客户端和服务端的协议版本匹配等，就接受本次握手连接，并给出对应的数据回复，同样回复的数据包也是采用HTTP协议传输。收到服务器回复的数据包后，如果数据包内容、格式都没有问题的话，就表示本次连接成功，触发 消息，此时Web开发者就可以在此时通过 send 接口向服务器发送数据。否则，握手连接失败，Web应用会收到 消息，并且能知道连接失败的原因。 与TCP、HTTP的关系