当前位置: 首页 > news >正文

前端如何使用WebSocket发送消息

系列文章目录


文章目录

  • 系列文章目录
  • 前言
  • 一、WebSocket的基本原理
  • 二、在前端使用WebSocket
    • 1.创建WebSocket实例
    • 2.监听事件
    • 3.发送消息
  • 三、实际应用场景
  • 总结


前言

WebSocket是一种在Web应用程序中实现双向通信的技术,它允许服务器和客户端之间实时交换数据。在本篇博客中,我们将详细介绍如何在前端使用WebSocket发送消息,以及一些实际示例代码。


一、WebSocket的基本原理

WebSocket是一种基于TCP协议的通信协议,它提供了一种持久连接,使得服务器和客户端可以通过单一的连接进行双向通信。与传统的HTTP请求相比,WebSocket连接更加轻量且适用于实时性要求较高的场景,如聊天应用、实时游戏等。

二、在前端使用WebSocket

以下是在前端使用WebSocket的基本步骤:

1.创建WebSocket实例

使用WebSocket构造函数创建一个WebSocket实例,需要传入WebSocket服务器的URL。

2.监听事件

监听WebSocket实例的事件,特别是onopen(连接建立)、onmessage(接收消息)、onclose(连接关闭)和onerror(错误)事件。

3.发送消息

使用WebSocket实例的send方法发送消息给服务器。

下面是一个简单的前端使用WebSocket发送消息的示例:<

相关文章:

前端如何使用WebSocket发送消息

系列文章目录 文章目录 系列文章目录前言一、WebSocket的基本原理二、在前端使用WebSocket1.创建WebSocket实例2.监听事件3.发送消息三、实际应用场景总结前言 WebSocket是一种在Web应用程序中实现双向通信的技术,它允许服务器和客户端之间实时交换数据。在本篇博客中,我们将…...

纸贵科技连续三年蝉联IDC中国 FinTech 50榜单

近日&#xff0c;国际权威市场研究机构IDC公布了“2023 IDC中国FinTech 50榜单”。作为领先的区块链技术和解决方案服务商&#xff0c;纸贵科技凭借过硬的区块链技术和丰富的金融科技创新成果&#xff0c;连续第三年荣登IDC中国FinTech 50榜单。 IDC中国FinTech 50榜单是金融科…...

台积电美国厂施工现场混乱,真令人头痛 | 百能云芯

近日&#xff0c;英伟达公司的财报表现异常亮眼&#xff0c;摩根士丹利不仅点名了台积电成为最大的受益者&#xff0c;还预测每售出一颗H100英伟达芯片&#xff0c;台积电就能获得900美元的利润。然而&#xff0c;美国媒体却曝出了一则不利的消息&#xff0c;称美国亚利桑那州的…...

React绑定antd输入框,点击清空或者确定按钮实现清空输入框内容

其实实现原理和vue的双向绑定是一样的&#xff0c;就是监听输入框的onChange事件&#xff0c;绑定value值&#xff0c;当输入框内容发生变化后&#xff0c;就重新设置这个value值。 示例代码&#xff1a;我这里是统一在handleCancel这个函数里面处理清空逻辑了&#xff0c;你们…...

Springboot整合liquIbase组件

liquIbase方式 1、添加依赖 <!-- Liquibase 依赖 --> <dependency><groupId>org.liquibase</groupId><artifactId>liquibase-core</artifactId> </dependency>2、添加配置项 spring:# datasource 数据源配置内容&#xff0c;对应…...

Apache Paimon 实时数据湖 Streaming Lakehouse 的存储底座

摘要&#xff1a;本文整理自阿里云开源大数据表存储团队负责人&#xff0c;阿里巴巴高级技术专家李劲松&#xff08;之信&#xff09;&#xff0c;在 Streaming Lakehouse Meetup 的分享。内容主要分为四个部分&#xff1a; 流计算邂逅数据湖 Paimon CDC 实时入湖 Paimon 不止…...

计算机网络(10) --- 高级IO

计算机网络&#xff08;9&#xff09; --- 数据链路层与MAC帧_哈里沃克的博客-CSDN博客数据链路层与MAC帧https://blog.csdn.net/m0_63488627/article/details/132178583?spm1001.2014.3001.5501 1.IO介绍 1.IO本质 1.如果数据没有出现&#xff0c;那么读取文件其实会被阻塞住…...

学习中ChatGPT的17种用法

ChatGPT本质上是一个聊天工具&#xff0c;旧金山的人工智能企业OpenAI于2022年11月正式推出ChatGPT。那么&#xff0c;ChatGPT与其他人工智能产品相比有什么特殊呢&#xff1f; 它除了可以回答结构性的问题&#xff0c;例如语法修正、翻译和查找答案之外。最关键的是它能够去解…...

融合CDN 如何有效的抵抗DDoS攻击

绝大部分对外网站所有者都离不开CDN的支持&#xff0c;据统计&#xff0c;全球高达70%的互联网流量都是通过CDN来进行缓存和加速的&#xff0c;不论是国外知名的CDN厂商&#xff1a;如Cloudflare、AWS、Akamai等&#xff0c;还是国内主流的CDN厂商阿里云华为云腾讯云等&#xf…...

Git 原理与使用

1.版本控制器 所谓的版本控制器&#xff0c;就是能让你了解到⼀个⽂件的历史&#xff0c;以及它的发展过程的系统。通俗的讲就是⼀个可以记录⼯程的每⼀次改动和版本迭代的⼀个管理系统&#xff0c;同时也⽅便多⼈协同作业。 ⽬前最主流的版本控制器就是 Git 。Git 可以控制电脑…...

如何批量加密PDF文件并设置不同密码 - 批量PDF加密工具使用教程

如果你正在寻找一种方法来批量加密和保护你的PDF文件&#xff0c;批量PDF加密工具是一个不错的选择。 它是一个体积小巧但功能强大的Windows工具软件&#xff0c;能够批量给多个PDF文件加密和限制&#xff0c;包括设置打印限制、禁止文字复制&#xff0c;并增加独立的打开密码。…...

【Unity 工程化】unity一些资源路径用途

Resources Resources 目录用于存放可以通过 Unity 的 Resources.Load 函数进行加载的资源。这些资源会在构建时被打包为一个单独的资源包&#xff0c;因此它们必须满足一些 Unity 所要求的命名和文件夹结构规则。由于这些资源被打包在一起&#xff0c;因此在构建后的游戏中可以…...

使用Docker进行模型部署

一、常见的模型部署场景 实时的、小数据量的预测应用 部署方式&#xff1a;采用python-httpserve应用部署&#xff08;如flask, fastApi, django&#xff09;&#xff0c;缺点是可能需要跨环境&#xff0c;从Java跨到Python环境实时的、大数据量的预测应用 部署方式&#xff1…...

第59步 深度学习图像识别:误判病例分析(TensorFlow)

基于WIN10的64位系统演示 一、写在前面 本期内容对等于机器学习二分类系列的误判病例分析&#xff08;传送门&#xff09;。既然前面的数据可以这么分析&#xff0c;那么图形识别自然也可以。 本期以mobilenet_v2模型为例&#xff0c;因为它建模速度快。 同样&#xff0c;基…...

【Vue框架】基本的login登录

前言 最近事情比较多&#xff0c;只能抽时间看了&#xff0c;放几天就把之前弄的都忘了&#xff0c;现在只挑着核心的部分看。现在铺垫了这么久&#xff0c;终于可以看前端最基本的登录了&#x1f602;。 1、views\login\index.vue 由于代码比较长&#xff0c;这里将vue和js…...

Python21天打卡Day16-内置方法map()

在 Python 中&#xff0c;map() 方法是一个内置的函数&#xff0c;用于将函数应用于可迭代对象&#xff08;如列表、元组等&#xff09;中的每个元素&#xff0c;返回一个包含结果的迭代器。 map() 方法的语法如下&#xff1a; map(function, iterable)function&#xff1a;表…...

伦敦银和伦敦金的区别

伦敦银河伦敦金并称贵金属交易市场的双璧&#xff0c;一般投资贵金属的投资者其实不是交易伦敦金就是交易伦敦银。相信经过一段时间的学习和投资&#xff0c;不少投资者都能分辨二者的区别。下面我们就来谈谈伦敦银和伦敦金有什么异同&#xff0c;他们在投资上是否有差别。 交易…...

【从零学习python 】92.使用Python的requests库发送HTTP请求和处理响应

文章目录 URL参数传递方式一&#xff1a;使用字典传递参数URL参数传递方式二&#xff1a;直接在URL中拼接参数获取响应头信息获取响应体数据a. 获取二进制数据b. 获取字符数据c. 获取JSON数据 进阶案例 URL参数传递方式一&#xff1a;使用字典传递参数 url https://www.apiop…...

Python requests实现图片上传接口自动化测试

最近帮别人写个小需求&#xff0c;需要本地自动化截图&#xff0c;然后图片自动化上传到又拍云&#xff0c;实现自动截图非常简单&#xff0c;在这里就不详细介绍了&#xff0c;主要和大家写下&#xff0c;如何通过Pythonrequests实现上传本地图片到又拍云服务器。 话不多说&a…...

【LeetCode-面试经典150题-day13】

目录 141.环形链表 2.两数相加 21.合并两个有序链表 138.复制带随机指针的链表 92.反转链表Ⅱ 141.环形链表 题意&#xff1a; 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...