用node.js实现HTML5原生的comet(长连接)
2016-10-10 00:00
441 查看
介绍一下
comet跟
ajax不同的地方在于,
ajax是主动’拉’服务端的内容,而
comet是服务端主动’推’内容给客户端。
实现成本及其简单,比起
ajax模拟的
间隔一段去查询服务端内容的方式在性能等各方面都要好。
那么优点是:
上面说了,实现很简单。实时性好,消息延迟小。
…
那么缺点是:
超霸道,只说话,不听话,不像websocket,仔细听,听了还会回答。
既然提到
websocket了,那么如果想要更强大的话,建议还是
websocket,有种
jquery跟
angular衡量的意思。
很适合小数据传输,但是不适合大数据。
用来做什么?
聊天室啦股票什么的
就想到那么多了…
第一步
那么开始动手吧,首先是浏览器的客户端。// 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. 设定头信息 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
相关文章推荐
- Nodejs express、html5实现拖拽上传
- Nodejs express、html5实现拖拽上传
- node.js 实现html5视频播放截图
- 原生JS+HTML5实现的可调节写字板功能示例
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- 阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由
- Node.js实现mysql连接池使用事务自动回收连接的方法示例
- Node.js 连接MongoDB,并实现浏览器GET请求加参数
- html5 websocket + node.js 实现网页聊天室
- node.js系列(实例):原生node.js+formidable模块实现简单的文件上传
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- 原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
- 利用Web Socket技术实现client端与server端的连接(以Node.js作为服务器端)
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- node.js系列(实例):原生node.js实现静态资源管理
- node.js系列(实例):原生node.js实现接收前台post请求提交数据
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- node.js---study2 连接池连接数据库实现登录注册查询用户的功能---
- 混合开发-利用Cordova插件实现HTML5 与 原生代码的连接