设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 17780|回复: 40

[原创] 请大家测试刚完成的仿MSN的WEBIM,有部分源码

[复制链接]
发表于 2008-2-6 15:27:21 | 显示全部楼层 |阅读模式
测试地址:http://www.shufou.com/chat/,放在朋友的服务器上,欢迎测试并提出建议哦,谢谢大家,也祝大家鼠年吉祥。
需要源码的见本文最后

支持下列浏览器(实际测试)

    * IE7、IE6
    * Firefox2
    * Opera9.5beta
    * Safari3(汉化版)

不支持下列浏览器(实际测试)

    * IE5.5(存在一些问题,解决需要时间)

为了更好的用户体验请注意

    * firefox2的SuperDragAndGo插件会导致onmousedown/onmouseup事件失效,请关闭
    * opera默认设置不允许js代码检测鼠标右键点击事件,请修改

详细功能列表

    * 注册、登录,登录支持记住帐号、记住密码和自动登陆选项
    * 修改本人状态、签名并通知给好友
    * 修改本人档案
    * 好友列表的状态、组别排序以及大图标显示
    * 添加、屏蔽、删除好友
    * 查看聊天记录,支持下载到本地
    * 发送、接收带图片表情的消息
    * 发送、接受闪屏振动
    * 主面板根据姓名、邮箱搜索好友功能
    * 系统设置
    * 添加、修改好友昵称
    * 联系人卡片
    * 三种(好友上线、新消息、闪屏)声音提示

部分源码

    因为本WebIM程序我已经答应给朋友使用,为了他网站的数据安全,我公开的代码不包含数据部分,js部分未压缩有注释。下面一张图就是这部分代码运行的截图!
    地址:http://www.qgy18.com/webim.rar
    其实压缩包data目录下有测试数据,你完全可以按照测试数据的格式自己写数据部分。
    08.02.07补充:谢谢大家的留言,我这里简单的说下压缩包里没提供的部分代码的实现思路,如果大家觉得有更好的方法欢迎提出:handshake
    1.数据库的设计这个因人而异,注册、登陆是最基本的东西就不写了;
   2.为了节约网络流量和浏览器资源占用,js只设立2个定时器,一个定时器负责向服务器取回数据,另一个是检测1分钟用户的活跃程度(发送、接受消息),并依据这个活跃程度来调整第一个定时器请求服务器的间隔。简单说来:打个比方,就是如果你比较活跃,可每1s钟我就去请求下服务器,如果你不活跃,可能要间隔5s我才去请求一次,这也是为了减轻服务器的压力嘛。
   3.程序核心数据表是消息表,这个表应该包括如下部分:消息来源、消息去向、消息类型、消息内容等等。其中消息类型应该是一个枚举:比方说1为文本2为闪屏震动3为广告等等。这样客户端ajax取到这些数据后,就可以用一个switch来判断,是该显示消息呢,还是该显示闪屏呢,或者是该把某某用户设置为下线等等。
   4.鉴于webim是运行在浏览器的,如果别人把浏览器关闭了,那么服务器怎么知道这个用户下线了呢?有人说可以用onbeforeunload。我采用的是另外一个方法:前面提到每个客户端都有1个定时器定时向服务器请求消息,那么我在每次请求的同时把他的最后活动时间设置为当前。这样做有什么用呢?很简单,如果一个用户的状态是在线但他的最后活动时间是1分钟前,那么我们就可以断定他其实已经下线了,就可以把他的状态设置为下线并向他所有在线好友广播他下线了。怎么广播呢?也很简单,往消息表写记录嘛。
   5.如果webim用的人多了,一天要产生大量的数据,这样数据越多速度就越慢。怎么办呢?我这么做的,我把消息表分成了2部分:用户消息表和系统消息表,用户消息是用户在聊天记录能看到的,系统消息则看不到。这样做有什么好处呢?好处就是系统消息表里的数据可以取完就删,减少数据库的体积。
   其实如果你对动态语言和数据库有一定的了解,webim的后台开发相对于UI来说还是比较容易的,反正我是这么认为的。大家如果有什么问题,加我MSN吧!quguangyu18@hotmail.com,也可以在本帖,或我的blog http://www.qgy18.com提出,我会尽力解答的。



[ 本帖最后由 qgy18 于 2008-2-7 16:18 编辑 ]

评分

参与人数 2威望 +20 收起 理由
小谢 + 10 UI做得不错!
月影 + 10 很赞~~

查看全部评分

发表于 2008-2-6 17:07:59 | 显示全部楼层
很强大。顶LZ一个。谢谢分享。


IM上建议增加好友模拟搜索功能。这样方便没有好友的人可以第一时间加上一个好友然后体验。也方便扩大交流人群。
建议增加图片发送功能。

整个产品很强大。佩服!!!

[ 本帖最后由 heny110 于 2008-2-6 17:32 编辑 ]
 楼主| 发表于 2008-2-6 17:33:59 | 显示全部楼层
我刚刚测试了一下,我这里可以解压啊,麻烦你再试试,如果还不行的话我再想办法。

现在注册新用户是要加一个默认帐号,我想过把所有注册用户的邮件列出来方便大家添加好友,但看到不少注册用户填的是正式邮箱,这样做不合适。

图片发送功能是个好主意,不过需要服务器中转,图片大的话会有明显的延时~
发表于 2008-2-6 17:41:57 | 显示全部楼层
图片可以用支持HTTP地址的发送方式。这样可以节省服务器资源。
用户的EMAIL隐私方面也的确是一个问题。可以考虑增加一种登陆方式。跟QQ一样指派一组数字序列。隐藏用户的真实EMAIL。需要隐藏的人自己设置就可以了。
我遇见了百年难得一遇的灵异事件。方便直接发一份到我邮箱吗。henyhanyu@163.com 谢谢
春节快乐。哈哈。再过半小时就该到除夕宴了:handshake
发表于 2008-2-6 17:57:53 | 显示全部楼层
谢谢分享。。:handshake
发表于 2008-2-6 18:04:34 | 显示全部楼层
:victory: 好
 楼主| 发表于 2008-2-6 18:36:32 | 显示全部楼层
原帖由 heny110 于 2008-2-6 17:41 发表
图片可以用支持HTTP地址的发送方式。这样可以节省服务器资源。
用户的EMAIL隐私方面也的确是一个问题。可以考虑增加一种登陆方式。跟QQ一样指派一组数字序列。隐藏用户的真实EMAIL。需要隐藏的人自己设置就可以 ...


已发送,请查收。我估计是你解压软件的问题,我已经换成zip重新压了1遍给你发了过去!
发表于 2008-2-6 18:46:46 | 显示全部楼层
我顶!

:lol :lol :lol :lol
发表于 2008-2-6 18:47:59 | 显示全部楼层
原帖由 qgy18 于 2008-2-6 18:36 发表


已发送,请查收。我估计是你解压软件的问题,我已经换成zip重新压了1遍给你发了过去!

谢谢
发表于 2008-2-6 19:10:55 | 显示全部楼层
我也来41下
发表于 2008-2-6 19:19:20 | 显示全部楼层
非常棒,建议定义一下鼠标指针的样式,会更仿真。
发表于 2008-2-6 20:27:52 | 显示全部楼层
我最喜欢webim 了,这个作的真实入木三分。
发表于 2008-2-7 03:36:19 | 显示全部楼层
LZ的ui似乎很牛X,重写一份数据库结构也很简单。。。但是似乎没有实现聊天的功能。。
发表于 2008-2-7 03:44:18 | 显示全部楼层
而且还有好多功能没提供呢。。 似乎提供的表只有登陆模块和用户信息模块的
发表于 2008-2-7 09:30:26 | 显示全部楼层
不错.能实现聊天功能该多好.:handshake
发表于 2008-2-7 12:26:19 | 显示全部楼层
:handshake :handshake
发表于 2008-2-7 16:39:02 | 显示全部楼层
在登陆的时候有个状态选择。 在GetUserLogin.asp里怎么取得那个状态的数值呢? 还有在主界面的也是
 楼主| 发表于 2008-2-7 18:52:01 | 显示全部楼层
原帖由 nnylyj 于 2008-2-7 16:39 发表
在登陆的时候有个状态选择。 在GetUserLogin.asp里怎么取得那个状态的数值呢? 还有在主界面的也是

登陆界面:我在一个id为"divStatusId6Type3"的div添加了一个属性us来表示登陆状态,当你选择不同的状态,这个值也会改变的。
我登陆是用ajax post的数据,那么就可以这么得到登录时用户选的状态:var us = $("divStatusId6Type3").getAttribute("us"),
然后post数据时 把us也传过去就可以了
主界面:登陆成功后,登陆时用户选的状态已经在数据库了,我用了一个Ajax方法从数据库取回了自己的Profile,然后填充。所以主界面的状态跟登陆时选的一致。

[ 本帖最后由 qgy18 于 2008-2-7 18:54 编辑 ]
发表于 2008-2-7 23:19:15 | 显示全部楼层
那在主界面更改状态呢? 穿一个参数到ASP中么
 楼主| 发表于 2008-2-8 01:08:12 | 显示全部楼层

回复 #19 nnylyj 的帖子

你是问怎么传值给asp?js目录下webimhelper.js里有一个ajax的类
如果new Ajax().get("a.asp?us=1"),那么在a.asp里用Request.QueryString("us")能取道us的值
如果new Ajax().post("a.asp","us=1"),那么在a.asp里用Request.Form("us")也能取道us的值
两种方法的不同之处是上面是get,传值的长度有限制;下面是post,安全性高一些,对长度没限制。
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2019-4-18 22:03 , Processed in 0.104326 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表