【websocket–聊天室】

RORONOA~ZORO

已于 2022-07-14 16:09:03 修改

阅读量206

点赞数

于 2022-07-12 23:37:19 首次发布

本文链接：https://blog.csdn.net/jj16165858/article/details/125754471

版权

websocket–聊天室

不多说了上代码理解吧都在注释里面
先是简单的前端代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>聊天室</title>
	<script src="http://localhost:8000/socket.io/socket.io.js" ></script>
	<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<style type="text/css">
		.divs{
		    display: none;
		}
		.content{
		    width: 400px;
		    height: 300px;
		    border:5px solid  chocolate;
		    float: left;
		}
		.users{
		    width: 200px;
		    height: 300px;
		    border:5px solid green;
		    float: left;
		}
	</style>
</head>
<body>
	<h2>聊天室</h2>
	<div class="login">
		用户名：<input type="text"><button id="login" type="button">点击登录</button>
	</div>
	<div class="divs">
		<h3>欢迎:</h3>
		<p>
			<input type="text"><button id="qunliao" type="button">发送群聊</button>
		</p>
		<p>
			<input type="text"  ><button id="siliao" type="button">发送私聊</button>
			<select></select>
		</p>
		<div class="content">
			
		</div>
		<div class="users">
			<ul>
				<li>用户列表</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		let ws=io("ws://localhost:8000") 
		//前端监听登录失败和成功
		ws.on("loginFailed",data=>{  
			console.log("用户名已经存在")
		})
		ws.on("loginSuccess",data=>{  
			$(".login").hide()
			$(".divs").show()
			$(".divs h3").html("欢迎:"+data)
			//每一个前端页面只监听自己用户名的响应
			ws.on("to"+data,(message,username)=>{
				$("<p/>").html(username+"私聊你说:"+message).appendTo($(".content"))
				
			})
			
		})
		//后端showuser 前端监听这个事件响应 就证明能更新对应用户列表
		ws.on("showusers",data=>{
			$(".users ul").empty() //清空重复列表名
			data.forEach(item=>{   //列出数组的每个元素
				$("<li/>").html(item).appendTo($(".users ul"))//方法在被选元素的结尾插入 HTML 元素。
			})
			$(".divs select").empty()
			data.forEach(item=>{   
				$("<option/>").html(item).appendTo($(".divs select"))
			})
		})
		//监听群聊消息  作业：谁发送消息给谁个字体颜色
		ws.on("showmessage",(data,username)=>{  //data,username既拿到了内容又拿到了谁发送的
			$("<p/>").html(username+"说了:"+data).appendTo($(".content"))
		})
		$(function(){
			$("#login").click(function(){    //登录事件
				let username=$(this).prev().val()
				ws.emit("login",username) //给后端发送一个事件
			})
			$("#qunliao").click(function(){  //群聊事件
				let message=$(this).prev().val()
				ws.emit("addmessage",message)
			})
			//点击私聊将输入的内容指定 发送给对应的用户
			//服务器端发送两个值：message username：给谁发送消息的名字
			$("#siliao").click(function(){
				let message=$(this).prev().val()
				let username=$("select").val()
				//私聊事件 后端接收
				ws.emit("privatechat",message,username)
			})
		})
	</script>
</body>
</html>

然后node.js

const http=require("http")
const url=require("url")
const fs=require("fs")
const io=require("socket.io")
let users=["当前用户列表"]
const server=http.createServer((req,res)=>{
	if(req.method=="GET"){
		let{pathname,query}=url.parse(req.url,true)
		if(pathname.endsWith(".html")){
			fs.readFile(`./public${pathname}`,(err,data)=>{
				if(err){
					res.write("404")
					res.end()
				}else{
					res.write(data)
					res.end()
				}
			})
		}
	}
})
server.listen(8000,()=>{
	console.log("启动成功")
})
let ws=io(server)
//创建连接事件
ws.on("connect",sock=>{
	//登录监听
	// console.log(sock)
	sock.on("login",data=>{
		if(users.includes(data)){
			sock.emit("loginFailed","登录失败")
		}else{
			sock.emit("loginSuccess",data)//发送给前端监听登陆成功后输出用户名
			sock.username=data  //登录成功时存个username 
			users.push(data)
			//将发送用户名创建一个独立的响应重复使用  这样登录用一个响应 用户退出后也用这个响应
			//ws.sockets.emit()给当前连接的发送
			ws.sockets.emit("showusers",users) 
			
		}
	})
	//监听群聊
	sock.on("addmessage",data=>{  //接收到群聊信息data 然后在发送给前端每个用户
	    //所有人都要接收data  
		//通过存的 sock.username 拿到sock对应的用户名
		ws.sockets.emit("showmessage",data,sock.username)
	})
	//监听断开连接
	sock.on("disconnect",()=>{
		//将当前用户在数组中删除
		if(sock.username){   //如果有值就删除 没有值就不用管了
			let username=sock.username
			let index=users.indexOf(username)//如果没有值 返回-1
			users.splice(index,1) //没有值的话index为-1  会将最后一个元素删除
			ws.sockets.emit("showusers",users)
		}
	})
	//监听私聊
	sock.on("privatechat",(message,username)=>{
		//message       私聊的内容
		//username      给谁发送的用户名
		//sock.username 是谁发的消息
		//发送一个to     给谁发送的用户名，私聊内容，谁发的消息
		//一对一 服务器对当前用户
		//一对多 ws.socket.emit()   sock.broadcast.emit()
		sock.broadcast.emit("to"+username,message,sock.username)//前端接收
	})
})