基于node.js的在线聊天室

来源：互联网发布：苏州爱知科技怎么样编辑：程序博客网时间：2024/06/05 08:13

1.工程目录

2.客户端网页显示

2.1客户端html代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="stylesheets/style.css"/><title>chatMaster</title></head><body><div id="" class="bgbody"><div id="" class="bgin1"><div id="emoji1"></div><div id="bgin1-1" class="bgin1-1"></div></div><div id="" class="bgin2"><input id="colorStyle" type="color" placeHolder='#000' title="font color" /><input id="emoji" type="button" value="emoji" title="emoji" /><label for="sendImage" class="imageLable"><input type="button" name="image" id="image" value="image" />                    <input id="sendImage" type="file" value="image" name="image"/>                </label>                <input type="button" name="clear" id="clear" value="clear" /></div><div id="" class="bgin3"><div id="bgin3-1"><textarea name="mysend" rows="" cols="" id="mysend"></textarea></div><button id="send">发送</button></div><div id="bgin4"><input type="text" name="myname" id="myname" placeholder="请输入昵称" /><input type="button" id="login" value="登录" /></div></div></body><script type="text/javascript" src="javascripts/jquery-1.11.3.min.js"></script><script type="text/javascript" src="/socket.io/socket.io.js"></script><script type="text/javascript" src="javascripts/main.js"></script></html>

2.2客户端main.js

var date = new Date();var nian= date.getFullYear();var yue= date.getMonth()+1;var ri=date.getDate();var hour=date.getHours();if(hour<10){hour="0"+hour;}var minute=date.getMinutes();if(minute<10){minute="0"+minute;}var second=date.getSeconds();if(second<10){second="0"+second;}var day=date.getDay();function shijian (){if(day==0){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期日";}else if(day==1){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期一";}else if(day==2){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期二";}else if(day==3){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期三";}else if(day==4){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期四";}else if(day==5){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期五";}else if(day==6){var time=nian+"年"+yue+"月"+ri+"日"+hour+":"+minute+":"+second+" "+"星期六";}return time;}var socket = io.connect('http://127.0.0.1:3000');$("#image").click(function(){$("#sendImage").click();});//$("#colorStyle").click(//console.log($("#colorStyle").val())//);//点击emoji按钮显示表情面包进行控制$("#emoji").click(function(){if($("#emoji1").css("display")=="none"){$("#emoji1").css("display","block");}else{$("#emoji1").css("display","none");};if($("#emoji1").css("display")=="block"){var emojis=document.getElementById("emoji1");var fragment= document.createDocumentFragment();for(i=1;i<70;i++){var imgs=document.createElement("img");imgs.src='content/emoji/'+i+'.gif';imgs.title=i;imgs.id="s"+i;imgs.style.margin="2px";imgs.style.position="relative";imgs.style.height="29px";imgs.style.width="29px";imgs.style.display="block";imgs.style.padding="1px";imgs.style.float="left";fragment.appendChild(imgs);}emojis.appendChild(fragment);for(i=1;i<=69;i++){(function(){$("#s"+i).hover(function(){$(this).css("backgroundColor","red")},function(){$(this).css("backgroundColor","white");});$("#s"+i).click(function(){emjioSrc=$(this).attr("src");color=$("#colorStyle").val();socket.emit('emjioSrc',{emjioSrc,yonghu,color});$(emojis).empty();$(emojis).css("display","none");});})();}}});//清除通话记录clear按钮$("#clear").click(function(){$("#bgin1-1").empty();});//登录按钮控制$("#login").click(function(){if($("#myname").val()!=""){yonghu=$("#myname").val();socket.emit('username',$("#myname").val());$("div").remove("#bgin4");$("#mysend").focus();}});socket.on('login',function(oo){$('#bgin1-1').append("<p>Systen:"+shijian()+"</br>"+oo.data+" 加入聊天</p>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");});//图片控制var filedata=null;$("#sendImage").change(function(){var fs = $("#sendImage").val();varfileType1 = fs.indexOf(".");var fileType = fs.substr(fileType1,fs.length+1);console.log(fileType);if(fileType==".jpg"||fileType==".png"||fileType==".gif"||fileType==".jpeg"){var fs1 = $("#sendImage")[0].files[0];var reader = new FileReader();reader.onload = function(){var filedata = reader.result;                    socket.emit('img', {filedata,yonghu,color});                };reader.readAsDataURL(fs1);}else{alert("请选择图片！");}});//字体颜色控制$("#mysend").focus(function(){color=$("#colorStyle").val();});//发送按钮控制$("#send").click(function(){var dio= $("#mysend").val();if(dio!=""){socket.emit("dio",{yonghu,dio,color});$("#mysend").val("");}});socket.on('dioo',function(oo){if(oo.data.yonghu!=yonghu){$('#bgin1-1').append("<div style='width:100%;color:"+oo.data.color+"'>"+shijian()+"</br>"+oo.data.yonghu+":"+oo.data.dio+"</div>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");}else{$('#bgin1-1').append("<div style='width:100%;text-align:right;color:"+oo.data.color+"'>"+shijian()+"</br>"+oo.data.dio+"</div>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");}});socket.on('emjioSrc1',function(oo){if(oo.data.yonghu!=yonghu){$('#bgin1-1').append("<div style='width:100%;'>"+shijian()+"</br>"+oo.data.yonghu+":<img src='"+oo.data.emjioSrc+"'/></div>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");}else{$('#bgin1-1').append("<div style='width:100%;text-align:right;color:"+oo.data.color+"'>"+shijian()+"</br>"+"<img src='"+oo.data.emjioSrc+"'/></div>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");}});socket.on("img1",function(oo){if(oo.data.yonghu!=yonghu){$('#bgin1-1').append("<div style='width:100%;'>"+shijian()+"</br>"+oo.data.yonghu+":<img style='width:200px;' src='"+data.filedata+"'/></div>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");}else{$('#bgin1-1').append("<div style='width:100%;text-align:right;color:"+oo.data.color+"'>"+shijian()+"</br>"+"<img style='width:200px;' src='"+oo.data.filedata+"'/></div>");if($("#is")){$("#is").remove();};$('#bgin1-1').append("<div id='is' style='position:absolute; top:0; right:0;'>当前在线人数:"+oo.renshu+"</div>");}});

3服务器代码sever.js

#!/usr/bin/env node/** * Module dependencies. */var app = require('../app');var debug = require('debug')('chatmaster1:server');var http = require('http');var user=new Array;/** * Normalize a port into a number, string, or false. */function normalizePort(val) {  var port = parseInt(val, 10);  if (isNaN(port)) {    // named pipe    return val;  }  if (port >= 0) {    // port number    return port;  }  return false;}/** * Event listener for HTTP server "error" event. */function onError(error) {  if (error.syscall !== 'listen') {    throw error;  }  var bind = typeof port === 'string'    ? 'Pipe ' + port    : 'Port ' + port;  // handle specific listen errors with friendly messages  switch (error.code) {    case 'EACCES':      console.error(bind + ' requires elevated privileges');      process.exit(1);      break;    case 'EADDRINUSE':      console.error(bind + ' is already in use');      process.exit(1);      break;    default:      throw error;  }}/** * Get port from environment and store in Express. */var port = normalizePort(process.env.PORT || '3000');app.set('port', port);app.get('/',function(req,res){res.sendfile(__dirname+'/public/index.html')});/** * Create HTTP server. */var server = http.createServer(app);/** * Listen on provided port, on all network interfaces. */server.listen(port);server.on('error', onError);server.on('listening', onListening);/** * Event listener for HTTP server "listening" event. */function onListening() {  var addr = server.address();  var bind = typeof addr === 'string'    ? 'pipe ' + addr    : 'port ' + addr.port;  debug('Listening on ' + bind);}var io = require('socket.io').listen(server);io.sockets.on('connection', function(socket) {var renshu = io.eio.clientsCount;    socket.on('username',function(data){if(user.indexOf(data)==-1){user.push(data);io.sockets.emit('login',{data,renshu});};});socket.on('dio',function(data){io.sockets.emit('dioo',{data,renshu});});socket.on('emjioSrc',function(data){io.sockets.emit('emjioSrc1',{data,renshu});})socket.on("img",function(data){io.sockets.emit("img1",{data,renshu});})});

初学node.js代码写的比较乱轻喷吐舌头

源代码下载：项目代码下载链接

阅读全文

0 0