新微赢技术网

标题: 与正在浏览这个站点的用户进行聊天的效果的实现方法 [打印本页]

作者: 孤独与夜缠绵 时间: 2009-3-16 23:13
标题: 与正在浏览这个站点的用户进行聊天的效果的实现方法
相信很多人都看到过这样一种网页里面存在的特效，它能让正在浏览这个站点的用户进行聊天。不过在我看来，这个功能形同鸡肋——谁会知道哪些人正在浏览，又有哪些人可以聊天呢？不过今天在浏览LoveCherry的blog时发现在左侧边栏里出现了一个可供聊天的Live Messenger对话框，顿时让我产生了兴趣。不过知道这个东东的人似乎还不多，因此只能动用搜索引擎了（在这里想再说一句多余的话，因为我时常会收到一些类似于“ASP.NET AJAX框架哪里可以下载”之类的问题，所以我建议那些朋友一定要养成先搜再问的习惯）。那么我们就先来看看这个东西具体是什么样的吧。
　　首先，我们可以访问这个页面（http://settings.messenger.live.com/applications/CreateHtml.aspx），从中可以看出微软提供了两种方式供用户使用Live Messenger的Web聊天功能。
　　提供一个链接（），点击它则会弹出一个页面可供聊天——于是别人就可以通过这个页面与您联系了。值得一提的是，图标也会根据用户当时的状态不同而改变。
提供了一段代码，在页面上直接放入一块较小的区域显示聊天页面。很显然，这是一个iframe。
　　在进行了简单的试验（使用Web Live Messenger和自己的Live Messenger聊天）之后，发现这个小玩意儿的功能还是比较可圈可点的。
可以选择是否允许匿名用户使用Web Live Messenger（http://settings.messenger.live.com/applications/WebSettings.aspx）。
　　性能很不错，基本上没有明显延迟，当然这可能和用户本身的网络条件有关。

聊天的体验比想象中高很多，我们可以在Web Live Messenger的界面上发现“最近一条信息收于XXXX年X月X日 XX:XX:XX”以及“XXXX正在输入消息”的字样。此外，我们聊天中使用的特殊字体和表情符号也能正确显示。
　　尝试通过Web Live Messenger找出对方的IM帐号，但似乎它对于这点有着很好的保护，这意味着如果用户将Web Live Messenger放在blog上，可以避免因为泄露Email地址而遭受垃圾邮件地攻击。
　　试验了之后，我决定将其放在我的blog中，不过到底该怎么放呢？
Live Demo
　　现在访问LoveCherry的blog会发现他已经将Web Live Messenger从边栏撤下了。边栏实在太窄，如果使用一个稍微长一些的Nick就会被顶的很高，而且由于一行能显示的文字太少，用户体验也很差。最后，我使用了“传统”网页内嵌聊天对话框的做法。如果您现在正在浏览我的blog，就会发现页面的右下角出现了一个矩形的Windows Live Messenger的图片，点击它则会显示出一个300*400的Web Live Messenger聊天对话框。如果您觉得这个对话框挡着页面上的内容了，就可以点击对话框左上角的关闭按钮，这样页面上又只剩下了右下角的矩形图片了。同时，我选择了淡入淡出的效果来显示/隐藏Web Live Messenger聊天对话框。这么做的目的只有一个，那就是让用户体验更酷一些。　　现在大家可以试验一下Web Live Messenger的聊天功能了。不过请大家能够访问http://settings.messenger.live.com/applications/CreateHtml.aspx，在页面中和自己的Live Messenger进行聊天。如果您直接在我的blog上测试Web Live Messenger，我实在会忙不过来。:(
　　实现
　　实现并不复杂，我总共用了大约2个小时，其中还包括学习了一些jQuery的功能所花的时间。唉，没想到我居然到现在才第一次使用这个如此了得的JavaScript框架。不得不说，如果您正在寻找一款方便您开发前端应用程序的JavaScript框架，并且希望它足够的小，那么jQuery很可能就是您需要的。与它强大的功能不相称的是迷你的体积。一个经过混淆，还没有Gzip压缩的jQuery脚本文件才26K大小，但是它带给你的便利可以帮您节省大量的工作。
　　那么我们现在就开始吧，首先，我们需要让Web Live Messenger的聊天对话框能够永远显示在页面的可视范围之内。要实现这个功能，关键还是在于对页面中元素尺寸的计算。请看如下代码：

欢迎光临新微赢技术网 (http://bbs.weiying.cn/)