nodejs实如今线群聊

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

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演示 查看效果

时间: 07-14

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

nodejs实现在线群聊

这不是一个项目而是一个适合初学者学习的例子,主要实现了以下基本功能: 1:群聊,每一个人都可以收到其他人的消息,以及可以发消息给其他人,每一个人用ip地址标识. 2:显示当前在线用户. 3:每一个用户登入登出,其他人都可以看到. 4:每一个用户可以看到其他人是否正在输入消息. 实现方式没有选择低效的轮询方式,而是采用基于websocket协议的socket.io模块,websocket协议允许在客户端与服务端之间建立一个全双工的通信通道,因此服务端可以主动推消息给客户端.相比传统的轮询,实时性更

11月第3周业务风控关注 | 下月起互联网平台上线群聊、直播等功能前需安全评估

易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 本周内容安全事件比较集中,故以内容安全特刊形式展现给大家. 1.下月起互联网平台上线群聊.直播等功能前需安全评估 今后,互联网平台新增论坛.微博.公众账号.短视频.直播等功能前需进行安全评估.国家互联网信息办公室今日(11月15日)在官网公布<具有舆论属性或社会动员能力的互联网信息服务安全评估规定>,提出互联网信息服务提供者在上

socket.io实现在线群聊

我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始 先安装socket.io: 1 npm install socket.io 利用Node的搭建Http服务 分为两个文件,服务端文件app.js和客户端index.html app.js 01 var app = require('http').createServer(handler)02 , io = require('socket.io').listen(app)03 , fs

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

在Android应用中,加入在线翻译的功能,这里调用的是有道翻译的API. 使用有道翻译API.首先要申请一个key,申请地址为:有道翻译API申请地址. 申请之后就会得到一个keyfrom和一个key. 获取翻译结果的数据接口为:http://fanyi.youdao.com/openapi.do? keyfrom=<keyfrom>&key=<key>&type=data&doctype=<doctype>&version=1.1&a

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

    WebView(网络视图)能载入显示网页,能够将其视为一个浏览器.它使用了WebKit渲染引擎载入显示网页,用法非常easy,直接在XML文件里写入webview控件就可以,主要代码例如以下: <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_heigh

开源server软件

Java缓存server jmemcached http://www.oschina.net/p/jmemcached jmemcached 是一个Java版的 memcached 缓存server,基本上跟 memcached 是兼容的.jmemcached 是使用 Apache MINA 作为无阻塞的网络IO操作,但之后使用Netty作为网络异步实现机制. Webserver TornadoTornado web server 是使用Python编写出來的一个极轻量级.高可伸缩性和非堵塞IO

ym——android源代码大放送(实战开发必备)

转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 目录 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载很多其它源代码.url │  文件夹列表.txt │ ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMobil

webrtcclient与TURN和信令server通讯流程图

WebRTC是HTML5支持的重要特性之中的一个.有了它,不再须要借助音视频相关的client.直接通过浏览器的Web页面就能够实现音视频对聊功能.并且WebRTC项目是开源的.我们能够借助WebRTC源代码高速构建自己的音视频对聊功能.不管是使用前端JS的WebRTC API接口,还是在WebRTC源代码上构建自己的对聊框架.都须要遵循下面运行流程: 上述序列中,WebRTC并不提供Stunserver和Signalserver.server端须要自己实现.Stunserver可以用googl

(linux运维学习总结)IT事业者必须清醒意识到计算机系统在宇宙人生中的本质作用和意义

IT事业者,是从事IT相关事业的人员,比如计算机学院的老师和学生,计算机企业和网络企业的老板员工,通信公司企业的各种人员,等等.由于IT技术已经深入到各行各业各领域,所以: 不光是IT事业者,就是所有正常的人都应该了解认识计算机系统在宇宙人生中的准确作用和意义. 尤其是伴随着第四次工业革命的到来,计算机系统普及越来越全面广泛深入,更要认识到人们发明和使用计算机系统的初心是什么.只有这样做以后,才不会在IT事业的学习和工作当中迷茫无知. 粗略举例来说,现代计算机系统包括: 科研院所国防超算等部门的