作品►node.js

用node.js实现HTML5原生的comet(长连接)

介绍一下

  • comet跟ajax不同的地方在于，ajax是主动’拉’服务端的内容，而comet是服务端主动’推’内容给客户端。
  • 实现成本及其简单，比起ajax模拟的 间隔一段去查询服务端内容 的方式在性能等各方面都要好。

那么优点是：

  • 上面说了，实现很简单。
  • 实时性好，消息延迟小。
  • …

demo

那么缺点是：

  • 超霸道，只说话，不听话，不像 websocket，仔细听，听了还会回答。
  • 既然提到 websocket了，那么如果想要更强大的话，建议还是 websocket，有种 jquery 跟 angular 衡量的意思。
  • 很适合小数据传输，但是不适合大数据。

用来做什么？

  • 聊天室啦
  • 股票什么的
  • 就想到那么多了..

第一步

那么开始动手吧，首先是浏览器的客户端。

1
2
3
4
5
6
7
8
// 1. 声明EventSource
var es = new EventSource('/msg');

// 2. 监听数据
es.onmessage = function (e) {
    // 然后做点什么..
    document.querySelector('#msg').innerHTML += '<li>'+ e.data +'</li>'
};

客户端编码完毕，对，就TM这么简单！ ;-)

第二步

然后是服务端，这里用 node.js实现。
node.js:

1
2
3
4
5
6
7
8
9
10
11
// 1. 设定头信息
res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    "Connection": "keep-alive"
});

// 2. 输出内容，必须 "data:" 开头 "\n\n" 结尾（代表结束）
setInterval(function () {
    res.write("data: " + Date.now() + "\n\n");
}, 1000);

服务端完毕，对，还是TM这么简单！ ;-)

最后

  • 写了个例子，在我的github上。
  • 实现长连接的办法其实有不少，这种方式看起来比较”轻量”。
  • 如果需求比较丰富，建议用比较完善的 socket.io
技术： html5+javascript
时间： 2014年11月
实例： html5-comet-EventSource–node.js-example
参考： EventSource