1 client:    socket.io

server:   node.js +  express  + socket.io

一个简单的聊天室  demo,没有注册,内置了一些测试用户

2 client 关键代码

var socket = io.connect('http://localhost:8080');
socket.on('connect',function(){
console.log('connected to server');
socket.on('login success',function(data){
console.log('login success');
username = data.username; refreshOnlineUsers(data.allusers);
}); socket.on('disconnect',function(){
console.log('disconnect');
username = null;
}); socket.on('login failed',function(){
username = null;
}); socket.on('new message',function(data){
console.log('receiver message from '+data.fromUser +' '+data.date+ ' '+data.msg);
}); socket.on('update myself',function(data){
}); socket.on('enter chat',function(data){
console.log(data.username+' has entered the chat');
refreshOnlineUsers(data.allusers);
}); socket.on('leave chat',function(data){
console.log(data.username + ' has leaved the chat');
refreshOnlineUsers(data.allusers);
});
});

3 server 关键代码

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server); app.use('/', express.static(__dirname + '/www')); var users = {
fanglin:{
socket:null,
online:false
},
xingtianyu:{
socket:null,
online:false
}
}; io.on('connection', function(socket){
socket.on('new message',function(data){
var i,user; socket.emit('update myself',{fromUser:data.fromUser,msg:data.msg,date:new Date()}); if(data.broadcast===true){
socket.broadcast.emit('new message',{fromUser:data.fromUser,msg:data.msg,date:new Date()});
}else{
for(i=0;i<data.tousers.length;i++){
user = users[data.tousers[i]];
if(user.online==true && user.socket!=null){
user.socket.emit('new message',{fromUser:data.fromUser,msg:data.msg,date:new Date()});
}
}
}
}); socket.on('login',function(data){
if(data.username in users){
users[data.username].online = true;
users[data.username].socket = socket;
socket.emit('login success',{username:data.username,allusers:getOnlineUsers()});
socket.broadcast.emit('enter chat',{username:data.username,allusers:getOnlineUsers()});
}else{
socket.emit('login failed');
}
}); socket.on('disconnect',function(){
var user;
for (user in users){
if(users[user].socket == socket){
users[user].online = false;
socket.broadcast.emit('leave chat',{username:user,allusers:getOnlineUsers()});
return;
}
}
});
}); server.listen(8080);
console.log('server is listenering on port 8080');

4 实现了一个简单的有限状态机

(1) 客户端启动时去连接服务器,连接成功触发服务端的 connection 事件

(2) 连接成功后客户端可登陆,触发服务端的 login 事件,服务端查找用户,若登陆成功服务端向客户端发送 login success 的消息,并返回所有在线用户,同时向其他在线用户发送 enter chat 广播,登陆失败则向客户端发送 login failed 消息。

(3) 客户端登陆成功后可向其他在线用户发送消息,客户端向服务端发送 new message 消息,服务端收到  new message  消息后,先向客户端发送  update myself 消息,客户端如果勾选了 Select All, 服务端会接着发送 new message 广播,否则遍历所有接收者,依次向这些接收者发送 new message 消息。

(4) 客户端断开连接后触发服务端 disconnect 事件,服务端发送 leave chat 广播。

(5) 客户端在收到 new message  update myself 时会更新聊天室里的聊天内容。收到 login success 、 enter chat  、leave chat 时会更新当前在线用户。收到 login success 、login failed 时更新在线状态 。。。

代码不多非常简单,大家一看就能明白.

代码地址: https://github.com/lesliebeijing/MyChatRoom.git

html5 websocket + node.js 实现网页聊天室的更多相关文章

  1. 《基于Node.js实现简易聊天室系列之总结》

    前前后后完成这个聊天室的Demo花了大概一个星期,当然一个星期是仅仅指编码的工作.前期的知识储备是从0到1从无到有,花费了一定的时间熟悉Node.js的基本语法以及Node.js和mongoDB之间的 ...

  2. HTML5 - websocket的应用 之 简易聊天室

    需要知识点: 前端知识 jq操作dom nodejs socket.io 关于websocket api的知识点,见上篇章<HTML5-Websocket>. 聊天室思路/原理: A和B聊 ...

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

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

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

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

  5. 《基于Node.js实现简易聊天室系列之引言》

    简述:这个聊天室是基于Node.js实现的,完成了基本的实时通信功能.在此之前,对node.js和mongodb一无所知,但是通过翻阅博客,自己动手基本达到了预期的效果.技术,不应该是闭门造车,而是学 ...

  6. 《基于Node.js实现简易聊天室系列之环境搭建》

    前文提到了Demo所涉及的技术,现在讲环境(工具)的配置.环境的配置主要是数据库mongDB和Node.js的配置. Node.js Node.js的官方地址:https://nodejs.org/e ...

  7. WebSocket 网页聊天室的实现(服务器端:.net + windows服务,前端:Html5)

    websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...

  8. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  9. JavaWeb网页聊天室(WebSocket即时通讯)

    原文:http://baike.xsoftlab.net/view/656.html Git地址 http://git.oschina.net/loopcc/WebSocketChat 概要: Web ...

随机推荐

  1. python中的三引号

    在python中,三引号支持字符串跨多行.包含换行符号.制表符号.以及其它特殊字符 >>> hi = ''' ... this ... is a ... test ... ''' & ...

  2. Python hypot() 函数

    描述 hypot() 返回欧几里德范数 sqrt(x*x + y*y). 语法 以下是 hypot() 方法的语法: import math math.hypot(x, y) 注意:hypot()是不 ...

  3. js 去掉前后空格

    前后去空格 return str.replace(/(^\s*)|(\s*$)/g, ""); 全部去空格 $("#panelbody").text().rep ...

  4. 《Effective Java》读书笔记一(创建与销毁对象)

    No1 考虑用静态工厂方法代替构造器 静态工厂方法优势: 它们有名称,阅读性增强,如:BigInteger.probablePrime: 不必每次调用它们的时候都创建一个新对象: 它们可以返回原返回类 ...

  5. 使用Frame控件设计Silverlight的导航

    这里所说的导航其实就是在Silverlight的页面之间前进后退以及跳转.通过Frame控件配合后台NavigationService类可以很容易的做到页面之间的导航. 这就是工具箱中的Frame控件 ...

  6. gitlab yum 源

    https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/

  7. ie浏览器不兼容css媒体查询的解决办法

    有些页面布局复杂,在不同分辨率下表现需要一致,这时需要用媒体查询根据不同分辨率进行百分比定位(不能用像素定位),如: @media screen and (max-width: 1600px) { . ...

  8. CCLayer设置anchorPoint无效的问题

      最近刚发现一个问题,anchorPoint这个属性虽然是属于CCNode的,但是CCLayer设置anchorPoint没有效果.CCLayer的anchorPoint被默认设定在(0, 0)位置 ...

  9. Ribbon重试机制与Hystrix熔断机制的配置问题1

    Ribbon超时与Hystrix超时问题,为了确保Ribbon重试的时候不被熔断,我们就需要让Hystrix的超时时间大于Ribbon的超时时间,否则Hystrix命令超时后,该命令直接熔断,重试机制 ...

  10. 工具WinSCP:windows和Linux中进行文件传输

    工具WinSCP:windows和Linux中进行文件传输 2016-09-21 [转自]使用WinSCP软件在windows和Linux中进行文件传输 当我们的开发机是Windows,服务器是Lin ...