1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 基于node.js的聊天室

基于node.js的聊天室

时间:2019-05-08 17:19:04

相关推荐

基于node.js的聊天室

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 pipereturn val;}if (port >= 0) {// port numberreturn 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 messagesswitch (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代码写的比较乱轻喷源代码下载:项目代码下载链接

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。