websocket客户端实现

最新推荐文章于 2024-11-19 23:56:21 发布

weixin_30369041

最新推荐文章于 2024-11-19 23:56:21 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

文章标签：网络 javascript ViewUI

原文链接：http://www.cnblogs.com/xiaobiaomei/p/9355627.html

本文提供了一个使用WebSocket实现的基本回声测试示例。通过HTML和JavaScript构建的简单页面，用户可以输入文本并发送到服务器，之后服务器将返回相同的文本。此示例展示了如何创建WebSocket连接、发送消息及接收响应。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>Echo Test</h1>
    <input id="sendTxt" type="text">
    <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.onclose = function(){
            console.log('websocket close');
        }
        websocket.onmessage = function(e){
            console.log('e.data');
            document.getElementById('recv').innerHTML = e.data;
        }
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;
            websocket.send(txt);
        }
        
    </script>

</body>
</html>