简易聊天室

发布时间 2023-11-19 07:22:48作者: ,亦久亦旧/Ao

server.js文件内容
const ws=require("ws");//导入websocket 
let ser = new ws.Server(f port:3000));//在端口3000创建服务器
ser.on('connection',(client)=>//连接事件
client.on("message",(message)=>//客户端发送消息事件
ser.clients.forEach(c=>//遍历所有客户端
c.send(message)//发送得到的消息
])
])
)

 

Index.html文件内容
<!DOCTYPE html> 
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>聊天室</title>
</head>
<bodv>
<div></div>
<input type="text" />
<script>
const ws = new WebSocket("ws://Localhost:3000");//创建WS实例
document.querySelector("input").onkeypress=(e)=>
//输入框确认事件
if (e.keyCode!=13) [
return;
:/如果按下的不是回车键(13)则忽略
letv= document.querySelector("input").value;//获取输入数据
ws.send(v);//发送数据
document.querySelector("input").value='’//清空输入
了;
ws.onmessage=(message)=>[
document
.querySelector("div")
innerHTML+="<span>"+message.data+"</span><br/>";//追加信息
];
</script>
</body>
</html>