WebSocket实现的简易在线聊天室

最新推荐文章于 2024-07-26 09:30:00 发布

前端小li

最新推荐文章于 2024-07-26 09:30:00 发布

阅读量223

点赞数 3

分类专栏：前端 HTML 文章标签： websocket html5 javascript

本文链接：https://blog.csdn.net/HTML5_student/article/details/120087071

版权

前端同时被 2 个专栏收录

32 篇文章 2 订阅

订阅专栏

HTML

17 篇文章 0 订阅

订阅专栏

前端html页面
背景图和头像自己替换

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
            background: url(./img/background.png); 
        }
        .con{
            margin: auto;
            width: 800px;
            height: 500px;
            position: absolute;
            left: 0;
            right: 0;
            top: 100px;
        }
         #textarea{
             height:500px;
             width: 800px;
             background-color:rgb(255, 255, 255,0.6); 
             resize: none;
             color: rgb(15, 15, 15); ;
             font-size: 18px;
             padding: 10px;
             /* box-shadow:1px 1px 1px saddlebrown; */
         }
         #user{
             width: 120px;
             height: 35px; 
              text-align: center;
             } 
         #msg{
           width: 550px;
           height: 30px;
         }
        input{ 
            border-radius: 18px;
            border: 1px solid #cccccc;
            outline: none;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 20px;
             
        }
        input:focus{
              box-shadow: 0px 0px 3px 3px rgb(60,255,11);
        }
        button{
            width: 75px;
            height: 30px;
            border: 1px solid #cccccc;
            border-radius: 18px;
            outline: none;
            box-shadow: 2px 2px 2px 2px #999999 ;
        }
        button:active{
            box-shadow: 2px 2px 2px 2px #999999 inset;
        }
        img{
            height: 30px;
            width: 30px;
            border-radius: 50%;
            vertical-align: middle;
        }
    </style>
</head>
<body>

    <div class="con">
    <div id='textarea'></div> 
    <br>
    <input type="text" id="user" name="user">
    <input type="text" id="msg" name="msg">
    <button>发送</button>
    </div>
</body>
    <script>
        const ws = new WebSocket('ws://192.168.1.20:8080/') //开启WebSocket服务的IP地址
        var textArea,user,msg,bn;
        var strs=""; 
        ws.onopen=()=>{
            console.log('服务器已连接')
        }
        ws.onmessage=(msg)=>{ 
              console.log( msg.data)
            if(msg.data=='不可以说脏话哦'){
                alert(msg.data)  
            }else{ 
                let arr=msg.data.split("&")
                var obj={} 
                for(var i=0;i<arr.length;i++){
                   obj[arr[i].split("=")[0]]=arr[i].split("=")[1]
                }
                console.log(arr,obj)
                var divobj = document.getElementById("textarea")
                strs+=`<div> <img src="./img/header.png" >[${time()}] ${obj.user}：${obj.msg}</div>`
                console.log(strs)
                divobj.innerHTML=strs
            } 
        }
        init();
        function init(){
            textArea=document.querySelector("textarea");
            user=document.querySelector("#user");
            msg=document.querySelector("#msg");
            bn=document.querySelector("button");
            bn.addEventListener("click",clickHandler);
            document.addEventListener("keyup",clickHandler);
        }  
        function clickHandler(e){
            if(e.type==="keyup" && e.keyCode!==13) return;
            if(user.value.trim().length===0)  return ;
            if(msg.value.trim().length===0)   return;
            const str="user="+user.value+"&msg="+msg.value;
            
            ws.send(wordfilter(str))  //向服务器发送数据
            msg.value="";
        }
        //时间距
        function time(){
            times=document.getElementById("times");
            var date=new Date();
            var Year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var min= date.getMinutes();
            var sec= date.getSeconds();
          //Year+"-"+month+"-"+day+"-"+hour+":"+min+":"+sec;
          return times=hour+":"+min+":"+sec
        }
        //脏话过滤
        var arrMg = [ ];//包含脏话的字段数组，网上应该有JSON
        function wordfilter(str){
            console.log(str,'888')
            for (var i = 0; i < arrMg.length; i++) { 
                var r = new RegExp(arrMg[i], "ig"); 
                console.log(r,'666')
                str = str.replace(r, "*");
            }
            return str
        }
        ws.onclose=()=>{
            console.log('服务器关闭')
        }    
    </script>
</html>

js文件需要通过node先起服务

const WebSocket = require('ws')
const ws = new WebSocket.Server({port:8080},()=>{
    console.log('socket start')
})

let clients=[] //光波操作 每一个客户端链接的client都存起来
//每当有客户端链接的时候 就会有一个client对象
ws.on('connection',(client)=>{
     //主动向前端发送消息
     clients.push(client)
     //client.send('欢迎光临，我是socket发送的') //数据只能传输字符串
     client.on('message',(msg)=>{ 
         console.log('来自前端的数据：'+msg)  
         sendAlls(msg.toString() ) 
     })

     client.on('close',(msg)=>{
        console.log('前端主动断开了链接：' )
    })
})   
function sendAlls(msga){
    for(let index =0;index<clients.length;index++){
        console.log(msga)
        clients[index].send(msga)
    }
}