Vue.js 如何使用 Socket.IO?

JavaScript08

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