nodejs实现简单聊天室2
server.js
var http = require(‘http‘); var express = require(‘express‘); var sio = require(‘socket.io‘); var app = express(); app.use(express.static(__dirname + ‘/‘)); var server = http.createServer(app); app.get(‘/‘, function(req, res) { res.sendFile(__dirname + ‘/chat.html‘); }); server.listen(3000, ‘127.0.0.1‘, function() { console.log(‘开始监听......‘); }); var io = sio.listen(server); var names = []; io.sockets.on(‘connection‘, function(socket) { socket.on(‘login‘, function(name) { for (var i = 0; i < names.length; i++) { if (names[i] == name) { socket.emit(‘duplicate‘); return; } } names.push(name); io.sockets.emit(‘login‘, name); io.sockets.emit(‘sendClients‘, names); }); socket.on(‘chat‘, function(data) { io.sockets.emit(‘chat‘, data); }); socket.on(‘logout‘, function(name) { for (var i = 0; i < names.length; i++) { if (names[i] == name) { names.splice(i, 1); break; } } socket.broadcast.emit(‘logout‘, name); io.sockets.emit(‘sendClients‘, names); }); });
chat.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>socket.io聊天室</title> <link rel="stylesheet" href="chat.css" /> <script type="text/javascript" src="socket.io.js"></script> <script type="text/javascript" src="chat.js"></script> </head> <body onload="window_onload()"> <h1>聊天室</h1> <div id="divContainer1"> <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> <tr class="trDlg"> <td class="tdDlg" width="5"> 用户名: <input id="tbxUsername" type="text" value="游客" size="20" /> <input id="btnLogin" type="button" value="登录" onclick="btnLogin_onclick();" /> <input type="button" value="test" onclick="alert(‘test‘);" /> <input id="btnLogout" type="button" value="退出" disabled onclick="btnLogout_onclick();" /> </td> </tr> </table> </div> <div id="divLeft"> <div id="divchat"></div> <div id="divContainer3"> <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> <tr class="trDlg"> <td valign="top" class="tdDlg" nowrap> 对话 </td> <td valign="top" class="tdDlg"> <textarea id="tbxMsg" cols="255" rows="5" style="width: 100%"></textarea> </td> <td valign="top" class="tdDlg"> <input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" /> </td> </tr> </table> </div> </div> <div id="divRight"> 用户列表: </div> </body> </html>
chat.css
h1 { font-family: Arial,Helvetica,sans-serif; font-weight: bold; font-size: 14pt; color: #006bb5; background-color: #f0f0f0; border-radius: 5px; border: 1px solid #f0f0f0; padding: 5px; margin: 0 0 18px 0; } div[id^=divContainer] { border: 0; margin: 10px 0; padding: 3px; background-color: #f0f0f0; border-radius: 5px; } div#divLeft { width: 85%; background-color: #f0f0f0; float: left; } div#divRight { width: 15%; background-color: white; float: right; font-weight: bold; font-size: 12px; } div#divchat { border: 0; margin: 10px; padding: 3px; background-color: #f0f0f0; border: 1px solid pink; border-radius: 5px; position: relative; height: 300px; overflow: auto; font-size: 12px; } table.tbDlg { font-family: Verdana,Helvetica,sans-serif; font-weight: normal; font-size: 12px; background-color: #f0f0f0; } tr.trDlg, td.tdDlg { background-color: #f0f0f0; font-size: 10px; } textarea { font-family: inherit; font-size: 10pt; border: 1px solid #444; background-color: white; width: 100%; } input[type="button"] { font-family: inherit; border: 1px solid #808080; border-radius: 10px; margin: 1px; color: white; background-color: #81a0b5; width: 100px; } input[type="button"]:hover { margin: 1px; background-color: #006bb5; } input[type="button"]:active { margin: 1px; font-weight: bold; background-color: #006bb5; } input[type="button"]:focus { margin: 0; font-weight: bold; background: #006bb5; }
chat.js
var userName; var socket; var tbxUsername; var tbxMsg; var divChat; function window_onload() { //alert(‘hello‘); divChat = document.getElementById("divchat"); tbxUsername = document.getElementById(‘tbxUsername‘); tbxMsg = document.getElementById(‘tbxMsg‘); tbxUsername.focus(); tbxUsername.select(); } function addMsg(msg) { divChat.innerHTML += msg + ‘<br>‘; if (divChat.scrollHeight > divChat.clientHeight) { divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight; } } function btnLogin_onclick() { alert(‘login‘); if (tbxUsername.value.trim() == ‘‘) { alert(‘请输入用户名‘); return; } userName = tbxUsername.value.trim(); socket = io.connect(); socket.on(‘connect‘, function() { addMsg(‘与服务器建立连接‘); socket.on(‘login‘, function(name) { addMsg(‘欢迎用户‘ + name + ‘进入聊天室‘); }); socket.on(‘sendClients‘, function(names) { var divRight = document.getElementById(‘divRight‘); var str = ‘‘; names.forEach(function(name) { str += name + ‘<br>‘; }); divRight.innerHTML = ‘用户列表<br>‘; divRight.innerHTML += str; }); socket.on(‘chat‘, function(data) { addMsg(data.user + ‘说: ‘ + data.msg); }); socket.on(‘disconnect‘, function() { addMsg(‘与服务器的连接断开‘); document.getElementById(‘btnSend‘).disabled = true; document.getElementById(‘btnLogout‘).disabled = true; document.getElementById(‘btnLogin‘).disabled = ‘‘; var divRight = document.getElementById(‘divRight‘); divRight.innerHTML = ‘用户列表‘; }); socket.on(‘logout‘, function(name) { addMsg(‘用户‘ + name + ‘已退出聊天室‘); }); socket.on(‘duplicate‘, function() { alert(‘该用户名已经被使用‘); document.getElementById(‘btnSend‘).disabled = true; document.getElementById(‘btnLogout‘).disabled = true; document.getElementById(‘btnLogin‘).disabled = ‘‘; }); }); socket.on(‘error‘, function(err) { socket.disconnect(); socket.removeAllListeners(‘connect‘); io.sockets = {}; }); socket.emit(‘login‘, userName); document.getElementById(‘btnSend‘).disabled = ‘‘; document.getElementById(‘btnLogout‘).disabled = ‘‘; document.getElementById(‘btnLogin‘).disabled = true; } function btnSend_onclick() { alert(‘send‘); var msg = tbxMsg.value; if (msg.length > 0) { socket.emit(‘chat‘, {user: userName, msg: msg}); tbxMsg.value = ‘‘; } } function btnLogout_onclick() { socket.emit(‘logout‘, userName); socket.disconnect(); socket.removeAllListeners(‘connect‘); io.sockets = {}; addMsg(‘用户‘ + userName + ‘退出聊天室‘); var divRight = document.getElementById(‘divRight‘); divRight.innerHTML = ‘用户列表‘; document.getElementById(‘btnSend‘).disabled = ‘disabled‘; document.getElementById(‘btnLogout‘).disabled = ‘disabled‘; document.getElementById(‘btnLogin‘).disabled = ‘‘; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。