css+js+html+socket+natapp实现多人在线聊天

最新推荐文章于 2024-05-26 18:56:25 发布

Lutrra

最新推荐文章于 2024-05-26 18:56:25 发布

阅读量306

点赞数

分类专栏：前端小东西文章标签： css html5 html

本文链接：https://blog.csdn.net/lutrra/article/details/120636369

版权

前端小东西专栏收录该内容

12 篇文章 1 订阅

订阅专栏

多人在线聊天

在这里插入图片描述

步骤

准备工作

在控制台输入 npm init
npm install express
npm install socket.io

html主页

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<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>chat_message</title>
    <style>
        *{
    padding: 0;
    margin: 0;
}
.chat_commento{
    width: 450px;
    height: 650px;
    margin: auto;
    border-radius: 10px;
    border: 2px solid #f4f5f7;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
    width: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
/* top */
.chat_top{
    width: 100%;
    height: 50px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 20px;
    font-size: 20px;
    line-height: 50px;
    box-sizing: border-box;
    font-weight: 550;
    border-width: 0px;
}
/* middle */
/* 左边 */
.chat_middle{
    width: 450px;
    height: 455px;
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    border-width: 0px;
}
.chat_left{
    width: 100%;
    height: 120px;
    margin-top: 20px;
}
.chat_left_item_1{
    width: 50px;
    height: 50px;
    background-color: #4459AB;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    line-height: 50px;
    color: white;
    border-radius: 25px;
}
.chat_left_item_2{
    width: 55%;
    height: 100px;
    float: left;
    margin-top: 10px;
}
.chat_left_item_2 .chat_left_chat{
    float: left;
}
.chat_left_item_2 .chat_left_content{
    padding: 15px;
    margin-top: 10px;
    background-color: #f4f5f7;
    display: inline-block;
    border-radius: 10px;
    border-top-left-radius: 0px;
    word-break:break-all;
}
/* 右边 */
.chat_right{
    width: 100%;
    height: 120px;
    margin-top: 20px;
}
.chat_right_item_1{
    width: 50px;
    height: 50px;
    background-color: #4459AB;
    float: right;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    line-height: 50px;
    color: white;
    border-radius: 25px;
    display: inline-block;
}
.chat_right_item_2{
    width: 55%;
    height: 100px;
    float: right;
    margin-top: 10px;
}
.chat_right_time{
    width: 100%;
    text-align: right;
}
.chat_right_content{
    float: right;
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
    border-top-right-radius: 0px;
    background-color: #4F7cff;
    color: white;
    word-break:break-all;
}
/* foot */
.chat_foot{
    width: 450px;
    height: 130px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
}
.chat_context{
    width: 100%;
    height: 100%;
    font-size: 17px;
    box-sizing: border-box;
    outline: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-width: 0px;
    padding: 16px;
    word-break:break-all;
}
.chat_commit{
    width: 80px;
    height: 30px;
    color: white;
    background-color: #4F7cff;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    bottom: 20px;
    margin-right: 10px;
}
.chat_context{
    resize: none;
    word-break:break-all;
}
.chat_context::placeholder{
    color: black;
    font-weight: 500k;
}
.line{
    width: 100%;
    border-top: 1px;
    border-color: #f4f5f7;
    border-style: solid;
}
    </style>
</head>
<body>
    <!-- entry -->
    <div class="chat_commento" id="chat_comment">
        <!-- top -->
        <div class="chat_top">
            是兄弟就来砍我
        </div>
        <!-- line -->
        <div class="line"></div>
        <!-- middle -->
        <div class="chat_middle" id="chat_middle_item" ref="chat_middle_item">
  
        </div>
        <!-- line -->
        <div class="line"></div>
        <!-- foot -->
        <div class="chat_foot">
            <!-- context -->
            <textarea class="chat_context" id="chat_context_item" v-model="chat_context_item" cols="30" rows="10" placeholder="请输入"></textarea>
            <div class="chat_commit" id="button" ref="button">发送</div>
        </div>
    </div>
    <script src="/node_modules/socket.io/client-dist/socket.io.js"></script>
    <!-- 引入socket文件 -->
    <script>
        var names=prompt('请输入你的名字');
        //创建客户端的socket对象
        var socket=io()
        //发送消息给服务端
        socket.emit('user',names)
        //监听服务端的username消息
        socket.on('username',function(name){
            var chat_middle_item=document.getElementById("chat_middle_item");
            var pro=`<div style="color: #4459AB; text-align: center; font-size: 17px; opacity: 0.5;"> ${name} 已加入群聊</div>`;
            chat_middle_item.innerHTML=chat_middle_item.innerHTML+pro;
            let ele = document.getElementById('chat_middle_item');
            ele.scrollTop = ele.scrollHeight;
        })

        socket.on('message',function(data){
            if(data.uesr==names){
            var ans=`<div class="chat_right_item_1 clearfix">${data.uesr}</div>
                <div class="chat_right_item_2">
                    <div class="chat_right_time clearfix">${data.times}</div>
                    <div class="chat_right_content clearfix">${data.text}</div>
                    </div>`;
            var oLi=document.createElement("div");
            oLi.setAttribute("class","chat_right");
            }else{
            var ans=`<div class="chat_left_item_1 clearfix">${data.uesr}</div>
            <div class="chat_left_item_2">
                    <div class="chat_left_time clearfix">${data.times}</div>
                    <div class="chat_left_content clearfix">${data.text}</div>
            </div>`;
            var oLi=document.createElement("div");
            oLi.setAttribute("class","chat_left");
            }


            oLi.innerHTML=ans;
            send_message.append(oLi);
            let ele = document.getElementById('chat_middle_item');
            ele.scrollTop = ele.scrollHeight;
        })
        //方法
        var send_message=document.getElementById("chat_middle_item");
        var message=document.getElementById("chat_context_item");
        var domBtm=document.getElementById("button");
        domBtm.addEventListener("click",function(){
            var str=message.value;
            var date=new Date();
            var hh=date.getHours();
            var mm=date.getMinutes();
            var ss=date.getSeconds();
            var time=hh+':'+mm+':'+ss;
            socket.emit('send',{uesr:names,text:str,times:time});
            message.value='';
        });
    </script>
</body>
</html>

sever.js

var express=require('express')
var app=express()
var http=require('http').Server(app)
app.use("/node_modules/",express.static('./node_modules/'))
//创建服务端
var io =require('socket.io')(http)


//访问路由
app.get('/chat',function(req,res){
    res.sendFile(__dirname+'/chat_message.html')
})

//服务端的监听
io.on('connection',function(socket){
    //监听客户端发送的user信息
    socket.on('user',function(name){
        //广播
        io.emit('username',name);
    })

    socket.on('send',function(data){
        
        io.emit('message',data)
    })
})
//开启端口
http.listen(9000,function(){
    console.log('服务器，9000')
})

在natapp注册免费通道

依照window安装教程创建config.int
下载客户端
将客户端与config.int放在同一个文件夹中

开始运行

node sever.js
打开natapp.exe
复制Forwarding http://5qusi2.natappfree.cc
访问路由路径 http://5qusi2.natappfree.cc /chat
/caht为sever.js中自己写的路由

Lutrra

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+js+html+socket+natapp实现多人在线聊天

多人在线聊天步骤准备工作在控制台输入 npm initnpm install expressnpm install socket.iohtml主页<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
复制链接

扫一扫