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

引言:

在当今这个信息爆炸的时代,用户对于网页应用的实时性要求越来越高。从即时通讯到在线游戏,再到实时数据监控,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, WebSocketapp = 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连接。

这里是代码的简要解释:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/140655.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构——链表(短小精悍版)

使用链表结构可以克服数组链表需要预先知道数据大小的缺点 链表结构可以充分利用计算机内存空间&#xff0c;实现灵活的内存动态管理。 但是链表失去了数组随机读取的优点&#xff0c;同时链表由于增加了结点的指针域&#xff0c;空间开销比较大。 单向链表&#xff1a; 一个…

更换YUM源

前言 yum -y install pcre-develCannot find a valid baseurl for repo: base/7/x86_64更换yum源 备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak下载yum源 这次选择阿里 阿里yum源仓库 替换更新 mv ~/Centos-7.repo /etc/yum.repos…

黑神话悟空:上架27天后,玩家群体分析

按9月13日的统计&#xff0c;仅在steam平台上&#xff0c;售出1900w份&#xff0c;约65亿人民币。 &#xff08;游戏于2024年8月20日发售&#xff09; 由于黑神话的关卡是线性的&#xff0c;即必须一关打过才能打下一关&#xff0c;和游戏的成就系统对应&#xff0c;所以可以…

【免费】CISSP官方习题集第4版

伴随2004年4月CISSP新大纲发布&#xff0c;CISSP官方习题集第4版(OPT v4)已于2024年5月出版&#xff1a; 本人维护的中英对照8个知识域分章节练习已同步更新完成&#xff0c;在保持v3版内容基础上&#xff0c;增补了所有v4新内容&#xff0c;免费供考友们使用&#xff0c;访问方…

漏洞复现-泛微-E-Cology-SQL

更多漏洞分析复现&#xff0c;可前往无问社区查看http://www.wwlib.cn/index.php/artread/artid/10358.html 0x01 产品简介 泛微e-cology是一款由泛微网络科技开发的协同管理平台&#xff0c;支持人力资源、财务、行政等多功能管理和移动办公。 0x02 漏洞概述 泛微e-cology…

通信工程学习:什么是UNI用户网络接口

UNI&#xff1a;用户网络接口 UNI&#xff08;User Network Interface&#xff09;用户网络接口&#xff0c;是网络通信中的一个重要概念&#xff0c;它连接了用户设备与智能光网络或其他类型的网络。以下是关于UNI用户网络接口的详细解释&#xff1a; 一、定义与功能 定义&am…

YOLO学习笔记 | YOLO目标检测算法(YOLO-V2)

github&#xff1a;https://github.com/MichaelBeechan CSDN&#xff1a;https://blog.csdn.net/u011344545 YOLO-V2 V1与V2区别Batch Normalization更大分辨率YOLO-V2网络结构 V1与V2区别 V2更强更快 Batch Normalization 更大分辨率 YOLO-V2网络结构

类的定义和对象的使用

类的定义 类名&#xff1a;手机(Phone) 成员变量&#xff1a;品牌(brand&#xff09;&#xff0c;价格&#xff08;price&#xff09; 成员方法&#xff1a;打电话(calL)&#xff0c;发短信&#xff08;sendMessage&#xff09; 调用类变量和方法

一键智能改写文章,快速提升内容的吸引力

在这个信息如潮水般涌来的时代&#xff0c;优质的内容创作成为了吸引眼球、传递价值的关键。而有时候&#xff0c;我们可能会面临着已有文章需要优化、旧内容需要焕发新活力的情况。此时&#xff0c;一键智能改写文章的工具就如同一位神奇的魔法师&#xff0c;它能帮助我们将文…

【Linux】调试和Git及进度条实现

这里是阿川的博客&#xff0c;祝您变得更强 ✨ 个人主页&#xff1a;在线OJ的阿川 &#x1f496;文章专栏&#xff1a;Linux入门到进阶 &#x1f30f;代码仓库&#xff1a; 写在开头 现在您看到的是我的结论或想法&#xff0c;但在这背后凝结了大量的思考、经验和讨论 目录 1.…

(CVPR-2022)感知优先的扩散模型训练

感知优先的扩散模型训练 Paper Title&#xff1a;Perception Prioritized Training of Diffusion Models Paper是首尔国立大学数据科学与人工智能实验室发表在CVPR 2022的工作 论文地址 Code地址 Abstract 扩散模型通过优化相应损失项的加权和&#xff08;即去噪得分匹配损失&…

危机中的机遇:客户服务在品牌危机管理中的角色与价值

在瞬息万变的商业环境中&#xff0c;品牌危机如同暗流涌动的漩涡&#xff0c;随时可能将企业卷入深渊。然而&#xff0c;正如古语所云&#xff1a;“祸兮福之所倚”&#xff0c;危机之中往往也蕴藏着转机与机遇。在这一过程中&#xff0c;客户服务作为企业与消费者之间的桥梁&a…

react js 使用 useEffect 钩子

起因&#xff0c; 目的: useEffect() &#xff0c; 已经遇见好几次了。 我的理解是&#xff0c; 页面加载完成之后&#xff0c;会执行这个函数。&#xff1f;&#xff1f;&#xff1f; 写个例子&#xff0c; 请求 api import React, { useState, useEffect } from "re…

【C++】STL--string(上)

前言 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&#xff0c;稍不留…

numpy手写二分类交叉熵

下面是一个使用NumPy手写二分类交叉熵损失的代码&#xff0c;包括详细注释。我们将定义一个简单的函数来计算交叉熵损失&#xff0c;并使用main函数来演示如何使用它。 import numpy as npdef binary_cross_entropy(y_true, y_pred):"""计算二分类交叉熵损失参…

莎朗斯通的比基尼视频曝光了她的日常锻炼!自爆曾在重症监护室呆了9天

如果您错过了&#xff0c;莎朗斯通 (Sharon Stone) 的华丽比基尼视频向您展示了她的日常锻炼&#xff01; 9 月 12 日&#xff0c;斯通分享了一段她在泳池里锻炼的视频。她分享了这段视频&#xff0c;并配文&#xff1a;“我刚刚和教练 kristinemarie_18 完成了最后一次锻炼&a…

Python酷库之旅-第三方库Pandas(104)

目录 一、用法精讲 451、pandas.DataFrame.pow方法 451-1、语法 451-2、参数 451-3、功能 451-4、返回值 451-5、说明 451-6、用法 451-6-1、数据准备 451-6-2、代码示例 451-6-3、结果输出 452、pandas.DataFrame.dot方法 452-1、语法 452-2、参数 452-3、功能…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

Golang | Leetcode Golang题解之第405题数字转换为十六进制数

题目&#xff1a; 题解&#xff1a; func toHex(num int) string {if num 0 {return "0"}sb : &strings.Builder{}for i : 7; i > 0; i-- {val : num >> (4 * i) & 0xfif val > 0 || sb.Len() > 0 {var digit byteif val < 10 {digit 0…

kettle从入门到精通 第八十五课 ETL之kettle kettle中javascript步骤调用外部javascript/js文件

场景&#xff1a;交流学习群里面有小伙伴咨询kettle中的javascript代码步骤如何调用外部js文件中的函数&#xff0c;觉得有点意思的&#xff0c;于是就抽时间整理了一下。 1、外部js文件为test.js&#xff0c;代码如下&#xff1a; function test(param){return "接收到了…