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();var   fileType1 = 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代码写的比较乱轻喷源代码下载：项目代码下载链接

基于node.js的在线聊天室相关推荐

  1. 《基于Node.js实现简易聊天室系列之详细设计》

    一个完整的项目基本分为三个部分:前端.后台和数据库.依照软件工程的理论知识,应该依次按照以下几个步骤:需求分析.概要设计.详细设计.编码.测试等.由于缺乏相关知识的储备,导致这个Demo系列的文章层次 ...

  2. 《基于Node.js实现简易聊天室系列之项目前期工作》

    前期工作主要包括:项目的创建,web服务器的创建和数据库的连接. 项目创建 网上关于Node.js项目的创建的教程有很多,这里不必赘述.Demo所使用的Node.js的框架是express,版本为4. ...

  3. vue.js+node.js+mysql在线聊天室源码

  4. 可以发送图片文件的php聊天室,基于 Swoole 开发实时在线聊天室（十四）：发送图片消息...

    基于 Swoole 开发实时在线聊天室(十四):发送图片消息 由 学院君 创建于1年前, 最后更新于 1年前 版本号 #1 2055 views 0 likes 0 collects 上篇教程我们演示 ...

  5. 基于C#实现的在线聊天室的桌面系统软件

    资源下载地址:https://download.csdn.net/download/sheziqiong/86863237 资源下载地址:https://download.csdn.net/downl ...

  6. node + express + sockio 在线聊天室

    整个代码结构很明了, 一个启动server.js,一个socket.js, 剩下的就是页面的js,和css. 服务端代码很简单,大概几十行. /**************************** ...

  7. 局域网socket ip_基于局域网的小型在线聊天室（C++）

    linux:linux下C++ socket网络编程--即时通信系统(含源码)​zhuanlan.zhihu.com knowledge2018:vmware 虚拟机三种网络模式-"桥接.N ...

  8. 简单的一个在线聊天室

    闲着无聊写一个基于数据库写一个在线聊天室 前几天闲着没事突然想起写个小程序玩玩,就想到了写个在闲聊天室,话不多说直接开始. 1.第一当然是先写一个聊天界面啦,我写的界面是这样: 聊天页面 2.写这个程 ...

  9. Python在线聊天室

    基于Django&Websocket实现在线聊天室 痛点 痛点解决方案 轮询 长轮询 Websocket Django配置Websocket 前端连接Websockt 痛点 服务端(后端)需要 ...

  10. SpringBoot搭建在线聊天室

    Echat-SpringBoot 一款轻量级的基于SpringBoot + WebSocket的在线聊天室项目,在MccreeFei的聊天室基础上,将其升级为SpringBoot版本,去掉了JSP文件 ...

最新文章

  1. 不重复,distinct
  2. Java 虚拟机导论：什么是 Java虚拟机
  3. 判断两条链表是否交叉，若有交叉，返回交叉节点的指针。
  4. python模拟session_python使用requests.session模拟登录
  5. jQuery学习教程 基础篇 归档
  6. java 15道经典,15道非常经典的Java面试题
  7. 计算机桌面图标乱码,为什么我电脑图标显示乱码 - 卡饭网
  8. Visio 2019图文安装教程
  9. 【C语言】数组（详细讲解+源码展示）
  10. oracle中查看实例,oracle查看数据库实例,查看数据库实例名
  11. ios越狱c语言编译器,iOS12越狱
  12. hbase regionserver挂掉报错has too many store files delaying flush up to 90000ms
  13. ddl是什么意思(ddl是什么意思(网络语ddl是什么梗))
  14. iOS 开发者必知的 75 个工具（译文）
  15. product相关函数（excel）
  16. Linux内核内存管理（2）：固定映射地址(fixmap)和输入输出重映射(ioremap)
  17. 华为立 Flag：一年超越三星做全球智能手机老大！
  18. Arduino DRV8825驱动两相步进电机
  19. 2.石头游戏（坑爹）
  20. python做动态折线图_python matplotlib折线图样式实现过程

热门文章

  1. 注册苹果开发者账号遇到问题汇总
  2. 阿里金融云操作教程Plus
  3. C语言：判断对错（简化版）
  4. 一招教你如何改变图片的大小？只需三步简单实用
  5. 双系统启动菜单删除无效Win启动菜单项
  6. librosa 音频处理库
  7. Uncode-Schedule首页、文档和下载 - 分布式任务调度组件 - 开源中国社区
  8. linux 文件修复工具,五款救急的Linux文件恢复软件
  9. 软件开发的质量及效率
  10. 文件或内容损坏无法读取 导致无法删除