zoukankan html css js c++ java

NodeJS实现简单聊天室

转载：https://cnodejs.org/topic/53787247cbcc396349fe3f5a

npm install express --save

npm install socket.io --save

chat.js

var express = require('express');
var io = require('socket.io');
var app = express();
app.use(express.static(__dirname));
var server = app.listen(8888);
var ws = io.listen(server);
ws.on('connection', function(client) {
    console.log('someone is connect.
');
    client.on('join', function(msg) {
        if (checkNickname(msg)) {
            client.emit('nickname', '昵称重复');
        } else {
            client.nickname = msg;
            ws.sockets.emit('announcement', '系统', msg + '加入了聊天室', {type: 'join', name: getAllNickname()});
        }
    });
    client.on('send.message', function(msg) {
        client.broadcast.emit('send.message', client.nickname, msg);
    });
    client.on('disconnect', function() {
        if (client.nickname) {
            client.broadcast.emit('send.message', '系统', client.nickname + '离开聊天室');
        }
    });
});
var checkNickname = function(name) {
    for (var k in ws.sockets.sockets) {
        if (ws.sockets.sockets.hasOwnProperty(k)) {
            if (ws.sockets.sockets[k] && ws.sockets.sockets[k].nickname == name) {
                return true;
            }
        }
    }
    return false;
}
var getAllNickname = function() {
    var result = [];
    for (var k in ws.sockets.sockets) {
        if (ws.sockets.sockets.hasOwnProperty(k)) {
            result.push({name: ws.sockets.sockets[k].nickname});
        }
    }
    return result;
}

chat.html

<!DOCTYPE html>
<html>
<head>
<title>socket.io聊天室例子</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div class="wrapper">
    <div class="content" id="chat">
        <ul id="chat_container">
        </ul>
    </div>
    <div class="action">
        <textarea></textarea>
        <button class="btn btn-success" id="clear">清屏</button>
        <button class="btn btn-success" id="send">发送</button>
    </div>
</div>
<script type="text/javascript" src="socket.io.js"></script>
<script type="text/javascript">
var ws = io.connect('http://127.0.0.1:8888');
var sendMsg = function(msg) {
    ws.emit('send.message', msg);
}
var addMessage = function(from, msg) {
    var li = document.createElement('li');
    li.innerHTML = '<span>' + from + '</span>' + ' : ' + msg;
    document.querySelector('#chat_container').appendChild(li);
    document.querySelector('#chat').scrollTop = document.querySelector('#chat').scrollHeight;
    document.querySelector('textarea').focus();
}
var send = function() {
    var ele_msg = document.querySelector('textarea');
    var msg = ele_msg.value.replace('
', '').trim();
    //console.log(msg);
    if (!msg) return;
    sendMsg(msg);
    addMessage('你', msg);
    ele_msg.value = '';
}
ws.on('connect', function() {
    var nickname = window.prompt('输入你的昵称');
    while (!nickname) {
        nickname = window.prompt('昵称不能为空');
    }
    ws.emit('join', nickname);
});
ws.on('nickname', function() {
    var nickname = window.prompt('昵称重复');
    while (!nickname) {
        nickname = window.prompt('昵称不能为空');
    }
    ws.emit('join', nickname);
});
ws.on('send.message', function(from, msg) {addMessage(from, msg);});
ws.on('announcement', function(from, msg) {addMessage(from, msg);});
document.querySelector('textarea').addEventListener('keypress', function(event) {
    if (event.which == 13) {
        send();
    }
});
document.querySelector('textarea').addEventListener('keydown', function(event) {
    if (event.which == 13) {
        send();
    }
});
document.querySelector('#send').addEventListener('click', function() {
    send();
});
document.querySelector('#clear').addEventListener('click', function() {
    document.querySelector('#chat_container').innerHTML = '';
});
</script>
</body>
</html>

查看全文

相关阅读:
Dubbo本地开发技巧
 MongoDB基于GridFS管理文件
 Java MongoDB插入
 java MongoDB查询（二）复杂查询
 java MongoDB查询（一）简单查询
 Java 连接MongoDB
MongoDB简述
 Bitmap.Config 详解
 ViewGroup 和 View 事件传递及处理小谈
 瀑布流ListView

原文地址：https://www.cnblogs.com/feilv/p/4170981.html