WebSocket初体验

最新推荐文章于 2025-08-18 22:01:01 发布

weixin_34128411

最新推荐文章于 2025-08-18 22:01:01 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签：网络 python

原文链接：https://my.oschina.net/AnymoreCoder/blog/1585952

本文介绍了一种实时双向通信协议WebSocket，并提供了一个简单的示例页面用于测试。通过该示例，读者可以了解如何使用JavaScript创建WebSocket连接及如何发送和接收消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

关于什么是websocket，可以戳链接看看知乎这个回答，图文并茂，可以说是非常生动了。

若要体验一下websocket，不妨打开以下index.html看看效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>
<h1>Echo Test</h1>
<input id="sendTxt" type="text">
<button id="sendBtn">发送</button>
<div>
    <h6>发送内容：</h6>
    <div id="recv"></div>
</div>

<script>
    var websocket = new WebSocket("ws://echo.websocket.org/");
    websocket.onopen = function (p1) {
        console.log('websocket open');
        document.getElementById('recv').innerHTML = 'Connected';
    }

    websocket.onclose = function (p1) {
        console.log('websocket close');
    }

    websocket.onmessage = function (e) {
        console.log(e.data);
        document.getElementById('recv').innerHTML = e.data;
    }

    //点击按钮发送
    document.getElementById('sendBtn').onclick = function () {
        var value = document.getElementById('sendTxt').value;
        websocket.send(value);
    }
</script>
</body>
</html>

ws://echo.websocket.org/是WebSocket.org提供了一个专门用来测试WebSocket的服务器。

转载于:https://my.oschina.net/AnymoreCoder/blog/1585952