Socket.IO入门原理

Posted 2020-12-20 ievuzsv

1. Socket.IO原理

node.js提供了高效的服务端运行环境，但是由于浏览器端对html5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。Socket.io将Websocket和轮询 （Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，Websocket仅仅是 Socket.io实现实时通信的一个子集。那么，Socket.io都实现了Polling中的那些通信机制呢？

 

WebSocket 

Adobe® Flash® Socket

AJAX long polling

AJAX multipart streaming

Forever Iframe

JSONP Polling

Adobe® Flash® Socket 大部分PC浏览器都支持的socket模式，不过是通过第三方嵌入到浏览器，不在W3C规范内，所以可能将逐步被淘汰，况且，大部分的手机浏览器都不支持这种模式。

 

AJAX long polling 这个很好理解，所有浏览器都支持这种方式，就是定时的向服务器发送请求，缺点是会给服务器带来压力并且出现信息更新不及时的现象。

 

AJAX multipart streaming 这是在XMLHttpRequest对象上使用某些浏览器（比如说Firefox）支持的multi-part标志。Ajax请求被发送给服务器端并保 持打开状态（挂起状态），每次需要向客户端发送信息，就寻找一个挂起的的http请求响应给客户端，并且所有的响应都会通过统一连接来写入。

 

var xhr = $.ajaxSettings.xhr();

xhr.multipart =true;

xhr.open(‘GET‘, ‘ajax‘, true);

xhr.onreadystatechange = function() {

　　if (xhr.readyState == 4) {

　　　　processEvents($.parseJSON(xhr.responseText));

　　}

};

xhr.send(null);

Forever Iframe （永存的Iframe）技术涉及了一个置于页面中的隐藏Iframe标签，该标签的src属性指向返回服务器端事件的servlet路径。 每次在事件到达时，servlet写入并刷新一个新的script标签，该标签内部带有javascript代码，iframe的内容被附加上这一 script标签，标签中的内容就会得到执行。这种方式的缺点是接和数据都是由浏览器通过HTML标签来处理的，因此你没有办法知道连接何时在哪一端已被 断开了，并且Iframe标签在浏览器中将被逐步取消使用。

 

JSONP Polling JSONP轮询基本上与HTTP轮询一样，不同之处则是JSONP可以发出跨域请求，详细请搜索查询jsonp的内容。

 

2. Socket.IO环境搭建

本次给大家带来两种使用Socket.IO的方法。

 

两种方法都需要安装JDK，JDK版本要求1.7以上，JDK安装方法就不说了，网上有很多

 

使用Node.js运行Socket.IO

首先我们需要下载Node.js并安装。

 

enter image description here

 

这次我下载的是9.2.0 Current版本。

 

enter image description here

 

我安装的目录是----- E:Program Files odejs这个目录是用来配置环境变量的。安装完成之后我们可以得到如下图这些文件。

 

enter image description here

 

这样我们还需要去配置环境变量。新建一个NODEJS_HOME=E:Program Files odejs。

 

enter image description here

 

在Path最后追加%NODEJS_HOME%

 

enter image description here

 

配置完成后我们验证一下node.js是否可用。打开CMD，输入node -v：

 

enter image description here

 

目前我们只是完成了node.js的安装。并无法使用socket.io，因为socket.io只是node.js下的一个模块，需要我们手动安装。

 

如何安装呢？很简单。打开CMD直接输入npm install socket.io就可以自动的从网上把socketio下载下来了。

 

enter image description here

 

至此我们就将环境搭建完成了