node.js chat程序如何实现Ajax long-polling长链接刷新模式


Posted in Javascript onMarch 13, 2012

废话不多说,开始今天的主题。纵观这个程序,感觉它的最可贵之处,在于展示了,如何用nodejs实现长链接模式的刷新技术。

(这个程序不详细介绍,重点讲解这个功能)
Client.js


首先看一段核心代码:

function longPoll (data) { 
//....此处省略**行 
$.ajax({ cache: false 
, type: "GET" 
, url: "/recv" 
, dataType: "json" 
, data: { since: CONFIG.last_message_time, id: CONFIG.id } 
, error: function () { 
addMessage("", "long poll error. trying again...", new Date(), "error"); 
transmission_errors += 1; 
//don't flood the servers on error, wait 10 seconds before retrying 
setTimeout(longPoll, 10*1000); 
} 
, success: function (data) { 
transmission_errors = 0; 
//if everything went well, begin another request immediately 
//the server will take a long time to respond 
//how long? well, it will wait until there is another message 
//and then it will return it to us and close the connection. 
//since the connection is closed when we get data, we longPoll again 
longPoll(data); 
} 
}); 
}

这是client.js中的一段代码,一看这段代码,大家应该立马想到两个字——“递归”。在longPoll方法中,再次调用longPoll方法,典型的递归调用。

根据这段代码的语义,可以看出,第一次加载时,会调用longPoll方法,异步向"/resv"获取值,如果成功了, 执行success的方法,立即再次调用longPoll方法。如果失败了,执行error函数,隔10秒中再次调用longPoll方法。当然,执行error方法有一定的次数限制,由变量transmission_errorsx控制。

大家可能会有一个疑问,这样一直递归循环获取数据,服务器会不会有很大的负担?在没有数据可获取的时候,也会一直这样循环吗?当然,答案时否定的!并且,nodejs利用自身的特点,很好的处理了这个问题。接着往下看:
Server.js
现看server中如何回应上面client的调用,核心代码:

fu.get("/recv", function (req, res) { 
//对session的验证和更新...... 
channel.query(since, function (messages) { 
if (session) session.poke(); 
res.simpleJSON(200, { messages: messages, rss: mem.rss }); 
}); 
});

先不要管这个fu.get()是什么意思,它和本次教程无关。总之知道它能回应client的调用就行了。上面的代码,除了对session的一些操作之外,只是调用了channel的query方法。注意传递的参数:
since,它纪录了一个时间;
匿名方法,它接受一个messages参数,两个动作:1 更新session时间,2 返回一个json,即把messages返回给客户端。

有人可能会有疑问:在这里直接返回messages不行吗,干嘛还得在一个channel中定义一个方法才操作?答案:如果是那样,就成了一个死循环,server和client每时每刻都进行着数据交互,即使没有信息可返回。

还是接着往下看吧!

看channel是怎么定义的:

var MESSAGE_BACKLOG = 200, 
SESSION_TIMEOUT = 60 * 1000; 
var channel = new function () { 
var messages = [], 
callbacks = []; 
this.appendMessage = function (nick, type, text) { 
var m = { nick: nick 
, type: type // "msg", "join", "part" 
, text: text 
, timestamp: (new Date()).getTime() 
}; 
switch (type) { 
case "msg": 
sys.puts("<" + nick + "> " + text); 
break; 
case "join": 
sys.puts(nick + " join"); 
break; 
case "part": 
sys.puts(nick + " part"); 
break; 
} 
messages.push( m ); 
while (callbacks.length > 0) { 
//shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值 
callbacks.shift().callback([m]); 
} 
while (messages.length > MESSAGE_BACKLOG) 
messages.shift(); 
}; 
this.query = function (since, callback) { 
var matching = []; 
for (var i = 0; i < messages.length; i++) { 
var message = messages[i]; 
if (message.timestamp > since) 
matching.push(message) 
} 
if (matching.length != 0) { 
callback(matching); 
} else { 
callbacks.push({ timestamp: new Date(), callback: callback }); 
} 
}; 
// clear old callbacks 
// they can hang around for at most 30 seconds. 
setInterval(function () { 
var now = new Date(); 
while (callbacks.length > 0 && now - callbacks[0].timestamp > 30*1000) { 
callbacks.shift().callback([]); 
} 
}, 3000); 
};

channel中定义了两个变量,两个方法,还有一个每隔3秒执行一次的setInterval函数。

首先看query方法,

query方法接收两个参数:
since:纪录一个时间
callback:即上面讲调用channel.query方法时传入的那个匿名函数(JS中,函数可以当参数传递,接收之后可直接调用。不会赶快补课啊。。。)

messages里存的时当前的聊天纪录队列,query方法会查找符合条件的聊天纪录,把他们放在matching队列中。如果matching.length>0,则调用callback接收的函数,即把matching以json格式返回client。但是。。。接下来是重点!!!

if (matching.length != 0) { 
callback(matching); 
} else { 
callbacks.push({ timestamp: new Date(), callback: callback }); 
}

如果matching.length<=0,程序会把callback和当前时间,以json格式,存入一个callbacks队列中。对!不执行了,因为没有符合条件的聊天消息,不需要在client显示,所以先把这个函数存起来,先不执行。

那也不能这样一直存着啊,万一下一秒有人发聊天消息怎么办?

接着看appendMessage(添加聊天消息)方法:

该方法中,前段部分很好理解,无非是接收传入的参数,组合成一个m集合,然后用sys.puts在终端显示一下,再把m插入到messages聊天消息队列中。接下来又是重点:

while (callbacks.length > 0) { 
//shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值 
callbacks.shift().callback([m]); 
}

现在要判断callbacks有没有储存,如果有,就执行一个,删除一个,知道执行完了为止。因为之前在没有聊天消息可返回的时候,有人发出了请求,然后系统没有执行这些请求,都把他们放在callbacks列表中了。

现在有人发送了聊天消息,执行添加方法的时候,要再次把那些没执行的请求都执行一遍。

通俗理解可以是:你给我发送请求了,我现在还没有新消息可以答复你,一旦有人发了新消息,我会立刻答复你。

不知道大家理解了没。。。

这一步完了,最后一步,是每隔3秒钟,清空过期的callbacks,是一个setInterval函数,这个不难理解。
总结

nodejs用自身基于事件驱动的语言特点,实现了长链接刷新功能,让我们打开眼界。自我感觉受益匪浅。特此花时间写个教程跟大家分享,同时也加深我自己的理解。

Javascript 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 #Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 #Javascript
Node.js实战 建立简单的Web服务器
Mar 08 #Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 #Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 #Javascript
node.js 一个简单的页面输出实现代码
Mar 07 #Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 #Javascript
You might like
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
python脚本设置超时机制系统时间的方法
2016/02/21 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python ansible服务及剧本编写
2017/12/29 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
剪彩仪式主持词
2014/03/19 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
详解Redis主从复制实践
2021/05/19 Redis
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
Python中递归以及递归遍历目录详解
2021/10/24 Python