我的学习笔记之node----node.js+socket.io实时聊天(2)
废话不多说,直接贴代码吧。注释很详细了。
服务端代码:
/**
* Created by LZX on 2015/10/7.
*/
(function () {
var d = document,
w = window,
p = parseInt,
dd = d.documentElement,
db = d.body,
dc = d.compatMode == 'CSS1Compat',
dx = dc ? dd: db,
ec = encodeURIComponent; window.CHAT = {
msgObj:document.getElementById("message"),
screenheight:window.innerHeight ? window.innerHeight : dx.clientHeight,
username:null,
userid:null,
socket:null,
//让浏览器滚动条保持在最低部
scrollToBottom:function(){
window.scrollTo(0, this.msgObj.clientHeight);
},
//退出,本例只是一个简单的刷新
logout:function(){
location.reload();
},
//提交聊天消息内容
submit:function(){
var content = document.getElementById("content").value;
if(content != ''){
var obj = {
userid: this.userid,
username: this.username,
content: content
};
this.socket.emit('message', obj);
document.getElementById("content").value = '';
}
return false;
},
genUid:function(){
return new Date().getTime()+""+Math.floor(Math.random()*899+100);
},
//更新系统消息,本例中在用户加入、退出的时候调用
updateSysMsg:function(o, action){
//当前在线用户列表
var onlineUsers = o.onlineUsers;
//当前在线人数
var onlineCount = o.onlineCount;
//新加入用户的信息
var user = o.user; //更新在线人数
var userhtml = '';
var separator = '';
for(key in onlineUsers) {
if(onlineUsers.hasOwnProperty(key)){
userhtml += separator+onlineUsers[key];
separator = '、';
}
}
document.getElementById("onlinecount").innerHTML = '当前共有 '+onlineCount+' 人在线,在线列表:'+userhtml; //添加系统消息
var html = '';
html += '<div class="msg-system">';
html += user.username;
html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
html += '</div>';
var section = document.createElement('section');
section.className = 'system J-mjrlinkWrap J-cutMsg';
section.innerHTML = html;
this.msgObj.appendChild(section);
this.scrollToBottom();
},
//第一个界面用户提交用户名
usernameSubmit:function(){
var username = document.getElementById("username").value;
if(username != ""){
d.getElementById("username").value = '';
d.getElementById("loginbox").style.display = 'none'; //隐藏掉名字输入框
d.getElementById("chatbox").style.display = 'block';//显示出聊天界面
this.init(username); //调用init方法
}
return false;
},
init:function(username){
/*
客户端根据时间和随机数生成uid,这样使得聊天室用户名称可以重复。
*/
this.userid = this.genUid();
//this.userid=username;
this.username = username; document.getElementById("showusername").innerHTML = this.username;
this.msgObj.style.minHeight = (this.screenheight - document.body.clientHeight + this.msgObj.clientHeight) + "px";
this.scrollToBottom(); //连接websocket后端服务器
this.socket = io.connect('ws://localhost:3000'); //告诉服务器端有用户登录
this.socket.emit('login', {userid:this.userid, username:this.username}); //监听新用户登录
this.socket.on('login', function(o){
CHAT.updateSysMsg(o, 'login');
}); //监听用户退出
this.socket.on('logout', function(o){
CHAT.updateSysMsg(o, 'logout');
}); //监听消息发送
this.socket.on('message', function(obj){
var isme = (obj.userid == CHAT.userid) ? true : false;
var contentDiv = '<div>'+obj.content+'</div>';
var usernameDiv = '<span>'+obj.username+'</span>'; var section = document.createElement('section');
if(isme){
section.className = 'user';
section.innerHTML = contentDiv + usernameDiv;
} else {
section.className = 'service';
section.innerHTML = usernameDiv + contentDiv;
}
CHAT.msgObj.appendChild(section);
CHAT.scrollToBottom();
}); }
};
//通过“回车”提交用户名
document.getElementById("username").onkeydown = function(e) {
e = e || event;
if (e.keyCode === 13) {
CHAT.usernameSubmit();
}
};
//通过“回车”提交信息
document.getElementById("content").onkeydown = function(e) {
e = e || event;
if (e.keyCode === 13) {
CHAT.submit();
}
};
})();
界面html代码这里就不放出来了。
客户端主要代码:
/**
* Created by LZX on 2015/10/7.
*/
(function () {
var d = document,
w = window,
p = parseInt,
dd = d.documentElement,
db = d.body,
dc = d.compatMode == 'CSS1Compat',
dx = dc ? dd: db,
ec = encodeURIComponent; window.CHAT = {
msgObj:document.getElementById("message"),
screenheight:window.innerHeight ? window.innerHeight : dx.clientHeight,
username:null,
userid:null,
socket:null,
//让浏览器滚动条保持在最低部
scrollToBottom:function(){
window.scrollTo(0, this.msgObj.clientHeight);
},
//退出,本例只是一个简单的刷新
logout:function(){
location.reload();
},
//提交聊天消息内容
submit:function(){
var content = document.getElementById("content").value;
if(content != ''){
var obj = {
userid: this.userid,
username: this.username,
content: content
};
this.socket.emit('message', obj);
document.getElementById("content").value = '';
}
return false;
},
genUid:function(){
return new Date().getTime()+""+Math.floor(Math.random()*899+100);
},
//更新系统消息,本例中在用户加入、退出的时候调用
updateSysMsg:function(o, action){
//当前在线用户列表
var onlineUsers = o.onlineUsers;
//当前在线人数
var onlineCount = o.onlineCount;
//新加入用户的信息
var user = o.user; //更新在线人数
var userhtml = '';
var separator = '';
for(key in onlineUsers) {
if(onlineUsers.hasOwnProperty(key)){
userhtml += separator+onlineUsers[key];
separator = '、';
}
}
document.getElementById("onlinecount").innerHTML = '当前共有 '+onlineCount+' 人在线,在线列表:'+userhtml; //添加系统消息
var html = '';
html += '<div class="msg-system">';
html += user.username;
html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
html += '</div>';
var section = document.createElement('section');
section.className = 'system J-mjrlinkWrap J-cutMsg';
section.innerHTML = html;
this.msgObj.appendChild(section);
this.scrollToBottom();
},
//第一个界面用户提交用户名
usernameSubmit:function(){
var username = document.getElementById("username").value;
if(username != ""){
d.getElementById("username").value = '';
d.getElementById("loginbox").style.display = 'none'; //隐藏掉名字输入框
d.getElementById("chatbox").style.display = 'block';//显示出聊天界面
this.init(username); //调用init方法
}
return false;
},
init:function(username){
/*
客户端根据时间和随机数生成uid,这样使得聊天室用户名称可以重复。
*/
this.userid = this.genUid();
//this.userid=username;
this.username = username; document.getElementById("showusername").innerHTML = this.username;
this.msgObj.style.minHeight = (this.screenheight - document.body.clientHeight + this.msgObj.clientHeight) + "px";
this.scrollToBottom(); //连接websocket后端服务器
this.socket = io.connect('ws://localhost:3000'); //告诉服务器端有用户登录
this.socket.emit('login', {userid:this.userid, username:this.username}); //监听新用户登录
this.socket.on('login', function(o){
CHAT.updateSysMsg(o, 'login');
}); //监听用户退出
this.socket.on('logout', function(o){
CHAT.updateSysMsg(o, 'logout');
}); //监听消息发送
this.socket.on('message', function(obj){
var isme = (obj.userid == CHAT.userid) ? true : false;
var contentDiv = '<div>'+obj.content+'</div>';
var usernameDiv = '<span>'+obj.username+'</span>'; var section = document.createElement('section');
if(isme){
section.className = 'user';
section.innerHTML = contentDiv + usernameDiv;
} else {
section.className = 'service';
section.innerHTML = usernameDiv + contentDiv;
}
CHAT.msgObj.appendChild(section);
CHAT.scrollToBottom();
}); }
};
//通过“回车”提交用户名
document.getElementById("username").onkeydown = function(e) {
e = e || event;
if (e.keyCode === 13) {
CHAT.usernameSubmit();
}
};
//通过“回车”提交信息
document.getElementById("content").onkeydown = function(e) {
e = e || event;
if (e.keyCode === 13) {
CHAT.submit();
}
};
})();
最近贴两张运行效果图,毕竟没图没真相:
先运行起来,服务端会提示监听3000端口
打开http://www.localhost:3000/
输入名字进入聊天界面
再打开一个http://www.localhost:3000/模拟多个客户端
开始聊天,小a、小b界面分别
同时服务端也会有相应的提示消息
最后感谢http://www.plhwin.com/2014/05/28/nodejs-socketio/,这个项目也是看着前辈的搭出来的(抄袭仅仅是为了更快的消化,上手),能消化很不错了。不过有时间我会改进的,发送图片,表情,文件等功能后续都会完善。
此系列会一直更新。
我的学习笔记之node----node.js+socket.io实时聊天(2)的更多相关文章
- 我的学习笔记之node----node.js+socket.io实时聊天(1) (谨此纪念博客开篇)
本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...
- 我的学习笔记之node----node.js+socket.io实时聊天(1)
本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...
- node.js + socket.io实现聊天室一
前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...
- 转载:node.js socket.io
本文转自:http://www.xiaocai.name/post/cf1f9_7b6507 学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- (转)使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】
原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...
- 基于node.js+socket.io+html5实现的斗地主游戏(1)概述
一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...
- 用node.js(socket.io)实现数据实时推送
在做商品拍卖的时候,要求在商品的拍卖页面需要实时的更新当前商品的最高价格.实现的方式有很多,比如: 1.setInterval每隔n秒去异步拉取数据(缺点:更新不够实时) 2. AJAX轮询方式方式推 ...
随机推荐
- java 钱币的单位转换
将钱转成转换为带指定单位的钱 int money = 10; NumberFormat nf = NumberFormat.getCurrencyInstance(Locale.US); System ...
- HTML5 WebAudioAPI简介(一)
一.常用对象 1.AudioContext对象 AudioContext是一个专门用于音频处理的接口,并且原理是讲AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经 ...
- 封装JDBC:实现简单ORM框架lfdb
作者:Vinkn 来自http://www.cnblogs.com/Vinkn/ 一.简介 框架就是一组可重用的构件,LZ自己写的姑且就叫微型小框架:lfdb.LZ也对其他的ORM框架没有什么了解,现 ...
- Bootstrap_表单_表单控件
一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...
- Joomla插件汉化小程序
这两天在搞joomla插件,在看peter的视频,在此谢过他了.看到它汉化插件那个视频.反正闲着无聊,就写了一个Java小程序,方便使用joomla的人汉化插件.这个程序的方法很简单,你只要先运行ou ...
- 关于DEDECMS自定义模型当中添加自定义字段后在后台添加内容后不显示解决方案
用DEDECMS的时间也不长,最近在做一个站时,就遇到了这个问题(自定义字段在后台不显示内容)中添加自定义字段后在后台编辑打开后发现我之前添加的内容不显示,如果是只是看看不单击确定的话,那么在前台数据 ...
- [R]django的HTTPREQUEST对象
django的HTTPREQUEST对象 via Django使用request和response对象 当请求一张页面时,Django把请求的metadata数据包装成一个HttpRequest对象, ...
- Python Tutorial 学习(八)--Errors and Exceptions
Python Tutorial 学习(八)--Errors and Exceptions恢复 Errors and Exceptions 错误与异常 此前,我们还没有开始着眼于错误信息.不过如果你是一 ...
- Win10的革新与突破
7月29号win10全球发布,作为微软最后一款操作系统,它会有那些令人期待的革新,作为一个互联网后现代时代,这款操作系统又会融入什么特别元素? 抱着期待,更新了win10后,我花了大概一天的时间,亲身 ...
- iOS中MVC等设计模式详解
iOS中MVC等设计模式详解 在iOS编程,利用设计模式可以大大提高你的开发效率,虽然在编写代码之初你需要花费较大时间把各种业务逻辑封装起来.(事实证明这是值得的!) 模型-视图-控制器(MVC)设计 ...