很好奇网页上的聊天是如何做到的查询使用的是websocket技术,
秉着对技术的热爱学习起来
关于websocket的讲解
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket</title>
<style>
div{
width:200px;
height:200px;
border: solid 1px black;
}
</style>
</head>
<body>
<!-- 输入内容 -->
<input type="text" placeholder="请输入你的内容">
<button>发送请求</button>
<!-- 显示结果 -->
<div></div>
</body>
<script>
var input=document.querySelector('input');
var button=document.querySelector('button');
var div=document.querySelector('div')
window.onload=function(){
var socket=new WebSocket('ws://echo.websocket.org');
socket.addEventListener('open',function(){
// 当websocket连接成功的时候触发
div.innerHTML='连接服务成功';
})
//按钮点击的时候将输入框里的值发送给服务
button.addEventListener('click',function(){
var value=input.value
socket.send(value);
})
//接受websocket服务的数据
socket.addEventListener('message',function(e){
console.log(e)
div.innerHTML=e.data
})
}
</script>
</html>