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

引言:

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

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

1,简单的示列

1-1,html5代码
html 复制代码
<!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

python 复制代码
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后端回应的字符串

运行:

bash 复制代码
uvicorn your_module_name:app --reload

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

这里是代码的简要解释:

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

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

  3. await websocket.accept():接受WebSocket连接。

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

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

  6. 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连接是否成功建立,以及消息是否能够正确发送和接收。以下是一些可用的在线工具:

  1. WebSocket在线测试工具:这个工具允许你输入服务地址,然后尝试建立WebSocket连接,发送消息,并查看服务器的响应。它支持内网和外网的测试。

  2. 图灵工具的WebSocket在线测试工具:这个工具提供了一个简单的界面,让你可以输入WebSocket连接地址,发送消息,并查看服务器的响应。

  3. 在线工具系统的WebSocket测试工具:这个工具同样支持WebSocket的在线测试,可以连接到服务端的WebSocket,并进行消息的发送和接收测试。

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

相关推荐
花好月圆春祺夏安17 分钟前
基于odoo17的设计模式详解---装饰模式
数据库·python·设计模式
DemonAvenger35 分钟前
高性能 TCP 服务器的 Go 语言实现技巧:从原理到实践
网络协议·架构·go
Python私教2 小时前
FastAPI+React19 ERP系统实战 第02期
fastapi
萧鼎2 小时前
深度探索 Py2neo:用 Python 玩转图数据库 Neo4j
数据库·python·neo4j
华子w9089258592 小时前
基于 Python Django 和 Spark 的电力能耗数据分析系统设计与实现7000字论文实现
python·spark·django
Rockson2 小时前
使用Ruby接入实时行情API教程
javascript·python
Bruce_Liuxiaowei3 小时前
常见高危端口风险分析与防护指南
网络·网络安全·端口·信息搜集
tmacfrank3 小时前
Android 网络全栈攻略(四)—— TCPIP 协议族与 HTTPS 协议
android·网络·https
liulilittle3 小时前
深度剖析:OPENPPP2 libtcpip 实现原理与架构设计
开发语言·网络·c++·tcp/ip·智能路由器·tcp·通信
cui_win3 小时前
【内存】Linux 内核优化实战 - net.ipv4.tcp_tw_reuse
linux·网络·tcp/ip