Vue.js 如何使用 Socket.IO？

JavaScript015

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的拼接方式的差异，导致内容解析不同；