前端部分
<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
<style>
*{margin:0;padding: 0;}
html,body{height:100%;}
/* 聊天室 */
main{height:100%; background: green; display: none;}
main .header{
height: 10%;
background: #000;
color: #fff;
text-align: center;
}
main .header{display: flex;justify-content: center;align-items: center;}
main .content{
height: 80%;
color:#fff;
}
main .footer{
height: 10%;
background: #fff;
}
main .footer{
display: flex;
}
main .footer input{
flex-grow: 1;
}
main .footer button{
flex-basis: 50px;
}
/* 登录界面 */
.login{padding: 30px;}
.login p{line-height: 60px;}
.login p input{height: 30px;}
</style>
</head>
<body>
<div class="login">
<h3>用户登录</h3>
<p>用户名：<input type="text" id="user"></p>
<button type="button" id="login-btn">登录</button>
</div>
<main>
<div class="header">
<h2>同城聊天室</h2>
</div>
<div class="content"></div>
<div class="footer">
<input type="text">
<button type="button" id="dest-btn">发送</button>
</div>
</main>
<script src="./jquery.js"></script>
<script src="./socket.io.js"></script>
<script>
//建立websocket连接
let ws = io('ws://localhost:555')
//获取登录按钮
$("#login-btn").on("click",function(){
//获取用户名输入框的值
let user = $("#user").val();
// 把用户名发送给后端
ws.emit('login', { user })
})
//获取发送消息按钮
$("#dest-btn").on("click",function(){
//获取输入的内容
let content = $(this).siblings("input").val()
// 把输入的内容发送给后端
ws.emit('content', { content})
})
ws.on("returnContent",(data) => {
//渲染到内容区
$(".content").append(`<p>${data.content}</p>`)
})
//登录成功的时候
ws.on('success', (data) => {
alert(`欢迎${data.user}登录`)
$(".login").hide();
$("main").show();
})
ws.on('add', (data) => {
$('.content').append(`<p>欢迎${data.user}进入聊天室!</p>`)
})
</script>
</body>
</html>
后台部分
//引入socket.io模块 创建服务器
const server = require("http").createServer();
let io = require("socket.io")(server);
// 监听连接事件
io.on('connection', (ws) => {
//定义是否为新用户的标杆
let flag = true;
//定义空数组，保存用户
let arr = [];
//监听用户登录
ws.on("login",(data) => {
//如果是新用户
if (flag){
//将新用户添加到数组中
arr.push(data.user)
// 发送登录成功的信息给浏览器
ws.emit('success',data)
// 广播
io.sockets.emit('add', data);
}
//如果不是新用户
for(let i=0; i<arr.length; i++){
// 如果数组里面已经有这个用户名 那么就不是第一次登陆
if (arr[i] === data.user){
flag = false;
break;
}else{
flag = true;
}
}
})
//监听用户发送的内容
ws.on("content",(data) => {
// 把接收的内容广播
io.sockets.emit('returnContent', data)
})
})
// 监听端口
server.listen(555)
console.log('服务器启动成功, ws://localhost:555')
