|
前端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;
}
#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/')
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();
return times=hour+":"+min+":"+sec
}
var arrMg = [ ];
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=[]
ws.on('connection',(client)=>{
clients.push(client)
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)
}
}
|