关于Socket.IO的知识点记录

　　最近因为项目的需要，开始学习nodejs，本着js的那点儿功底，nodejs学习起来还是挺快能上手的。随着深入学习，知道了express框架并那它写了一个小功能，作为一个php程序员哈，在express框架路由、模板渲染那里看到了Yii2的影子，所以便更加的亲切了。再接着便接触到了websocket，而今天谈论的socket.io 便是websocket的一个类库，说道这里了，我们先去了解下websocket和socket.io:

一  websocket

　　WebSocket是html5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如 Chrome，Safrie，Firefox，Opera，IE等等，对该协议支持最早的应该是chrome，从chrome12就已经开始支持，随着协 议草案的不断变化，各个浏览器对协议的实现也在不停的更新。该协议还是草案，没有成为标准，不过成为标准应该只是时间问题了。

　　1. WebSocket API

　　首先看一段简单的javascript代码，该代码调用了WebSockets的API。

　　var ws = new WebSocket(“ws://echo.websocket.org”);

　　ws.onopen = function(){ws.send(“Test!”); };

　　ws.onmessage = function(evt){console.log(evt.data);ws.close();};

　　ws.onclose = function(evt){console.log(“WebSocketClosed!”);};

　　ws.onerror = function(evt){console.log(“WebSocketError!”);};

　　这份代码总共只有5行，现在简单概述一下这5行代码的意义。

　　第一行代码是在申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

　　第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据 失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发 onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时， 就会触发onclose消息。我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

　　2 为什么引入WebSocket协议？

4 websocket与TCP,HTTP的关系

 WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser 的实现中最终都是通过TCP的系统接口进行传输的。WebSocket和Http协议一样都属于应用层的协议，那么他们之间有没有什么关系呢？答案是肯定 的，WebSocket在建立握手连接时，数据是通过http协议传输的，正如我们上一节所看到的“GET/chat HTTP/1.1”，这里面用到的只是http协议一些简单的字段。但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。

具体关系可以参考下图：

5 websocket server

     如果要搭建一个Web服务器，我们会有很多选择，市场上也有很多成熟的产品供我们应用，比如开源的Apache，安装后只需简单的配置（或者默认配置）就可 以工作了。但是如果想搭建一个WebSocket服务器就没有那么轻松了，因为WebSocket是一种新的通信协议，目前还是草案，没有成为标准，市场 上也没有成熟的WebSocket服务器或者Library实现WebSocket协议，我们就必须自己动手写代码去解析和组装WebSocket的数据 包。要这样完成一个WebSocket服务器，估计所有的人都想放弃，幸好的是市场上有几款比较好的开源库供我们使用，比如 PyWebSocket,WebSocket-Node, LibWebSockets等等，这些库文件已经实现了WebSocket数据包的封装和解析，我们可以调用这些接口，这在很大程度上减少了我们的工作 量。如

下面就简单介绍一下这些开源的库文件。

1.     PyWebSocket

PyWebSocket采用Python语言编写，可以很好的跨平台，扩展起来也比较简单，目前WebKit采用它搭建WebSocket服务器来做LayoutTest。

我们可以获取源码通过下面的命令

svn checkouthttp://pywebsocket.googlecode.com/svn/trunk/ pywebsocket-read-only

更多的详细信息可以从http://code.google.com/p/pywebsocket/获取。

2.     WebSocket-Node

WebSocket-Node采用JavaScript语言编写，这个库是建立在nodejs之上的，对于熟悉JavaScript的朋友可参考一下，另外Html5和Web应用程序受欢迎的程度越来越高，nodejs也正受到广泛的关注。

我们可以从下面的连接中获取源码

https://github.com/Worlize/Websocket-Node

3.     LibWebSockets

LibWebSockets采用C/C++语言编写，可定制化的力度更大，从TCP监听开始到封包的完成我们都可以参与编程。

我们可以从下面的命令获取源代码

git clone git://git.warmcat.com/libwebsockets

 值得一提的是：websocket是可以和http共用监听端口的，也就是它可以公用端口完成socket任务。

二 Socket.io

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

• 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请求响应给客户端，并且所有的响应都会通过统一连接来写入

扯多了哈..........接着我就开始想写一个聊天室的demo出来，由于demo还在开发中，今天小编就不贴出来了，等写好了，我会在写一篇写的博客的，并会附上git clone 地址供大家参考学习交流的。

接下来是关于SOKCET.IO的知识记录:

安装Installing

$ npm install socket.io --save

• 1

使用NODE.JS服务器Using with Node http server

Server (app.js)
var app = require(‘http‘).createServer(handler)
var io = require(‘socket.io‘)(app);
var fs = require(‘fs‘);

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + ‘/index.html‘,
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end(‘Error loading index.html‘);
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on(‘connection‘, function (socket) {
  socket.emit(‘news‘, { hello: ‘world‘ });
  socket.on(‘my other event‘, function (data) {
    console.log(data);
  });
});
Client (index.html)
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io(‘http://localhost‘);
  socket.on(‘news‘, function (data) {
    console.log(data);
    socket.emit(‘my other event‘, { my: ‘data‘ });
  });
</script>

使用EXPRESS.JS（3.-/4.-）框架Using with Express 3/4

服务器端（/app.js）Server (app.js)

var app = require(‘express‘)();
var server = require(‘http‘).Server(app);
var io = require(‘socket.io‘)(server);

server.listen(80);

app.get(‘/‘, function (req, res) {
  res.sendfile(__dirname + ‘/index.html‘);
});

io.on(‘connection‘, function (socket) {
  socket.emit(‘news‘, { hello: ‘world‘ });
  socket.on(‘my other event‘, function (data) {
    console.log(data);
  });
});

客户端（/public/javascript/chat.js & /views/index.html）Client (index.html)

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect(‘http://localhost‘);
  socket.on(‘news‘, function (data) {
    console.log(data);
    socket.emit(‘my other event‘, { my: ‘data‘ });
  });
</script>

使用更早的EXPRESS框架Using with the Express framework

Server (app.js)

var app = require(‘express‘).createServer();
var io = require(‘socket.io‘)(app);

app.listen(80);

app.get(‘/‘, function (req, res) {
  res.sendfile(__dirname + ‘/index.html‘);
});

io.on(‘connection‘, function (socket) {
  socket.emit(‘news‘, { hello: ‘world‘ });
  socket.on(‘my other event‘, function (data) {
    console.log(data);
  });
});

客户端Client (index.html)

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect(‘http://localhost‘);
  socket.on(‘news‘, function (data) {
    console.log(data);
    socket.emit(‘my other event‘, { my: ‘data‘ });
  });
</script>

收发定制事件Sending and receiving events

Socket.IO 提供了从服务器发布和接受定制事件的途径。不仅仅能够完成连接、发信、断开连接这样一般事件的收发，开发人员可以发布如下例所示的定制事件。
Socket.IO allows you to emit and receive custom events. Besides connect, message and disconnect, you can emit custom events:

服务端Server

//注意，io（<port>） 将会为您的应用创建一个http服务进程。
//note, io(<port>) will create a http server for you

var io = require(‘socket.io‘)(80);

io.on(‘connection‘, function (socket) {
  io.emit(‘this‘, { will: ‘be received by everyone‘});

  socket.on(‘private message‘, function (from, msg) {
    console.log(‘I received a private message by ‘, from, ‘ saying ‘, msg);
  });

  socket.on(‘disconnect‘, function () {
    io.emit(‘user disconnected‘);
  });
});

将事件限制在命名空间内Restricting yourself to a namespace

如果你希望在一个特定的web应用中控制多个消息与事件的收发，推荐使用切换方式（默认/其他命名空间）来实现。如果你希望调用第三方的代码，或者编写一些希望与他人共享的代码，socket.io提供了一种途径：规定socket的命名空间。这有助于创建多线连接：实现了不去创建两个websocket连接，而是使用一个连接完成多线操作。
If you have control over all the messages and events emitted for a particular application, using the default / namespace works. If you want to leverage 3rd-party code, or produce code to share with others, socket.io provides a way of namespacing a socket.
This has the benefit of multiplexing a single connection. Instead of socket.io using two WebSocket connections, it’ll use one.

服务端Server (app.js)

var io = require(‘socket.io‘)(80);
var chat = io
  .of(‘/chat‘)//！of（namespace）确定了这个连接所在的命名空间
  .on(‘connection‘, function (socket) {
    socket.emit(‘a message‘, {
        that: ‘only‘
      , ‘/chat‘: ‘will get‘
    });
    chat.emit(‘a message‘, {
        everyone: ‘in‘
      , ‘/chat‘: ‘will get‘
    });
  });

var news = io
  .of(‘/news‘)//！of（namespace）确定了这个连接所在的命名空间
  .on(‘connection‘, function (socket) {
    socket.emit(‘item‘, { news: ‘item‘ });
  });

客户端Client (index.html)

<script>
  var chat = io.connect(‘http://localhost/chat‘)//！选择命名空间接受/发送特定的信息。
    , news = io.connect(‘http://localhost/news‘);//！选择命名空间接受/发送特定的信息。

  chat.on(‘connect‘, function () {
    chat.emit(‘hi!‘);
  });

  news.on(‘news‘, function () {
    news.emit(‘woot‘);
  });
  </script>

发送易变信息Sending volatile messages

有时候，某些消息的获取不是非常必要，甚至可以被抛弃。假想你有一个实时显示比伯这个关键词的所有推特的应用，如果某个客户端并没有准备好接受信息（因为网速慢或其他原因，又或者因为这些客户端正尝试通过长轮询的方式并且恰恰处在请求回应的过程之中）。如果这一次他们不能够完完全全地接收到比伯的实时推特不会影响这个应用的正常使用，在这种情况下，你就会希望将那些推特的信息当作易变信息（volatile messages）来发送。
Sometimes certain messages can be dropped. Let’s say you have an app that shows realtime tweets for the keyword bieber.
If a certain client is not ready to receive messages (because of network slowness or other issues, or because they’re connected through long polling and is in the middle of a request-response cycle), if they doesn’t receive ALL the tweets related to bieber your application won’t suffer.
In that case, you might want to send those messages as volatile messages.

服务端Server

var io = require(‘socket.io‘)(80);

io.on(‘connection‘, function (socket) {
  var tweets = setInterval(function () {
    getBieberTweet(function (tweet) {
      socket.volatile.emit(‘bieber tweet‘, tweet);//soket.volatile.emit就是这样的方式。
    });
  }, 100);

  socket.on(‘disconnect‘, function () {
    clearInterval(tweets);
  });
});

发送并获得返回数据Sending and getting data (acknowledgements)

有些时候，你可能希望得到客户端已经接收到信息的状态响应。
为了实现这样的期望，十分简单，只需要在.send或.emit函数的最后一个参量传递一个函数。不仅如此，当你使用.emit函数时，确认信息是你所指定的，意味着你还可以传递确认信息的内容。
Sometimes, you might want to get a callback when the client confirmed the message reception.
To do this, simply pass a function as the last parameter of .send or .emit. What’s more, when you use .emit, the acknowledgement is done by you, which means you can also pass data along:

服务端Server (app.js)

var io = require(‘socket.io‘)(80);

io.on(‘connection‘, function (socket) {
  socket.on(‘ferret‘, function (name, fn) {//传递一个fn函数
    fn(‘woot‘);//指定用于响应的确认信息
  });
});

客户端Client (index.html)

<script>
  var socket = io(); 
  // 小贴士:没有任何的参量的io（）会进行自动检查。
  //TIP: io() with no args does auto-discovery
  socket.on(‘connect‘, function () { 
  //小贴士:你可以监听connect事件，而是直接监听ferret事件。
  // TIP: you can avoid listening on `connect` and listen on events directly too!
    socket.emit(‘ferret‘, ‘tobi‘, function (data) {
      console.log(data); // data will be ‘woot‘
    });
  });
</script>

广播消息Broadcasting messages

想要广播一则消息，只需要添加一个broadcast标记给emit或send方法。广播意味着把消息发送给除了消息发送者以外的所有客户端。
To broadcast, simply add a broadcast flag to emit and send method calls. Broadcasting means sending a message to everyone else except for the socket that starts it.

服务端Server

var io = require(‘socket.io‘)(80);

io.on(‘connection‘, function (socket) {
  socket.broadcast.emit(‘user connected‘);
});

当作跨浏览器websocket使用Using it just as a cross-browser WebSocket

如果你只是希望使用websocket的语义，你也可以做到。只需要在消息的事件里调用send和listen方法。
If you just want the WebSocket semantics, you can do that too. Simply leverage send and listen on the messageevent:

服务端Server (app.js)

var io = require(‘socket.io‘)(80);

io.on(‘connection‘, function (socket) {
  socket.on(‘message‘, function () { });
  socket.on(‘disconnect‘, function () { });
});

客户端Client (index.html)

<script>
  var socket = io(‘http://localhost/‘);
  socket.on(‘connect‘, function () {
    socket.send(‘hi‘);

    socket.on(‘message‘, function (msg) {
      // my msg
    });
  });
</script>

########################################以上知识都是转载#########################################3

最后给大家推荐一篇socket.io简易教程(群聊，发送图片，分组，私聊)的文章，地址：http://blog.csdn.net/neuq_zxy/article/details/77531126