魔工坊

阿度

前端工程师


发布者资料


源码相关属性

  • 资源价格: 免费下载
  • 文件类型: 压缩文件
  • 模板大小: 0.47M
  • 下载次数: 104 次
  • 下载权限: 5,6,7,8
  • 更新日期: 2015-05-29 13:57:25

推荐源码

3361官方验证资源

node-socket即时聊天源码


亲,登录后可浏览完整内容额!  快 速 登 录

1. node的安装与使用

关于如何安装node,百度一下哈。

2. 聊天系统使用到的模块

node的火爆得益于其丰富的模块管理系统(npm),我们能够从这里获取到任何我们想要的模块,同时我们也能上传自己的模块。关于这个聊天项目,我们使用到了两个模块:express和socket.io,使用npm安装这两个模块即可

npm install express npm install socket.io

安装成功之后,就需要使用express构建我们的web开发框架

var express = require(express), //引入express模块app = express(),server = require(http).createServer(app),io = require(socket.io).listen(server);app.use(/, express.static(__dirname + /www)); //指定静态HTML文件的位置server.listen(80);

这样,我们把所有的前端文件放到www目录里就行,比如html, css, js和images等。更多关于express的信息,可以参考这里:express api

3. 简要介绍node的事件机制

其实在node中关于事件机制有很多的内容,这里主要讲解emit和on的使用:emit 是事件产生器,用来产生事件的,on 是事件接收器,用来接收事件的,那么这两个正好组成了一组。一个在前端产生,另一个在后端接收,或者相反。这样事件就能在前后端进行传递了,同时也能进行参数的传递。

前端:

// wchat.jssocket.emit("login", {nickname:nickname, img:$img.attr("src")});

后端:

// server.jssocket.on("login", function(obj){     if(User.hasExisted(obj.nickname)){         socket.emit("nickExisted");     }else{         obj.uid = socket.id;         User.info[socket.id] = obj;         // 通知用户登录成功         socket.emit("loginSuccess", obj.uid);          var s = {nickname:obj.nickname, user:User.info, len:User.getLength(), type:"login"};  		// 通知其他人有新用户进入         io.sockets.emit("system", s);     }});

4. web即时聊天的思路

4.1 用户的登录与退出:

因为暂时没有使用数据库,用户只能临时输入用户名,只要跟之前的用户不重复就能使用。同时在本系统中,还增加了一个可选择自己头像的功能,然后与用户名一起提交到server.js,server.js中有一个数组专门来存储所有登陆的用户。后续会添加上数据库的功能,来验证用户,不必再使用数组保存用户。

// 登陆login : function(){     var nickname = $("#nickname").val();     if(nickname===""){         return;     }     var $img = $(".portrait .selected").find("img"); // 获取头像地址     socket.emit("login", {nickname:nickname, img:$img.attr("src")});     return false;}

server.js收到用户的登录信息后,先判断用户名是否重复,如果没有重复,则返回登陆成功的信息,同时提示其他用户有新用户加入,并更新在线用户列表。新用户验证成功后,在wchat 中的userid字段中保存从服务器返回的用户编号,获取所有的用户列表,然后就可以聊天了。

socket.on("login", function(obj){     if(User.hasExisted(obj.nickname)){         socket.emit("nickExisted");     }else{         obj.uid = socket.id;         User.info[socket.id] = obj;         socket.emit("loginSuccess", obj.uid);         // 更新在线用户列表         var s = {nickname:obj.nickname, user:User.info, len:User.getLength(), type:"login"};         io.sockets.emit("system", s);                  console.log(obj.nickname+ 已接入);     }});

4.2 用户发送信息给其他用户

用户登录成功后就可以发送消息了:

// user_msg是用户要发送的消息socket.emit("message" {msg:user_msg}, userid);

当然这之前还需要进行一些其他的检验,比如判断wchat.userid是否为空,若为空表示用户还没有登陆,不能进行发送;若输入框内没有内容,直接点击发送按钮,也不能向服务器发送请求。当所有的验证都通过了,就可以发送请求了。

server.js接收到message 发送过来的请求后,首先验证是否有userid这个用户,如果没有则返回提示“该请求非法”,否则就使用msg向所有人发出这个消息,这个消息里具体的字段有:

{     status:success,     info:{         userid:123,         nickname:wenzi,         image:xx.png,         msg:hello, my name is wenzi     }}

前端接收到msg的请求后,判断status的值是否等于success,若等于,则解析info字段,将这些信息追加到输入框中:

if(result.status=="success"){      var info = result.info;      var $content = $(this.content);       this.userid==info.uid && $content.addClass( louzhu );      $content.find(img).attr(src, info.img);      $content.find(.name).html(info.nickname);      $content.find(.timer).html(info.time);      $content.find(.msg).html(info.msg);       $(".record").find(.list).append($content);      this.scroll(); // 保证滚动条在最底部      $("#msg").val("").focus();  }else{      this.warning("认证失败");  }

到这里,最基本的聊天功能已经完成了。

我们还以给这个聊天系统弄一些锦上添花的功能,比如可以修改文字的颜色和大小,发送图片等功能。

4.3 修改文字的颜色和大小

在html中插入颜色选择器和文字大小修改控件,让用户进行选择。 颜色选择器可以使用html5中提供的input:type=color标签,文字大小修改控件我采用的是select标签让用户进行选择。

 

当然用户也可以不选择,这两个都有默认值,文字颜色默认是#000000 ,文字大小默认是14px ,每次发送消息时,都获取一次这两个控件的值:

socket.emit("message", {msg:msg, color:$(#fontcolor).val(), size:$("#fontsize").val()}, userid);

服务器接收到这些值后,可以先拼接好html后再返回到前端,或者直接把这些属性发送到前端,让前端进行拼接。

4.4 发送图片

上面已经实现了基本的聊天功能了,进一步,如果我们还想让用户可以发送图片,那程序便更加完美了。

图片不同于文字,但通过将图片转化为字符串形式后,便可以像发送普通文本消息一样发送图片了,只是在显示的时候将它还原为图片。

在这之前,我们已经将图片按钮在页面放好了,其实是一个文件类型的input,下面只需在它身上做功夫便可。

用户点击图片按钮后,弹出文件选择窗口供用户选择图片。之后我们可以在Javascript代码中使用FileReader来将图片读取为base64格式的字符串形式进行发送。而base64格式的图片直接可以指定为图片的src,这样就可以将图片用img标签显示在页面了。

为此我们监听图片按钮的change事件,一但用户选择了图片,便显示到自己的屏幕上同时读取为文本发送到服务器。

$("#fileupload").on("change", function(){     //检查是否有文件被选中     var $this = $(this),         files = $this[0].files;     if (files.length != 0) {         //获取文件并用FileReader进行读取         var file = files[0],             reader = new FileReader();         if (!reader) {             Chat.warning("您的浏览器不支持FileReader");             $this.val();             return;         };         reader.onload = function(e) {             //读取成功,显示到页面并发送到服务器             $this.val();             var $img = $(+e.target.result+" alt="img">),                 img = $img[0];              socket.emit(message, {msg:+e.target.result+" alt="img" data-width="+img.width+" data-height="+img.height+">, color:$(#fontcolor).val(), size:$("#fontsize").val()}, Chat.userid);             // that._displayImage(me, e.target.result);         };         reader.readAsDataURL(file);     };});

我们使用上面发送文字的事件来发送图片,然后再通过服务器分发到各个用户的聊天面板上。

有时候我们发送会很大的图片,产生横向的滚动条,破坏掉布局,因此我们限制图片的高度:

.chat .info_msg .msg img{     max-width: 174px;}

2015/04/10更新
之前不知道怎么实现点击查看原图,后来才发现,能够根据e.target.result构造出一个jQuery对象:$img,然后顺便得出DOM对象:var img = $img[0]。通过这个img能够获取图片原生的高度和宽度,然后将这个高度和宽度作为属性存储到img标签中。用户点击被等比例缩小的图片时,获取这个存储的宽度和高度,展示出来。
image

5. 总结

到这里,基本上所有的东西已经完成了,当然,还有很多改进的地方,会在以后慢慢补上。比如有:发送语音,添加数据库,使用CSS3进行窗口抖动,可以一对一聊天等。

其实一对一聊天已经实现了个大概了,在shaobings_one 的分支上,只是目前只实现了前端的功能,还不能真正的发送消息。

 


赞助商:三秒让您的浏览器变身Win8 [广告]

[ 源码搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]


下载地址

登录后即可下载


说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们。

魔友吐槽

立即下载

发布源码

魔工坊系统提示