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

news2024/9/21 2:45:16

引言:

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

这里是代码的简要解释:

  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.coloradmin.cn/o/2139795.html

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

相关文章

java计算机毕设课设—电子政务网系统(附源码、文章、相关截图、部署视频)

这是什么系统&#xff1f; 资源获取方式在最下方 java计算机毕设课设—电子政务网系统(附源码、文章、相关截图、部署视频) 电子政务网系统主要用于提升政府机关的政务管理效率&#xff0c;核心功能包括前台网站展示、留言板管理、后台登录与密码修改、网站公告发布、政府部…

高级Java程序员必备的技术点:你准备好了吗?

在Java编程的世界里&#xff0c;成为一名高级程序员不仅需要深厚的基础知识&#xff0c;还需要掌握一系列高级技术和最佳实践。这些技术点是通向技术专家之路的敲门砖&#xff0c;也是应对复杂项目挑战的利器。本文将探讨高级Java程序员必备的技术点&#xff0c;帮助你自我提升…

VS code 安装使用配置 Continue

Continue 插件介绍 Continue 是一款高效的 VS Code 插件&#xff0c;提供类似 GitHub Copilot 的功能&#xff0c;旨在提升开发者的编程效率。其配置简单&#xff0c;使用体验流畅&#xff0c;深受开发者喜爱。 主要功能特点 智能代码补全 Continue 能够基于当前代码上下文生…

MATLAB 可视化基础:绘图命令与应用

目录 1. 绘制子图1.1基本绘图命令1.2. 使用 subplot 函数1.3. 绘图类型 2.MATLAB 可视化进阶(以下代码均居于以上代码的数据定义上实现)2.1. 极坐标图2.3. 隐函数的绘制 3.总结 在数据分析和科学计算中&#xff0c;数据可视化是理解和解释结果的关键工具。今天&#xff0c;我将…

Javaの运算符 Day5

1. 算数运算符 1.1 二元运算符&#xff08;两个操作数&#xff09;的算数运算符 操作符描述求和-求差*求积/求商%求余 代码举例 public class TestOperator {public static void main(String[] args) {int a 20;int b 12;System.out.println(a b);System.out.println(a …

【算法】队列与BFS

【ps】本篇有 4 道 leetcode OJ。 目录 一、算法简介 二、相关例题 1&#xff09;N 叉树的层序遍历 .1- 题目解析 .2- 代码编写 2&#xff09;二叉树的锯齿形层序遍历 .1- 题目解析 .2- 代码编写 3&#xff09;二叉树最大宽度 .1- 题目解析 .2- 代码编写 4&#xf…

UART协议

目录 一、概述二、帧格式起始位数据位奇偶校验位停止位 三、数据传输过程四、串行通信接口RS232RS422RS485 五、UART环回程序设计 参考&#xff1a;正点原子FPGA开发指南 一、概述 UART&#xff08;通用异步收发器&#xff09;是一种异步、全双工的串行通信总线&#xff0c;在…

CGAL 从DSM到DTM holefilling remeshing

CGAL 从DSM到DTM holefilling & remeshing 上一节简单地删除被建筑物覆盖的大片区域中的顶点会导致大的Delaunay三角面&#xff0c;从而得到了较差的DTM&#xff0c;所以一个额外的步骤可以帮助产生更好的形状网格:删除大于阈值的面&#xff0c;并用孔洞填充算法进行三角化…

C++速通LeetCode简单第17题-爬楼梯

思路要点&#xff1a;将问题转化为求斐波那契数列的第n项&#xff0c;然后迭代。 思路分析&#xff1a;最后一次爬的阶数不是1就是2&#xff0c;假设爬n阶的方法数是f(n)&#xff0c;假设最后一次爬1阶&#xff0c;那么爬前面的 n-1阶的方法数是f(n-1)&#xff1b;假设最后一次…

力扣题解2848

大家好&#xff0c;欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述&#xff08;简单&#xff09;&#xff1a; 与车相交的点 给你一个下标从 0 开始的二维整数数组 nums 表示汽车停放在数轴上的坐标。对于任意下标 i&#xff0c;nums[i] [starti, endi] &…

熵权法详细讲解+Python代码实现

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

大数据新视界 --大数据大厂之 Cassandra 分布式数据库:高可用数据存储的新选择

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

基于单片机的超声波液位检测系统(论文+源码)

1总体设计 本课题为基于单片机的超声波液位检测系统的设计&#xff0c;系统的结构框图如图2.1所示。其中包括了按键模块&#xff0c;温度检测模块&#xff0c;超声波液位检测模块&#xff0c;显示模块&#xff0c;蜂鸣器等器件设备。其中&#xff0c;采用STC89C52单片机作为主…

2.5 Trigger源码分析 -- ant-design-vue系列

Trigger源码分析 – ant-design-vue系列 1 概述 源码地址&#xff1a; https://github.com/vueComponent/ant-design-vue/blob/main/components/vc-trigger/Trigger.tsx 在源码的实现中&#xff0c;Trigger组件主要有两个作用&#xff1a; 使用Portal组件&#xff0c;把Pop…

构建响应式 Web 应用:Vue.js 基础指南

构建响应式 Web 应用&#xff1a;Vue.js 基础指南 一 . Vue 的介绍1.1 介绍1.2 好处1.3 特点 二 . Vue 的快速入门2.1 案例 1 : 快速搭建 Vue 的运行环境 , 在 div 视图中获取 Vue 中的数据2.2 案例 2 : 点击按钮执行 vue 中的函数输出 vue 中 data 的数据2.3 小结 三 . Vue 常…

Leetcode3282. 到达数组末尾的最大得分

Every day a Leetcode 题目来源&#xff1a;3282. 到达数组末尾的最大得分 解法1&#xff1a;动态规划 代码&#xff1a; class Solution { public:long long findMaximumScore(vector<int>& nums) {if (nums.size() < 1) return 0LL;int n nums.size();vect…

JavaScript高级——循环遍历加监听

本文分享到这里&#xff0c;欢迎大家评论区相互讨论学习&#xff0c;下一篇继续分享JavaScript高级学习中的闭包的内容。

linux进程间通信——学习与应用命名管道, 日志程序的使用与实现

前言&#xff1a;本节主要讲解linux进程间通信里面的命名管道&#xff0c; 命名管道和我们学过的匿名管道是类似的。 博主将会带着友友们先看一下原理&#xff0c; 然后就会着手使用以下命名管道是怎么使用的。 最后我们还会试着引入日志系统&#xff0c; 我们从本节开始就会引…

npm 安装 与 切换 淘宝镜像

一、镜像源 npm默认镜像源是国外的&#xff0c;安装依赖速度较慢&#xff0c;使用国内的镜像源速度会快一些。 1、设置淘宝镜像源&#xff1a; #最新地址 淘宝 NPM 镜像站喊你切换新域名啦! npm config set registry https://registry.npm.taobao.org&#xff08;弃用了&…

网站采用H5+CSS3开发的优势和劣势

在现代网站开发中&#xff0c;HTML5和CSS3的结合使用已经成为一种趋势。以下是其优势和劣势的介绍&#xff1a; 优势 增强的多媒体支持&#xff1a;HTML5引入了新的标签&#xff0c;使开发者能够轻松嵌入音频、视频和图形&#xff0c;无需依赖第三方插件如Flash。这大大简化了…