转载：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.\n‘);
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(‘\r\n‘, ‘‘).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>
时间： 2024-10-15 15:58:20