这不是一个项目而是一个适合刚開始学习的人学习的样例。主要实现了下面基本功能:

1:群聊。每个人都能够收到其它人的消息,以及能够发消息给其它人,每个人用ip地址标识。

2:显示当前在线用户。

3:每个用户登入登出。其它人都能够看到。

4:每个用户能够看到其它人是否正在输入消息。

实现方式没有选择低效的轮询方式,而是採用基于websocket协议的socket.io模块,websocket协议同意在client与服务端之间建立一个全双工的通信通道。因此服务端能够主动推消息给client。相比传统的轮询,实时性更好。

前端代码例如以下:

<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #fc5bff; padding: 2px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(217, 222, 221); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<ul><li id='typingshow'></li></ul>
<div id='joinshow'></div>
<div id='leftshow'></div>
<div id='onlineshow'></div>
<form action=""> <input id="m" autocomplete="off" /><button id='btn'>Send</button>
</form>
<script src="jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var typingIps={};
var typing=false;
var lastTypingTime;
function updateTyping() {
if (!typing) {
typing = true;
socket.emit('typing');
}
lastTypingTime = (new Date()).getTime(); setTimeout(function () {
var typingTimer = (new Date()).getTime();
var timeDiff = typingTimer - lastTypingTime;
if (timeDiff >= 400 && typing) {
socket.emit('stop typing');
typing = false;
}
}, 400);
}
$('form').submit(function(){
socket.emit('chat message',$('#m').val());
socket.emit('stop typing');
typing = false;
$('#m').val('');
return false;
});
$('#m').keyup(function(){
updateTyping();
});
socket.on('online num',function(msg){
$('#onlineshow').text('当前在线'+msg+'人');
}); socket.on('join', function (msg) {
$('#joinshow').text(msg.ip+'增加');
});
socket.on('typing',function(msg){
typingIps[msg.ip]=msg.ip;
var typingArr=[];
for(var ip in typingIps){
typingArr.push(typingIps[ip]);
}
$('#typingshow').text(typingArr.join(',') + '正在输入...');
});
socket.on('stop typing',function(msg){
delete typingIps[msg.ip];
var typingArr=[];
for(var ip in typingIps){
typingArr.push(typingIps[ip]);
}
if(typingArr.length===0){
$('#typingshow').text('');
}else{
$('#typingshow').text(typingArr.join(',') + '正在输入...');
}
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg.ip+'说:'+msg.content));
});
socket.on('user left', function(msg){
$('#leftshow').text(msg.ip+'离开了');
$('#onlineshow').text('当前在线'+msg.onlineNum+'人');
});
</script>
</body>
</html>

服务端代码:

/**
* Created by luzhen on 14-11-10.
*/
var express = require('express');
var app=express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var ips={};
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
var onlineNum=0;
io.on('connection', function (socket) {
console.log(socket.request.connection.remoteAddress);
ips[socket.request.connection.remoteAddress]=socket.request.connection.remoteAddress;//clientip
//socket.handshake.address 服务端ip
onlineNum++;
socket.broadcast.emit('join', {'ip':socket.request.connection.remoteAddress});//广播新用户增加 io.emit('online num',onlineNum);//广播当前在线人数 socket.on('chat message', function (msg) {
io.emit('chat message', {ip:socket.request.connection.remoteAddress,'content':msg});
console.log('message: ' + msg);
}); socket.on('typing', function (msg) {
socket.broadcast.emit('typing', {'ip':socket.request.connection.remoteAddress});
});
socket.on('stop typing', function (msg) {
socket.broadcast.emit('stop typing', {'ip':socket.request.connection.remoteAddress});
}); socket.on('disconnect',function(){
delete ips[socket.request.connection.remoteAddress];
onlineNum--;
socket.broadcast.emit('user left', {'ip':socket.request.connection.remoteAddress,'onlineNum':onlineNum});
});
}); http.listen(3000, function () {
console.log('listening on *:3000');
});

新增了防止刷屏功能,完整代码开源在GitHub上。

Demo演示 查看效果

nodejs实如今线群聊的更多相关文章

  1. 怎样实如今Windows下编写的代码,直接在Linux下编译

    方法一: 怎样实如今Windows7下编写Linux程序.写完程序以后.不用复制文件,直接在Linux(RHEL6.5)机器上编译最新的代码. 1.首先将Windows的代码目录设置为共享目录: 2. ...

  2. socket.io实现在线群聊

    我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始 先安装socket.io: npm install socket.io 利用Node的搭 ...

  3. @font-face(css3属性)实如今网页中嵌入随意字体

    @font-face语法规则 @font-face { font-family: <YourWebFontName>; src: <source> [<format> ...

  4. WebView调用有道词典实如今线查词

        WebView(网络视图)能载入显示网页,能够将其视为一个浏览器.它使用了WebKit渲染引擎载入显示网页,用法非常easy,直接在XML文件里写入webview控件就可以,主要代码例如以下: ...

  5. Android使用有道翻译API实如今线翻译功能

    在Android应用中,加入在线翻译的功能,这里调用的是有道翻译的API. 使用有道翻译API.首先要申请一个key,申请地址为:path=data-mode">有道翻译API申请地址 ...

  6. NodeJS系列~第四个小例子,NodeJs处理Get请求和Post请求

    返回目录 说在前 对于HTTP请求来说,我们通常使用的是Get和Post,除此之外还有put,delete等,而对于get来说,比较lightweight,只是对字符串的传输,它会被添加到URL地址里 ...

  7. nodejs具体解释

    文件夹 javascript与node.js     javascript与你     因为javascript真正意义上有两种,甚至能够说是三种形态(从最早的作为DHTML进行增强的小工具,到像jQ ...

  8. 开源server软件

    Java缓存server jmemcached http://www.oschina.net/p/jmemcached jmemcached 是一个Java版的 memcached 缓存server, ...

  9. Android面试题收集(有具体答案)

    Android面试题目及其答案 1.Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念 DVM指dalivk的虚拟机.每个Android应用程序都在它自己的进程中执行,都 ...

随机推荐

  1. PE笔记之NT头PE文件头

    typedef struct _IMAGE_FILE_HEADER {       WORD    Machine;                         //014C-IMAGE_FILE ...

  2. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---45

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  3. 学习总结——Postman做http接口功能测试

    Postman做各种类型的http接口测试 首先,做接口测试前要有明确的接口文档(e.g. http://test.nnzhp.cn/wiki/index.php?doc-view-59) ,假设已经 ...

  4. iptables之centos6版本详解

    1 Linux防火墙概述 Linux防火墙实际指的是Linux下的Netfilter/Iptables.Netfilter/Iptables是2.4.x/2.6.x版本Linux内核集成的IP信息包过 ...

  5. LeetCode OJ--Anagrams **

    https://oj.leetcode.com/problems/anagrams/ 在一个vector<string>中,找到所有经过顺序变换,可以变成一样的 string. 首先,对每 ...

  6. AC日记——黑魔法师之门 codevs 1995

    1995 黑魔法师之门  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 经过了16个工作日的紧张 ...

  7. python第三方库安装-多种方式

    第一种方式:安装whl文件 pip install whatever.whl   第二种方式:安装tar.gz文件 一般是先解压,然后进入目录之后,有setup.py文件 通过命令 python se ...

  8. 实现一个Java五子棋

    五子棋手把手教你写: 写在前面的话: 回想起从前初学代码的五子棋简直写的不像样子.今天闲来无事就写了个五子棋的小程序. 一来呢回忆一下很久以前写代码时的感觉. 二来呢顺便帮下诸位有需求的学生,顺利的C ...

  9. Android Touch事件传递机制详解 上

    最近总是遇到关于Android Touch事件的问题,如:滑动冲突的问题,以前也花时间学习过Android Touch事件的传递机制,可以每次用起来的时候总是忘记了,索性自己总结一下写篇文章避免以后忘 ...

  10. Mac搭建python环境

    1 安装xcode 2 安装 brew ruby-e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...