【温故而知新】HTML5 WebSocket

文章目录

  • 前言
  • 一、概念
  • 二、案例
  • 三、属性
  • 四、事件
  • 五、方法
  • 六、常见问题

前言

HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点:

  1. 新增语义元素:HTML5引入了许多新的语义元素,如<header>、<footer>、<article>、<section>等,这些元素有助于提高网页的结构化和可访问性。
  2. 媒体支持:HTML5引入了<audio><video>元素,使得开发者可以在网页上直接嵌入音频和视频内容,而不需要依赖第三方插件。
  3. Canvas绘图:HTML5引入了<canvas>元素,使得开发者可以使用JavaScript在网页上绘制图形和动画。
  4. 语义化标签:HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如,使用<nav>元素表示导航链接,使用<article>元素表示独立的内容等。
  5. 交互性:HTML5提供了更多的API和事件处理程序,使得开发者可以创建更加交互式的网页和应用。例如,拖放功能、文件上传和下载、地理定位等。
  6. 离线和存储:HTML5提供了离线存储和会话存储功能,使得开发者可以在用户的设备上存储数据,以便在离线时使用。
  7. 更好的表单控制:HTML5改进了表单元素和输入类型,使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具,它为开发者提供了更多的功能和灵活性,使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

一、概念

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。它使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

当获取WebSocket连接后,可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。同时,WebSocket协议也提供了一些额外的机制,如关闭连接、发送广播消息等。

WebSocket的优点包括:

  1. 持久连接:WebSocket保持了TCP连接的开启状态,避免了HTTP协议中频繁的握手操作,提高了数据传输的效率和实时性。
  2. 双向通信:WebSocket允许客户端和服务器之间进行双向通信,即同时支持客户端向服务器发送数据和服务器向客户端推送数据。
  3. 自定义协议:WebSocket可以与各种应用层协议一起使用,如HTTP、MQTT等。这使得WebSocket在各种应用场景下都能够得到广泛的应用。
  4. 跨域通信:WebSocket支持跨域通信,即客户端和服务器可以在不同的域名下进行通信。
  5. 协议透明:WebSocket是一种透明的协议,对于开发者来说,它就像一个普通的TCP连接一样,可以发送任何类型的数据。

WebSocket是一个非常强大和灵活的协议,适用于需要实时通信的Web应用程序,如在线游戏、聊天室、股票交易等。

二、案例

要在HTML5中使用WebSocket,您需要创建一个新的WebSocket对象,并指定要连接到的服务器的URL。以下是一个示例:

var socket = new WebSocket("ws://example.com/socket");// WebSocket event listeners
socket.onopen = function() {console.log("WebSocket connection established.");
};socket.onmessage = function(event) {var message = event.data;console.log("Received message: " + message);
};socket.onclose = function(event) {console.log("WebSocket connection closed with code: " + event.code);
};// Sending messages
socket.send("Hello, server!");// Closing the connection
socket.close();

在上面的例子中,WebSocket对象是用URL“ws://example.com/socket”创建的。当成功建立连接时,会触发onopen事件侦听器。当从服务器接收到新消息时,onmessage事件侦听器会被触发。当连接关闭时,会触发onclose事件侦听器。
您可以使用WebSocket对象的send方法向服务器发送消息。close方法用于关闭WebSocket连接。
WebSocket提供了实时双向通信通道,适用于需要实时更新的应用程序,如聊天应用程序、实时游戏和协作编辑工具。

三、属性

属性描述
Socket.readyState只读属性 readyState 表示连接状态,可以是以下值:0 - 表示连接尚未建立。1 - 表示连接已建立,可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

四、事件

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发

五、方法

方法描述
Socket.send()使用连接发送数据
Socket.close()关闭连接

六、常见问题

  1. WebSocket与HTTP有什么区别?
    WebSocket是一种全双工通信协议,提供了客户端和服务器之间的实时通信能力,而HTTP是一种请求-响应协议,每次客户端需要服务器的响应时都需要发送一个新的请求。WebSocket连接是持续的,并可以在客户端和服务器之间发送任意数量的消息,而HTTP连接则是短暂的,每个请求都需要重新建立连接。
  2. WebSocket是否安全?
    WebSocket本身并不提供安全性,但可以通过使用WebSocket over TLS (wss://) 来在传输层上进行安全加密,类似于HTTP over TLS (https://)。这样可以确保数据在传输过程中受到保护。
  3. 如何处理WebSocket连接中断?
    当WebSocket连接中断时,可以使用onclose事件来处理连接关闭的逻辑。可以在该事件的回调函数中尝试重新连接服务器,或者执行其他必要的操作,以确保保持通信的连续性。
  4. 是否可以在浏览器之间建立WebSocket连接?
    是的,WebSocket连接不限于浏览器和服务器之间的通信,而是可以在任何支持WebSocket协议的客户端和服务器之间建立连接。这使得WebSocket可以用于构建跨浏览器的实时应用程序。
  5. WebSocket是否支持跨域通信?
    是的,WebSocket支持跨域通信。当使用WebSocket建立跨域连接时,需要服务器配置允许来自其他域的连接。在服务器端,可以使用CORS(跨域资源共享)来配置允许跨域WebSocket连接。
  6. WebSocket是否支持浏览器的兼容性?
    WebSocket在现代浏览器中得到广泛支持,包括Google Chrome、Mozilla Firefox、Safari、Microsoft Edge等主流浏览器。然而,一些旧版本的浏览器可能不支持WebSocket或支持较差。在开发时,需要考虑到浏览器的兼容性,可以使用polyfill库来为不支持WebSocket的浏览器提供类似的功能。

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

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

相关文章

Kafka常见指令及监控程序介绍

kafka在流数据、IO削峰上非常有用&#xff0c;以下对于这款程序&#xff0c;做一些常见指令介绍。 下文使用–bootstrap-server 10.0.0.102:9092,10.0.0.103:9092,10.0.0.104:9092 需自行填写各自对应的集群IP和kafka的端口。 该写法 等同 –bootstrap-server localhost:9092 …

Unity 抽象工厂模式(实例详解)

文章目录 简介实例1实例2 简介 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种方式来封装一组相关或相互依赖对象的创建过程&#xff0c;而无需指定具体类。这种模式常用于系统中有多组相关产品族&#xff0c;且客户端需要使用不同产品族中的对象时。 在Unity中&a…

mysql事务日志和MVCC

1.mysql的redolog日志和undolog日志的作用&#xff1f; A redolog主要作用是保证提交commit的数据的成功 将修改的数据在正式提交commit前进行记录 记录的方式&#xff0c;将日志从内存刷新给文件缓存&#xff0c;文件缓存什么时候落盘由操作系统自行决定(2) redolog日志的主要…

Windows7关闭谷歌浏览器提示“若要接收后续 Google Chrome 更新,您需使用 Windows 10 或更高版本”的方法

背景 电脑比较老&#xff0c;系统一直没有更新&#xff0c;硬件和软件版本如下&#xff1a; 操作系统版本&#xff1a;Windows7 企业版 谷歌浏览器版本&#xff1a;109.0.5414.120&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; 该版本的谷歌浏览器是支持…

MySQL不同插入方式性能对比实验

最近负责的项目需要数据同步入库MySQL&#xff0c;为了测速那种入库方式效率比较高&#xff0c;为此进行了以下的对比实验&#xff0c;在此记录一下 实验表单数据格式 实验代码 共三种方法对比 mutiSqlInsert: 一条一条插入&#xff0c;最后一次提交 singleSqlInsert&…

LabVIEW滚动轴承故障在线监测

展示了如何将LabVIEW开发出一种有效的滚动轴承故障在线监测系统。介绍了该系统的开发过程、工作原理及其在实际应用中的效果。该系统成功地应用于对滚动轴承故障的早期诊断&#xff0c;提高了故障检测的准确性和效率。 滚动轴承在工作过程中会产生复杂的振动信号&#xff0c;包…

Proxmox VE 8 试装Oracle 23c

作者&#xff1a;田逸&#xff08;formyz&#xff09; Oracle 当前的最新版本是23c&#xff0c;虽然官方网站下载不了它的正式版本&#xff0c;但是却提供了一个性能受限的免费版本“Oracle Database 23.3 Free”&#xff08;存储容量受限、内存使用受限&#xff09;。这里就只…

[机缘参悟-129] :个人对人生之苦解决之道的思考

目录 前言&#xff1a; 第1层&#xff1a;环境层 1.1 环境的分类 1.2 理解环境的运作的基本原理 1.3 主动选择适合自己的愉快的环境 1.4 主动构建适合自己的愉快的环境 第2层&#xff1a;生理层 2.1 生理健康和情绪之间的关系 2.2 学习人的生物、生理、健康的基本知识…

MySQL与PostgreSQL对比

对比 许可证 License MySQL 社区版采用 GPL 许可证。Postgres 发布在 PostgreSQL 许可下&#xff0c;是一种类似于 BSD 或 MIT 的自由开源许可。 即便 MySQL 采用了 GPL&#xff0c;仍有人担心 MySQL 归 Oracle 所有&#xff0c;这也是为什么 MariaDB 从 MySQL 分叉出来。 …

学习使用 curl

一、简介 curl 是一个非常有用的网站开发工具。 curl 是常用的命令行工具——客户端&#xff08;client&#xff09;的 URL 工具——curl 用来请求 Web 服务器。 curl 支持多种协议。curl 命令行参数多达几十种。如果熟练的话&#xff0c;完全可以取代 Postman 这一类的图形界…

《Python数据分析技术栈》第06章使用 Pandas 准备数据 02 pandas的组件(Building blocks of Pandas)

02 pandas的组件&#xff08;Building blocks of Pandas&#xff09; 《Python数据分析技术栈》第06章使用 Pandas 准备数据 02 pandas的组件&#xff08;Building blocks of Pandas&#xff09; The Series and DataFrame objects are the underlying data structures in Pa…

数据出境——电商API接口使得电商数据跨境流动已成为趋势

在数字经济的当下&#xff0c;数据已经成为商业决策的关键因素。尤其是电商领域&#xff0c;电商API数据采集不仅关乎企业运营效率&#xff0c;还涉及到用户隐私与国家安全。近年来&#xff0c;随着电商市场的全球化发展&#xff0c;电商数据出境与跨境贸易已成为不可逆转的趋势…

使用Element-Plus 加载style

vue-chrome-extension 简介 chrome扩展开发插件基于vue3、ts、Element Plus、Webpack5、axios、less开发 支持content快速调用chrome对象及axios 详看 pages/content/app.vue 开箱即用chrome插件 特性 基础框架&#xff1a;使用 Vue3/Element PlusTypeScript: 应用程序级 J…

gin图片验证码

在开发的过程中&#xff0c;我们有些接口为了防止被恶意调用&#xff0c;我们会采用加验证码的方式&#xff0c;例如&#xff1a;发送短信的接口&#xff0c;为了防止短信接口被频繁调用造成损失&#xff1b;注册的接口&#xff0c;为了防止恶意注册。在这里为大家推荐一个验证…

C++:特殊类的设计和类型转换

特殊类的设计和类型转换 特殊类的设计1.设计一个类&#xff0c;不能被拷贝2.设计一个类&#xff0c;只能在堆上创建对象3.设计一个类&#xff0c;只能在栈上创建对象4.设计一个类&#xff0c;不能被继承5.单例模式 C的类型转换1. C语言中的类型转换2.C语言类型转换的缺点3.C的强…

vue3-模版引用ref

1. 介绍 概念&#xff1a;通过 ref标识 获取真实的 dom对象或者组件实例对象 2. 基本使用 实现步骤&#xff1a; 调用ref函数生成一个ref对象 通过ref标识绑定ref对象到标签 代码如下&#xff1a; 父组件&#xff1a; <script setup> import { onMounted, ref } …

Android Studio 之 菜单 Menu

选项菜单 OptionsMenu 用xml添加&#xff08;更建议使用&#xff09; 创建一个菜单布局 : 在 res文件下新建一个menu 目录&#xff0c;此时的菜单id为&#xff1a;R.menu.option <?xml version"1.0" encoding"utf-8"?> <menu xmlns:android&…

不同开发语言在进程、线程和协程的设计差异

不同开发语言在进程、线程和协程的设计差异 1. 进程、线程和协程上的差异1.1 进程、线程、协程的定义1.2 进程、线程、协程的差异1.3 进程、线程、协程的内存成本1.4 进程、线程、协程的切换成本 2. 线程、协程之间的通信和协作方式2.1 python如何实现线程通信&#xff1f;2.2 …

【Unity】AB包下载

【Unity】AB包下载 1.使用插件打AB包 a.AB包分类 一般地&#xff0c;将预制体作为AB包资源&#xff0c;不仅需要对预制体本身进行归类&#xff0c;还要对其涉及的动画&#xff08;AnimationClip&#xff09;、动画状态机&#xff08;AnimatorController&#xff09;、以及所…

144.二叉树的前序遍历

递归 public List<Integer> preorderTraversal(TreeNode root) {List<Integer> list new ArrayList<>();traversal(root, list);return list;}public void traversal(TreeNode t, List<Integer> list) {if (t null) {return;}list.add(t.val);trave…