node socket搭建简单聊天室

来源：互联网发布：不想找女朋友知乎编辑：程序博客网时间：2024/04/25 14:29

html <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Socket.IO 聊天室</title><style>*{padding: 0;margin: 0;}h1{font-family: Arail,Helvetica;font-weight: bold;font-size: 14pt;color: #006bb5;background: #f0f0f0;border-radius: 5px;border: 1px solid #f0f0f0;padding: 5px;margin-right: 18px;}div[id^=divContainer]{border:0px;margin: 10px 0;padding: 3px;background: #f0f0f0;border-radius: 5px;}div#divLeft{width: 85%;background: #f0f0f0;float: left;}div#divRight{width: 15%;background: white;float: right;font-weight: bold;font-size: 12px;}div#divchat{border: 0;margin: 10px 0;padding: 3px;background: #f0f0f0;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: #f0f0f0;}tr#trDlg, td#tdDlg{background: #f0f0f0;font-size: 10px;}textarea{font-family: inherit;font-size: 10pt;border: 1px solid #444;background: white;width: 100%;}input[type="button"]{font-family: inherit;border: 1px solid #808080;border-radius: 10px;margin: 1px;color: white;background: #81a0b5;width: 100px;}input[type="button"]:hover{background: #006bb5;}input[type="button"]:active{font-weight: bold;background: #006bb5;}input[type="button"]:focus{margin: 0;font-weight: bold;background: #006bb5;}</style><script src="/socket.io/socket.io.js"></script><script type="text/javascript">var userName,socket,tbxUsername,tbxMsg,divChat;function window_onload(){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(){if(tbxUsername.value.trim() == ''){return alert('请输入用户名');}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(){addMsg('该用户名已被使用');document.getElementById('btnSend').disabled = true;document.getElementById('btnLogout').disabled = true;document.getElementById('btnLogin').disabled = '';})socket.on('error',function(){addMsg('与聊天服务器的连接发生错误');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 (){var msg = tbxMsg.value;if(msg.length > 0){var data = {user: userName,msg:msg}socket.emit('chat',data);console.log(data);tbxMsg.value = '';}}function btnLogout_onclick(){socket.emit('logout',userName);socket.disconnect();socket.removeAllListeners('connect');io.sockets = {};addMsg('用户'+userName+'退出聊天室');document.getElementById('btnSend').disabled = true;document.getElementById('btnLogout').disabled = true;document.getElementById('btnLogin').disabled = '';var divRight = document.getElementById('divRight');divRight.innerHTML = '用户列表';}function window_onunload(){socket.emit('logout',userName);socket.disconnect();}</script></head><body onload="window_onload()" onunload="window_onunload()"><h1>Socket.IO 聊天室</h1><div id="divContainer1"><table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"><tr id="trDlg"><td id="tdDlg" width="5">用户名 <input type="text" id="tbxUsername" value="游客" size="20"><input type="button" id="btnLogin" value="登录" onclick="btnLogin_onclick()"><input type="button" id="btnLogout" value="退出" disabled onclick="btnLogout_onclick()"></td></tr></table></div><div id="divLeft"><div id="divchat"></div><div id="idContainer3"><table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"><tr id="trDlg"><td valign="top" id="tdDlg" nowrap>对话</td><td valign="top" id="tdDlg" ><textarea id="tbxMsg" cols="255" rows="5" style="width:100%"></textarea></td><td valign="top" id="tdDlg" ><input type="button" id="btnSend" value="发送" disabled onclick="btnSend_onclick()"></td></tr></table></div></div><div id="divRight">用户列表</div></body></html>node

var http = require('http');var express = require('express');var sio = require('socket.io');var app = express();var server = http.createServer(app);app.get('/',function(req,res){res.sendFile(__dirname+'/chatroom.html');})server.listen(80);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(name == names[i]){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(name == names[i]){names.splice(i,1);break;}}//broadcast 是除自己外的sockets,io.sockets是所有的连接,包括自己socket.broadcast.emit('logout',name);//io.sockets.emit('logout',names);io.sockets.emit('sendClients',names);})})

0 0