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服务地址,然后按照工具的指示进行操作即可。这些工具通常都会有一个简洁的用户界面,让你可以快速开始测试。

相关推荐
斯凯利.瑞恩6 分钟前
Python决策树、随机森林、朴素贝叶斯、KNN(K-最近邻居)分类分析银行拉新活动挖掘潜在贷款客户附数据代码
python·决策树·随机森林
yannan2019031327 分钟前
【算法】(Python)动态规划
python·算法·动态规划
蒙娜丽宁37 分钟前
《Python OpenCV从菜鸟到高手》——零基础进阶,开启图像处理与计算机视觉的大门!
python·opencv·计算机视觉
光芒再现dev39 分钟前
已解决,部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘
运维·python·gpt·语言模型·自然语言处理
好喜欢吃红柚子1 小时前
万字长文解读空间、通道注意力机制机制和超详细代码逐行分析(SE,CBAM,SGE,CA,ECA,TA)
人工智能·pytorch·python·计算机视觉·cnn
小馒头学python1 小时前
机器学习是什么?AIGC又是什么?机器学习与AIGC未来科技的双引擎
人工智能·python·机器学习
神奇夜光杯1 小时前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
千天夜1 小时前
使用UDP协议传输视频流!(分片、缓存)
python·网络协议·udp·视频流
测试界的酸菜鱼1 小时前
Python 大数据展示屏实例
大数据·开发语言·python
羊小猪~~1 小时前
神经网络基础--什么是正向传播??什么是方向传播??
人工智能·pytorch·python·深度学习·神经网络·算法·机器学习