websocket入门1

很好奇网页上的聊天是如何做到的查询使用的是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>
posted @ 2020-05-08 20:52  以己为镜  阅读(127)  评论(0)  编辑  收藏  举报