Vue.js 如何使用 Socket.IO？

JavaScript013

Vue.js 如何使用 Socket.IO？,第1张

在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。

Socket.IO是一个WebSocket库，可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它包括：Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5

(1)、支持浏览器/Nodejs环境

(2)、支持双向通信

(3)、API简单易用

(4)、支持二进制传输

(5)、减少传输数据量

（1）客户端

main.js添加下列代码

发送消息和监听消息

（2）服务端

服务端，我们基于express搭建node服务器。

index.js文件

然后启动服务端服务

客户端即可查看效果。

参考文章： https://www.jianshu.com/p/a3e06ec1a3a0

JS高版本和低版本nsp的设置变化，主要有两点：

1：在Manager.prototype.packet 方法中，是否存在：

if (packet.query &&packet.type === 0) packet.nsp += '?' + packet.query

这段话：在nsp 后边添加上了数据拼接；

2：在function encodeAsString(obj) 方法中：

if (obj.nsp &&'/' != obj.nsp) {

nsp =true

    str += obj.nsp

}

// immediately followed by the id

if (null != obj.id) {

if (nsp) {

str +=','

        nsp =false

    }

str += obj.id

}

字符串str的拼接方式的差异，导致内容解析不同；

什么是WebSocket?

1、在HTML5出现

2、独立于http的实时通信协议，全双工

浏览器和服务器之间提供了一个基于TCP连接的双向通道。

在WebSocket出现之前，服务端想要向客户端推送数据只能通过客户端向服务端主动发送请求才能获得。

构建实时的web应用时，主要采用轮询和Comet技术。其中Comet技术又分成两种，长轮询机制和流技术。

轮询：一定的时间间隔向服务端发请求，以频繁的请求方式来保持客户端和服务端的同步。

长轮询：如果当前请求没有数据返回，则继续保持当前请求的网络连接状态，直到服务端有数据返回或连接超时。

        减少了客户端和服务端交互的次数。

流：客户端的页面向服务端发出一个长连接的请求。服务器接收这个请求后作出回应并不断更新连接状态从而保证

    客户端和服务器的连接不过期。这种就可以保持将服务端的信息持续不断地发向客户端。

这些实质上都是用ajax的方法模拟实时效果的，没有实现真正的实时技术。

WebSocket是独立的基于TCP的协议，和http的关系只停留在WebSocket的握手被http服务器当作

Upgrade request http包处理。

协议关键：

Response Headers

Upgrade: websocket

Request Headers

Upgrade: websocket

一旦建立了连接，服务端与客户端之间就可以以全双工方式进行通信。

什么是Scoket.io?

它是由js实现,基于node.js,支持WebSocket协议用于实时通信，跨平台的开源框架

Socket.io将Websocket和轮询机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时通信机制。

Socket.io中主要使用了websocket，将轮询作为其辅助选项，提供的是相同的接口。和node.js一样，也是事件驱动的。

不是所有的浏览器都支持websocket,通过socket.io的封装，你不用关心里面用了什么连接方式。在任何浏览器里都可以使用socket.io来建立异步的连接。

socket.io包含了服务端和客户端的库，如果在浏览器中使用了socket.io的js,服务端也必须同样适用。

参考链接：

https://www.cnblogs.com/mazg/p/5467960.html