WebSocket和SocketIO总结
WebSocket和SocketIO总结
转载：https://blog.csdn.net/qq_14998435/article/details/80030258
1、WebSocket是什么？
WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术。它是HTML最新标准HTML5的一个协议规范，本质上是个基于TCP的协议，它通过HTTP/HTTPS协议发送一条特殊的请求进行握手后创建了一个TCP连接，此后浏览器/客户端和服务器之间便可以通过此连接来进行双向实时通信。
2、为什么要用WebSocket？
1）一直以来，HTTP协议是无状态、单向通信的，即客户端请求一次，服务器回复一次。如果想让服务器消息及时下发到客户端，需要采用类似于轮询的机制，即客户端定时频繁的向服务器发出请求，这样效率很低，而且HTTP数据包头本身的字节量较大，浪费了大量带宽和服务器资源；
2）为提高效率，出现了AJAX/Comet技术，它实现了双向通信且节省了一定带宽，但仍然需要发出请求，本质上仍然是轮询；
3）新一代HTML标准HTML5推出了WebSocket技术，它使客户端和服务器之间能通过HTTP协议建立TCP连接，之后便可以随时随地进行双向通信，且交换的数据包头信息量很小；
3、如何使用WebSocket？
在支持WebSocket的浏览器中，创建Socket之后，通过onopen、onmessage、onclose、onerror四个事件的实现来处理Socket的响应；
4、WebSocket与HTTP、TCP的关系
WebSocket和HTTP都属于应用层协议，且都是基于TCP的，它们的send函数最终也是通过TCP系统接口来做数据传输。那么WebSocket和HTTP的关系呢？WebSocket在建立握手连接时，数据是通过HTTP协议传输的，但是在连接建立后，真正的数据传输阶段则不需要HTTP协议的参与。它们之间的关系如下图：
5、什么情况下使用WebSocket？
如果游戏需要同时支持手机端、Web端，那毫无疑问应该使用WebSocket，现在各个平台都提供了相应的WebSocket实现。如果游戏不需要支持Web端，且对实时性要求比较高，如多人射击、MMORPG之类，那么使用TCP/UDP结合的原生Socket会比较好。
6、SocketIO
WebSocket是HTML5最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket是SocketIO的一个子集。
本教程将创建一个基本的聊天应用。 它几乎不要求你事先了解 Node.JS 或 Socket.IO ，适合所有知识层次的用户。
简介
使用流行的 web 应用技术栈 —— 比如 LAMP (PHP) —— 来编写聊天应用通常是很困难的。它包含了轮询服务器以检测变化，还要追踪时间戳，并且这种实现是比较慢的。
大多数实时聊天系统通常基于 socket 来构建。 Socket 为客户端和服务器提供了双向通信机制。
这意味着服务器可以 推送 消息给客户端。无论何时你发布一条消息，服务器都可以接收到消息并推送给其他连接到服务器的客户端。
web 框架
首先要制作一个 HTML 页面来提供表单和消息列表。我们使用了基于 Node.JS 的 web 框架 express 。 请确保安装了 Node.JS。
首先创建一个 package.json 来描述我们的项目。 推荐新建一个空目录 （这里使用 chat-example）。
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
要保存 dependencies 信息， 可以用 npm install --save：
npm install --save [email protected]express 已经安装好了。我们现在新建一个 index.js 文件来创建应用。
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('Hello world
');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
这段代码作用如下：
- Express 初始化
app作为 HTTP 服务器的回调函数 （见第 2 行）。 - 定义了一个路由
/来处理首页访问。 - 使 http 服务器监听端口 3000。
运行 node index.js 就可以看到如下画面：
在浏览器中访问 http://localhost:3000：
HTML 服务器
目前在 index.js 中我们是通过 res.send 返回一个 HTML 字符串。 如果我们将整个应用的 HTML 代码都放到应用代码里，代码结构将变得很混乱。 替代的方法是新建一个 index.html 文件作为服务器响应。
现在我们用 sendFile 来重构之前的回调：
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
index.html 内容如下：
Socket.IO chat
现在重启进程 （按 Control+C ，然后再次运行 node index） ，刷新页面显示如下：
集成 Socket.IO
Socket.IO 由两部分组成：
- 一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器：
socket.io - 一个加载到浏览器中的客户端：
socket.io-client
开发环境下， socket.io 会自动提供客户端。正如我们所见，到目前为止，我们只需要安装一个模块：
npm install --save socket.io这会安装模块并添加依赖到 package.json。在 index.js 文件中添加该模块：
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
我们通过传入 http （HTTP 服务器） 对象初始化了 socket.io 的一个实例。 然后监听 connection 事件来接收 sockets， 并将连接信息打印到控制台。
在 index.html 的
