node socket搭建简单聊天室-优快云博客

本文链接：https://blog.youkuaiyun.com/magicfly9527/article/details/50558361

本文介绍了一个使用Socket.IO实现的实时聊天室应用。该应用包括客户端HTML页面和Node.js服务器端代码，支持用户登录、消息发送及用户列表展示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 οnlοad="window_onload()" οnunlοad="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="登录" οnclick="btnLogin_onclick()">
				<input type="button" id="btnLogout" value="退出" disabled οnclick="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 οnclick="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);
	})


})