nodejs即时聊天

一直想做一个即时聊天的应用,前几天看到了socket.io,感觉还不错。自己略加改动,感觉挺不错的。官网上给的样例非常easy,以下改进了一点,实现了历史消息的推送。

demo地址:chat.codeboy.me


当中server端代码:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var history = new Array();app.get('/', function(req, res){res.sendfile('chat.html');
});io.on('connection', function(socket){socket.on('chat message', function(msg){io.emit('chat message', msg);addMsg(msg);});socket.on('login message', function(msg){socket.join('history room');for(var i=0;i<history.length;i++){io.in('history room').emit('chat message', history[i]);}io.in('history room').emit('chat message', 'lyd__上面是近期的一些信息');socket.leave('history room');socket.join('chat room'); io.emit('chat message',msg);addMsg(msg);});
});http.listen(3000, function(){console.log('listening on *:3000');
});function addMsg(msg){history.push(msg);if(history.length>100)history.shift();
};


聊天页面代码:

<!doctype html>
<html><head><title>聊天室</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body { font: 20px Helvetica, Arial; }form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }form input { border: 0; padding: 10px; width: 90%;  }form button { width: 10%; background: rgb(130, 224, 255); border: none;  padding: 10px; }#messages { list-style-type: none; margin: 0; padding: 0; }#messages li { padding: 5px 10px 5px 10px; }</style></head><body><ul id="messages"></ul><form action=""><input id="m" autocomplete="off" /><button id="btn">登录</button></form><script src="/socket.io/socket.io.js"></script><script src="http://code.jquery.com/jquery-1.11.1.js"></script><script>var socket = io();var login  =true;var username = "" ; var myDate = new Date();$('form').submit(function(){if(login){username = $('#m').val();if(username.length==0){alert("请输入用户名");return false;}login = false ;socket.emit('login message', "lyd__<font color=blue>"+username + '</font>增加了聊天室   '+myDate.getMonth()+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds());$('#btn').html("发送");}else { socket.emit('chat message', username +"##"+ $('#m').val());}$('#m').val('');return false;});socket.on('chat message', function(msg){var item = msg.split("##",2);if(msg.indexOf('lyd__')==0)$('#messages').append('<li style="text-align:center; font-size:12px;margin-top:1px; color:red; background-color:#eee;">' +msg.substr(5)+'</li>');else if(msg.indexOf(username)==0){$('#messages').append('<li style="text-align:right; font-size:12px; color:red;">'+item[0]+':</li>');$('#messages').append('<li style="text-align:right;padding-top:0px; padding-left:30%;color:purple;">'+item[1]+'</li>');}else {$('#messages').append('<li style="text-align:left;font-size:12px; color:red;">'+item[0]+':</li>');$('#messages').append('<li style="text-align:left;padding-top:0px; padding-right:30%; color:purple;">'+item[1]+'</li>');}});</script></body>
</html>

这样就实现了一个聊天室,进入后输入username,登录,之后server返回近期的100条消息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289988.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NDVI最大值法MVC合成之ArcGIS Cell Statistics 实现

目的:利用ArcGIS自带工具Cell Statistics实现多个栅格图层最大值法合成NDVI年或月的最大值。 工具:ArcToolbox>>Spatial Analyst Tools>>Local>>Cell Statistics

Android之简单背景颜色渐变实现

1、问题 需要实现简单颜色渐变背景 2、xml文件实现 1)、bg.xml文件 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:startColor=&qu…

python爬虫企业级技术点_Python爬虫必备技术点(一)

爬虫必备技术面向具有Python基础的Python爬虫爱好者&#xff0c;urllib和requests两个库在实际的项目中应用也非常广泛&#xff0c;不仅用于爬虫技术也可以应用在API接口调用方面。如果需要相关的案例可以加我QQ(610039018)&#xff0c;另外我在B站上已发布了相关的爬虫视频(ht…

日记2015.11.5

access 连接 mysql 下载32位版本 mysql-connector-odbc-5.3.4-win32.msi注意access是32位版本未解决中文显示出现的编码问题 sublime text 2 安装出错 利用 event viewer 查看报错原因参考 https://www.sublimetext.com/forum/viewtopic.php?f3&p37798spark 运行出错 没编…

Citrix桌面及应用虚拟化系列之二:XenServer补丁

安装好XenServer之后&#xff0c;可以找一台管理机器&#xff08;目前主流系统都支持&#xff09;安装XenCenter&#xff0c;通过XenCenter来实现对XenServer的管理。安装XenCenter: 安装.NET Framework3.5 然后可以下载安装中文版的XenCenter&#xff0c;下载地址&#xff1…

OutLook2016修改注册表迁移.ost文件数据

Outlook2016默认只有一次设置存放OST文件路径的机会&#xff0c;是在第一创建帐号的向导上有个其他设置。如果关闭这个向导&#xff0c;在打开就不能修改路径了。按照这样思路&#xff0c;我们先关闭Outlook和Skype&#xff08;新版共用一个数据库文件&#xff09;&#xff0c;…

MODIS NDVI数据处理相关问题

现NDVI产品数据处理过程中遇到以下问题: 问题1: NDVI是归一化植被指数,它的取值范围是-1—1,如何理解? 方法 : 对于陆地表面覆盖来说,云、雨、雪在可见光比近红外波段有较高的反射作用,所以NDVI为负值;岩石、裸土的NDVI一般为0;有植被覆盖的地方一般大于0。

委托原来如此简单

什么是委托&#xff1f;委托是存有对某个方法的引用的一种引用类型变量。引用可在运行时被改变。委托特别用于实现事件和回调方法&#xff01;使用委托:public delegate void MyDelegateDemo();private void HelloWorld(){Console.WriteLine("Hello World");}public …

0920,结构体

结构体&#xff1a;用户自定义数据类型&#xff0c;实际是变量组&#xff0c;可以一次存多个不同变量 结构体定义在main函数的外面 string 结构体名 { // 元素一 // 元素二 } //定义一个结构体 //struct student//student就是我们自己造的新数据类型 //{ …

Android之解决键盘覆盖编辑框问题

1、问题 键盘覆盖编辑框问题 2、解决办法 在Activity里面的onCreate方法里面加下代码 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

平面坐标(方里网)转换为经纬度坐标

方法一: 在Arcmap中转换: 1、加载要转换的数据,右下角为经纬度

mysql表 c#实体类,创建基于MySQL表中的C#类

Is there anything built into .Net or visual studio that will allow my to create classes based off of a MySql table. I guess I am talking about persistence. I just want the class to be a 1 to 1 mapping of the table. Does anything free exist?解决方案maybe y…

你真的了解扩展方法吗?

定义微软对于扩展方法的定义是:扩展方法使你能够向现有类型“添加”方法&#xff0c;而无需创建新的派生类型、重新编译或以其他方式修改原始类型。扩展方法是一种静态方法&#xff0c;但可以像扩展类型上的实例方法一样进行调用。对于用 C#、F# 和 Visual Basic 编写的客户端代…

Android之自定义checkbox并解决内容和复选框之间的具体问题

1、问题 checkbox自定义并解决内容和复选框之间的具体问题 2、代码实现 1、select_checkbox.xml文件 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item…

http协议--笔记

HTTP协议的缺点&#xff1a;1.通信使用明文&#xff08;不加密&#xff09;&#xff0c;内容可能会被窃听2.不验证通信方的身份&#xff0c;因此有可能遭遇伪装3.无法证明报文的完整性&#xff0c;所以有可能已遭篡改 防止窃听保护信息的几种对策&#xff1a;加密技术通信的加密…

生态需水

所谓生态需水是指为了维持流域生态系统的良性循环&#xff0c;人们在开发流域水资源时必须为生态系统的发展与平衡保证其所需的水量。生态需水是与流域工业、农业、城市生活需水相并列的一个用水单元。生态需水概念的提出体现了一种新的流域环境管理的思维模式&#xff0c;它重…

sublime mysql插件_开发者最常用的8款Sublime text 3插件

Sublime Text作为一个尽为人知的代码编辑器&#xff0c;其优点不用赘述。界面整洁美观、文本功能强大&#xff0c;且运行速度极快&#xff0c;非常适合编写代码&#xff0c;写文章做笔记。Sublime Text还支持Mac、Windows和Linux各大平台&#xff0c;方便用户使用。种类繁多、功…

Android学习笔记(三)

ContentProvider简单介绍 ContentProvider是不同应用程序之间进行数据交换的标准API&#xff0c;当一个应用程序须要把自己的数据暴露给其它程序使用时。该应用程序便可通过提供ContentProvider来实现&#xff0c;其它应用程序就可通过ContentResolver来操作ContentProvider暴露…

[tp3.2.1]数据模型 - 简单的模型连接

新建数据库数据库连接功能1.写conf.php/* 数据库设置 */DB_TYPE > , // 数据库类型DB_HOST > , // 服务器地址DB_NAME > , // 数据库名DB_USER > , // 用户名DB_PWD …