JS——简易websocket

dbt@L

已于 2022-07-10 09:32:50 修改

阅读量376

点赞数

分类专栏： JavaScript 文章标签： websocket javascript 网络协议

于 2020-10-30 09:16:20 首次发布

本文链接：https://blog.csdn.net/qq_43201350/article/details/109378046

版权

JavaScript 专栏收录该内容

97 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
    <!-- 在文本框写入的内容会在下面的div中显示出来 -->
    <h1>Echo Test</h1>
    <input type="text" id="sendTxt">
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://echo.websocket.org/");
        //连接建立时触发
        websocket.onopen = function(){
            console.log("websocket open");
            document.getElementById("recv").innerHTML = "Connected";
        }
        //连接关闭时触发
        websocket.inclose = function(){
            console.log('websocket close');
        }
        //客户端接收服务端数据时触发
        websocket.onmessage = function(e){
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;// 把input 里的数据给下方div
        }
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;// 获取input里的数据
            websocket.send(txt);//使用连接发送数据，把input里的数据 给 下方的div
        }

    </script>
</body>
</html>

效果：
在这里插入图片描述

dbt@L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——简易websocket

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>WebSocket</title></head><body>  <h1>Echo Test</h1> <input type="
复制链接

扫一扫