当前位置：首页 > article >正文

WebSocket vs. Server-Sent Events：选择最适合你的实时数据流技术

article 2024/11/11 12:18:30

引言：

在当今这个信息爆炸的时代，用户对于网页应用的实时性要求越来越高。从即时通讯到在线游戏，再到实时数据监控，WebSocket技术因其能够实现浏览器与服务器之间的全双工通信而受到开发者的青睐。
在这里插入图片描述

WebSocket技术为现代Web应用提供了强大的实时通信能力。虽然它在实现上可能比传统的HTTP轮询复杂，但它带来的用户体验提升是显而易见的。随着技术的不断进步，WebSocket有望在未来的Web开发中扮演更加重要的角色。

1,简单的示列

1-1，html5代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Template</title>
</head>
<body>
         <h3>WebSocket Chat</h3>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
</body>
<script>
            var ws = new WebSocket("ws://localhost:8000/ws");
            ws.onmessage = function(event) {
                var messages = document.getElementById('messages')
                var message = document.createElement('li')
                var content = document.createTextNode(event.data)
                message.appendChild(content)
                messages.appendChild(message)
            };
            function sendMessage(event) {
                var input = document.getElementById("messageText")
                ws.send(input.value)
                input.value = ''
                event.preventDefault()
            }
</script>
</html>

1-2，python代码

文件名：websocket.py

from fastapi import FastAPI, WebSocket

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"Message text was: {data}")  #ws后端回应的字符串

运行：

uvicorn your_module_name:app --reload

在这里插入图片描述
这段代码是用Python编写的，看起来像是使用Starlette或类似库创建的WebSocket服务端的一个简单示例。这段代码定义了一个异步函数websocket_endpoint，它处理连接到/ws路径的WebSocket连接。

这里是代码的简要解释：

@app.websocket(“/ws”)：这是一个装饰器，用于将websocket_endpoint函数注册为处理/ws路径上的WebSocket连接的回调函数。

async def websocket_endpoint(websocket: WebSocket)：定义了一个异步函数，它接受一个WebSocket对象作为参数。

await websocket.accept()：接受WebSocket连接。

while True:：开始一个无限循环，用于持续监听来自客户端的消息。

data = await websocket.receive_text()：异步等待并接收客户端发送的文本消息。

await websocket.send_text(f"Message text was: {data}")：将接收到的消息内容，加上前缀文本，发送回客户端。

这段代码确实描述了一个WebSocket服务端的实现，但它本身并不是服务端的地址。服务端的地址通常是一个URL，例如ws://example.com/ws，客户端会使用这个地址来建立WebSocket连接。在这个例子中，/ws是WebSocket连接的路径，而实际的服务端地址需要包括协议（如ws://或wss://）、域名和可能的端口号。

1-3,运行html的截图

在这里插入图片描述
这样，客户端就可以通过WebSocket与服务端进行实时通信了。服务端的完整地址需要根据你的部署环境来确定。

2,如何检查WebSocket

要检查WebSocket服务端地址，如ws://localhost:8000，你可以使用一些在线的WebSocket测试工具。这些工具可以帮助你测试WebSocket连接是否成功建立，以及消息是否能够正确发送和接收。以下是一些可用的在线工具：

WebSocket在线测试工具：这个工具允许你输入服务地址，然后尝试建立WebSocket连接，发送消息，并查看服务器的响应。它支持内网和外网的测试。
图灵工具的WebSocket在线测试工具：这个工具提供了一个简单的界面，让你可以输入WebSocket连接地址，发送消息，并查看服务器的响应。
在线工具系统的WebSocket测试工具：这个工具同样支持WebSocket的在线测试，可以连接到服务端的WebSocket，并进行消息的发送和接收测试。

使用这些工具，你只需要输入你的WebSocket服务地址，然后按照工具的指示进行操作即可。这些工具通常都会有一个简洁的用户界面，让你可以快速开始测试。

查看全文

http://www.kler.cn/a/306554.html