Socket.io详解

socket.io是一个跨浏览器支持WebSocket的实时通讯的JS。

http://socket.io/docs/

由于HTTP是无状态的协议，要实现即时通讯非常困难。因为当对方发送一条消息时，服务器并不知道当前有哪些用户等着接收消息，当前实现即时通讯功能最为普遍的方式就是轮询机制。即客户端定期发起一个请求，看看有没有人发送消息到服务器，如果有服务端就将消息发给客户端。这种做法的缺点显而易见，那么多的请求将消耗大量资源，大量的请求其实是浪费的。

现在，我们有了WebSocket，它是HTML5的新API。WebSocket连接本质上就是建立一个TCP连接，WebSocket会通过HTTP请求建立，建立后的WebSocket会在客户端和服务端建立一个持久的连接，直到有一方主动关闭该连接。所以，现在服务器就知道有哪些用户正在连接了，这样通讯就变得相对容易了。

Socket.io支持及时、双向、基于事件的交流，可在不同平台、浏览器、设备上工作，可靠性和速度稳定。最典型的应用场景如：

• 实时分析：将数据推送到客户端，客户端表现为实时计数器、图表、日志客户。
• 实时通讯：聊天应用
• 二进制流传输：socket.io支持任何形式的二进制文件传输，例如图片、视频、音频等。
• 文档合并：允许多个用户同时编辑一个文档，并能够看到每个用户做出的修改。

Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法，会根据情况选择方法来进行通讯。

Node.js提供了高效的服务端运行环境，但由于Browser对HTML5的支持不一，为了兼容所有浏览器，提供实时的用户体验，并为开发者提供客户端与服务端一致的编程体验，于是Socket.io诞生了。

 npm安装socket.op
 npm install --save socket.io

 

Socket.io将WebSocket和Polling机制以及其它的实时通信方式封装成通用的接口，并在服务端实现了这些实时机制相应代码。这就是说，WebSocket仅仅是Socket.io实现实时通信的一个子集，那么Socket.io都实现了Polling中那些通信机制呢？

• Adobe Flash Socket
  大部分PC浏览器都支持的Socket模式，不过是通过第三方嵌入到浏览器，不在W3C规范内，可能将逐步被淘汰。况且，大部分手机浏览器并不支持此种模式。
• AJAX Long Polling
  定时向服务端发送请求，缺点是给服务端带来压力并出现信息更新不及时的现象。
• AJAX multipart streaming
  在XMLHttpRequest对象上使用某些浏览器支持的multi-part标志，AJAX请求被发送给服务端并保持打开状态（挂起状态），每次需要向客户端发送信息，就寻找一个挂起的HTTP请求响应给客户端，并且所有的响应都会通过统一连接来写入。
• Forever Iframem
  永存的Iframe设计了一个置于页面中隐藏的iframe标签，该标签的src属性指向返回服务端时间的Servlet路径。每次在事件到达时，Servlet写入并刷新一个新的Script标签，该标签内部带有JS代码，iframe的内容被附加上script标签，标签中的内容就会得到执行。这种方式的缺点是接收数据都是由浏览器通过HTML标签来处理的，因此无法知道连接何时在哪一端被断开，而且iframe标签在浏览器中将被逐步取消。
• JSONP Polling
  JSONP轮询基本与HTTP轮询一样，不同之处则是JSONP可发出跨域请求。

Socket.io 基本应用

socket.io提供了基于事件的实时双向通讯，它同时提供了服务端和客户端的API。

服务端

服务端socket.io必须绑定一个http.Server实例，因为WebSocket协议是构建在HTTP协议之上的，所以在创建WebSocket服务时需调用HTTP模块并调用其下createServer()方法，将生成的server作为参数传入socket.io。

var httpServer = require('http').createServer();
var io = require('socket.io')(httpServer);
httpServer.listen(3000);

 

绑定http.Server可使用隐式绑定和显式绑定

• 隐式绑定

socket.io内部实例化并监听http.Server，通过实例化时传入端口或者在实例化后调用listen或attach函数进行隐式绑定。

// 实例化时传入端口
require('socket.io')(3000)

// 通过listen或attach函数绑定
let io = require('socket.io')
io.listen(3000);
// io.attach(3000);

 

• 显式绑定

// 实例化时绑定
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000);

//通过listen或attach绑定
let httpServer = require('http').Server();
let io = require('socket.io')();
io.listen(httpServer);
// io.attach(httpServer);
httpServer.listen(3000);

 

Express框架中使用

let app = require('express');

let httpServer= require('http').Server(app);
let io = require('socket.io')(httpServer);

app.listen(3000);

 

KOA框架中使用

let app = require('koa')();

let httpServer = require('http').Server(app.callback());
let io = require('socket.io')(httpServer);

app.listen(3000);

 

建立连接

当服务端和客户端连接成功时，服务端会监听到connection和connect事件，客户端会监听到connect事件，断开连接时服务端对应到客户端的socket与客户端均会监听到disconcect事件。

/*客户端*/
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
// socket.io引入成功后，可通过io()生成客户端所需的socket对象。
let socket = io('http://127.0.0.0:3000');

// socket.emmit()用户客户端向服务端发送消息，服务端与之对应的是socket.on()来接收信息。
socket.emmit('client message', {msg:'hi, server'});

// socket.on()用于接收服务端发来的消息
socket.on('connect',  ()=>{
  console.log('client connect server');
});
socket.on('disconnect', ()=>{
  console.log('client disconnect');
});
</script>

/*服务端*/
// 服务端绑定HTTP服务器实例
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000);

// 服务端监听连接状态：io的connection事件表示客户端与服务端成功建立连接，它接收一个回调函数，回调函数会接收一个socket参数。
io.on('connection',  (socket)=>{
  console.log('client connect server, ok!');

  // io.emit()方法用于向服务端发送消息，参数1表示自定义的数据名，参数2表示需要配合事件传入的参数
  io.emmit('server message', {msg:'client connect server success'});

  // socket.broadcast.emmit()表示向除了自己以外的客户端发送消息
  socket.broadcast.emmit('server message', {msg:'broadcast'});

  // 监听断开连接状态：socket的disconnect事件表示客户端与服务端断开连接
  socket.on('disconnect', ()=>{
    console.log('connect disconnect');
  });

  // 与客户端对应的接收指定的消息
  socket.on('client message', (data)=>{
    cosnole.log(data);// hi server
  });

  socket.disconnect();
});

 

传输数据

服务端和客户端的socket是一个关联的EventEmitter对象，客户端socket派发的事件可以通过被服务端的socket接收，服务端socket派发的事件也可以被客户端接收。基于这种机制，可以实现双向交流。

# 模拟：客户端不断发送随机数，当随机数大于0.95时，服务端延迟1s后向客户端发送警告以及警告次数。

/*客户端*/
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
let socket = io('http://127.0.0.1:3000');

let interval = setTimeInterval(()=>{
  socket.emit('random', Math.random());
}, 500);

socket.on('warn', count=>{
  console.log('warning count : '+count);
});

socket.on('disconnect', ()=>{
  clearInterval(interval);
});
</script>

/*服务端*/
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000);

io.on('connection', socket=>{
  socket.on('random', value=>{
    console.log(value);
    if(value>0.95){
      if(typeof socket.warnign==='undefined'){
        socket.warning = 0;// socket对象可用来存储状态和自定义数据
      }
      setTimeout(()=>{
        socket.emit('warn', ++socket.warning);
      }, 1000);
    }
  });
});