使用express和socket.io实现聊天室功能

最新推荐文章于 2024-05-17 21:48:10 发布

wx479

最新推荐文章于 2024-05-17 21:48:10 发布

阅读量254

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/wx479/article/details/121149023

版权

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100vh;
            background: #000;
            display: none;
        }
        .active{
            display: block!important;
        }
        .bgc{
            background: #fff!important;
        }
        .box .ipt1{
            width: 200px;
            height: 48px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            border:1px solid #fff;
            font-size: 24px;
            padding-left: 10px;
        }
        .box .btn1{
            width: 100px;
            height: 40px;
            position: absolute;
            top: 60%;
            left: 50%;
            margin-left: -50px;
        }
        .title{
            font-size: 28px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding-top: 250px;
        }
        .botbox{
            width: 100%;
            height: 40px;
            position: absolute;
            bottom: 5px;
            left: 0px;
        }
        .botbox input{
            width: 70%;
            height: 40px;
            font-size: 24px;
            padding-left: 12px;
        }
        .botbox button{
            width: 30%;
            height: 40px;
        }
        .showbox{
            display: flex;
            flex-direction: column;
        }
        .showbox div{
            text-align: center;
            font-size: 10px;
            color: #333;
        }
        .header{
            width: 100%;
            height: 48px;
            text-align: center;
            background: #d011b0;
            line-height: 48px;
            color: #fff;
        }
        .showbox p{
            padding-left: 20px;
            font-size: 18px;
            color: #999;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box active">
            <div class="title">INPUT YOUR NAME</div>
            <input placeholder="登录名" class="ipt1"/>
            <button class="btn1">登录</button>
        </div>
        <div class="box">
            <div class="header"></div>
            <div class="showbox"></div>
            <div style="display: flex;align-items: center;" class="botbox">
                <input placeholder="发消息" class="ipt2"/>
                <button class="btn2">发送</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
    <script>
        $(function(){
            var socket = io();
            $('.btn1').click(function(){
                var name = $('.ipt1').val()
                socket.emit('login',{
                    name:name
                })
                $('.box').eq(0).click(function(){
                    $('.box').eq(0).removeClass('active')
                    $('.box').eq(1).addClass('active')
                    $('.box').eq(1).addClass('bgc')
                })
            })
            socket.on('username',function(data){
                $('.showbox').append(`<div>欢迎用户${data.name}进入聊天室</div>`)
                $('.header').text(`xx聊天室(${data.num})`)
            })
            socket.on('user join',function(data){
                $('.showbox').append(`<div>${data.name}刚刚进入聊天室</div>`)
                $('.header').text(`xx聊天室(${data.num})`)
            })
            $('.btn2').click(function(){
                let message = $('.ipt2').val()
                let name = $('.ipt1').val()
                socket.emit('send message',{
                    message:message,
                    name:name
                })
            })

            socket.on('own',function(data){
                $('.showbox').append(`<p>${data.name}:${data.message}</p>`)
            })
            socket.on('other',function(data){
                $('.showbox').append(`<p>${data.name}:${data.message}</p>`)
            })
        })
    </script>
</body>
</html>

服务端代码

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);


app.all("*",function(req,res,next){
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Headers", "content-type");
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  next();    
})

let nums = 0

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  socket.on('login',function(data){
    ++nums
    socket.emit('username',{
      name:data.name,
      num:nums
    })
    
    socket.broadcast.emit('user join',{
      name:data.name,
      num:nums
    })
  })

  //处理信息
  socket.on('send message',function(data){
    socket.emit('own',{
      message:data.message,
      name:data.name
    })
    socket.broadcast.emit('other',{
      message:data.message,
      name:data.name
    })
  })

});

wx479

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用express和socket.io实现聊天室功能

客户端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
复制链接

扫一扫