nodejs之websocket聊天室

前端部分
<!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')
nodejs之websocket聊天室

猜你喜欢
