首页 > 其他分享 >WebSocket vs. Server-Sent Events:选择最适合你的实时数据流技术

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

时间:2024-09-16 10:23:04浏览次数:3  
标签:websocket text await Server vs ws WebSocket 服务端

引言:

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

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

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

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

这段代码是用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 vs. Server-Sent Events:选择最适合你的实时数据流技术_客户端_03

这样,客户端就可以通过WebSocket与服务端进行实时通信了。服务端的完整地址需要根据你的部署环境来确定。

2,如何检查WebSocket

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

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

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

标签:websocket,text,await,Server,vs,ws,WebSocket,服务端
From: https://blog.51cto.com/u_17005223/12030216

相关文章

  • WEB-API+.NET+CRUD+SSMS(VS2022)
    1.使用VS2022创建一个web-api项目,根目录如下:其中TestCode.cs写model实体类,Controller编写控制器2.实体类Item,编写对应的属性点击查看代码publicclassItem{[Required]publicintId{get;set;}[Required]publicintFieldID{get;set;}......
  • VMware ESXi 7.0U3q macOS Unlocker 集成驱动版更新 OEM BIOS 2.7 支持 Windows Serve
    VMwareESXi7.0U3qmacOSUnlocker集成驱动版更新OEMBIOS2.7支持WindowsServer2025VMwareESXi7.0U3qmacOSUnlocker&OEMBIOS2.7集成网卡驱动和NVMe驱动(集成驱动版)ESXi7.0U3标准版集成Intel网卡、RealtekUSB网卡和NVMe驱动请访问原文链接:h......
  • 企业网络项目调试系列-05核心网安全 DHCP SERVER与DHCP SNOOPING配置
    整体拓扑背景:生产环境中,最基础的网络安全配置就是DHCP动态IP获取的问题,由于个人家用路由器价格便宜,很多用户为了自身上网方便,在办公室的内网接入线路桥接一个家用路由,但是这种路由器的内网口配置自动开启DHCP功能,如果将有线网接入线路,接到了家用路由设备的内网口(LAN)口,则会......
  • USBserver是如何工作的?
        USBserver是如何工作的?USBserver属于一种集加密狗共享、虚拟机识别、加密狗远程使用、加密狗集中管理于一体的硬件设备。是一种基于硬件的USB设备远程连接解决方案。它使用1.2GHz的armSO提供千光网络接口和28个USB2.0接口,以满足高速应用的需要。USBServer特别保证......
  • 文心一言 VS 讯飞星火 VS chatgpt (347)-- 算法导论23.2 6题
    六、假定一个图中所有的边权重均匀分布在半开区间[0,1)内。Prim算法和Kruskal算法哪一个可以运行得更快?如果要写代码,请用go语言。文心一言:在比较Prim算法和Kruskal算法在特定条件下的性能时,我们需要考虑几个因素,主要是图的表示方式、边的数量、顶点的数量以及边的权重分布。由于在......
  • `character_set_server` 和 `collation_server`
    目录标题1.`character_set_server`的取值范围和相关性取值范围相关性2.`collation_server`的取值范围和相关性取值范围相关性3.默认值4.配置方法5.注意事项MySQL中`character_set_server`和`collation_server`参数修改对现有数据库和表的具体影响是什么?如何在不......
  • Ubuntu搭建vscode服务器
    在自己的阿里服务器上安装vscode-server,需要注意的要开启服务器的端口.在GitHub官网下载最新版本的code-server#下载地址#https://github.com/coder/code-server/releaseswgethttps://github.com/coder/code-server/releases/download/v4.92.2/code-server-4.92.2-lin......
  • 【第35章】Spring Cloud之Seata-Server快速入门
    文章目录前言一、准备1.架构图2.工作机制3.Seata术语4.事务模式4.1SeataAT模式(依赖数据库)4.2SeataTCC模式(不依赖数据库)4.3SeataSaga模式(支持长事务)4.4SeataXA模式(支持XA协议)二、安装1.下载2.解压3.重要属性4.修改配置4.1配置中心4.2注......
  • Ubuntu Server 24.04 LTS 安装记事
    UbuntuServer24.04LTS,代号NobleNumbat,于2024年4月25日正式发布,该发布版可以支持长达12年。曾经接触Ubuntu的时候,还是它的第一个版本,但是那个时候网络太局限了,关于这个系统的书籍也很少,所以就一直没有使用起来。有时候好像什么事情都得有个名头,就像我这几年一直改用国......
  • 80岁老奶奶都可以看懂的Markdown操作指北【VScode版】
    ·MARKDOWN从入门到入土·MARKDOWN是啥?一个写作时候专注于内容,定稿时集中处理格式的高级world文档!哈哈哈·为什么用MARKDOWN?当然是因为它好用啦选择Markdown取决于你的具体需求和使用场景。如果你更注重内容创作、版本控制和跨平台兼容性,Markdown可能是更好的选择。·MAR......