node-socket实现web的即时聊天系统
2015-04-05 23:44
615 查看
本文将使用Node.js加web socket协议打造一个网页即时聊天程序,其中将会使用到express和socket.io两个包模块,下面会有介绍。
安装成功之后,就需要使用express构建我们的web开发框架
这样,我们把所有的前端文件放到www目录里就行,比如html, css, js和images等。更多关于express的信息,可以参考这里:express api
前端:
后端:
server.js收到用户的登录信息后,先判断用户名是否重复,如果没有重复,则返回登陆成功的信息,同时提示其他用户有新用户加入,并更新在线用户列表。新用户验证成功后,在
当然这之前还需要进行一些其他的检验,比如判断wchat.userid是否为空,若为空表示用户还没有登陆,不能进行发送;若输入框内没有内容,直接点击发送按钮,也不能向服务器发送请求。当所有的验证都通过了,就可以发送请求了。
server.js接收到
前端接收到msg的请求后,判断status的值是否等于success,若等于,则解析info字段,将这些信息追加到输入框中:
到这里,最基本的聊天功能已经完成了。
我们还以给这个聊天系统弄一些锦上添花的功能,比如可以修改文字的颜色和大小,发送图片等功能。
当然用户也可以不选择,这两个都有默认值,文字颜色默认是
服务器接收到这些值后,可以先拼接好html后再返回到前端,或者直接把这些属性发送到前端,让前端进行拼接。
图片不同于文字,但通过将图片转化为字符串形式后,便可以像发送普通文本消息一样发送图片了,只是在显示的时候将它还原为图片。
在这之前,我们已经将图片按钮在页面放好了,其实是一个文件类型的input,下面只需在它身上做功夫便可。
用户点击图片按钮后,弹出文件选择窗口供用户选择图片。之后我们可以在JavaScript代码中使用FileReader来将图片读取为base64格式的字符串形式进行发送。而base64格式的图片直接可以指定为图片的src,这样就可以将图片用img标签显示在页面了。
为此我们监听图片按钮的change事件,一但用户选择了图片,便显示到自己的屏幕上同时读取为文本发送到服务器。
我们使用上面发送文字的事件来发送图片,然后再通过服务器分发到各个用户的聊天面板上。
有时候我们发送会很大的图片,产生横向的滚动条,破坏掉布局,因此我们限制图片的高度:
其实一对一聊天已经实现了个大概了,在
如果你有什么建议和意见,欢迎留言。
1. node的安装与使用
关于如何安装node,可以参考我的上篇文章【使用node更新google hosts】,那篇文章比较详细的介绍了如何安装node。2. 聊天系统使用到的模块
node的火爆得益于其丰富的模块管理系统(npm),我们能够从这里获取到任何我们想要的模块,同时我们也能上传自己的模块。关于这个聊天项目,我们使用到了两个模块:express和socket.io,使用npm安装这两个模块即可npm install express npm install socket
安装成功之后,就需要使用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.js socket.emit("login", {nickname:nickname, img:$img.attr("src")});
后端:
// server.js 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); } });
4. web即时聊天的思路
4.1 用户的登录与退出:
因为暂时没有使用数据库,用户只能临时输入用户名,只要跟之前的用户不重复就能使用。同时在本系统中,还增加了一个可选择自己头像的功能,然后与用户名一起提交到server.js,server.js中有一个数组专门来存储所有登陆的用户。后续会添加上数据库的功能,来验证用户,不必再使用数组保存用户。server.js收到用户的登录信息后,先判断用户名是否重复,如果没有重复,则返回登陆成功的信息,同时提示其他用户有新用户加入,并更新在线用户列表。新用户验证成功后,在
wchat中的userid字段中保存从服务器返回的用户编号,获取所有的用户列表,然后就可以聊天了。
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标签让用户进行选择。<div class="fontlist clearfix"> <div class="fontcolor cc"> <input type="color" id="fontcolor"> </div> <div class="fontsize cc"> <select id="fontsize"> <option value="12px">12px</option> <option value="14px" selected="true">14px</option> <option value="16px">16px</option> <option value="18px">18px</option> <option value="20px">20px</option> <option value="22px">22px</option> </select> </div> </div>
当然用户也可以不选择,这两个都有默认值,文字颜色默认是
#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(''); socket.emit('message', {msg:'<img src="'+e.target.result+'" alt="img">', color:$('#fontcolor').val(), size:$("#fontsize").val()}, Chat.userid); }; reader.readAsDataURL(file); }; });
我们使用上面发送文字的事件来发送图片,然后再通过服务器分发到各个用户的聊天面板上。
有时候我们发送会很大的图片,产生横向的滚动条,破坏掉布局,因此我们限制图片的高度:
.chat .info_msg .msg img{ max-width: 260px; }
5. 总结
到这里,基本上所有的东西已经完成了,当然,还有很多改进的地方,会在以后慢慢补上。比如有:发送语音,添加数据库,使用CSS3进行窗口抖动,可以一对一聊天等。其实一对一聊天已经实现了个大概了,在
shaobings_one的分支上,只是目前只实现了前端的功能,还不能真正的发送消息。
如果你有什么建议和意见,欢迎留言。
相关文章推荐
- websocket redis实现集群即时消息聊天
- nodejs+express+websocket+redis实现消息订阅系统
- WebSocket+node.js创建即时通信的Web聊天服务器
- websocket + node.js聊天系统
- 基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统
- 使用Spring的低层级WebSocket API实现即时聊天工具-上篇
- NodeJS+Socket.io+ExpressJS实现web聊天应用
- Node.js + Web Socket 打造即时聊天程序嗨聊
- 基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现
- 基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统
- 基于Node.js的web聊天系统 - 真正意义上的web实时聊天系统
- node.js和socket.io纯js实现的即时通讯实例分享
- 使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统
- Windows Phone 7 socket实现即时聊天
- 基于smack的即时聊天系统之登陆功能的实现
- Spring+WebSocket+SockJS实现实时聊天
- 安卓SocketIO+Node.js实现好友与好友间的实时聊天
- HTML5 WebSocket+Tomcat实现Web版即时聊天室
- 基于smack的即时聊天系统之文件传输功能实现
- node.js和socket.io纯js实现的即时通讯实例分享