html5关于WebSocket的一些特点与用例

WebSocket通信机制是一种在单个TCP连接上进行全双工通信的协议,它允许服务器主动向客户端推送数据,而无需等待客户端的请求。以下是WebSocket通信的主要机制:

  1. 握手协议:WebSocket通信的第一步是通过HTTP协议进行握手。当客户端发起WebSocket连接请求时,服务器需要响应并升级连接协议为WebSocket。在握手阶段,客户端和服务器会交换协议版本、支持的子协议、扩展等信息。
  2. 建立连接:一旦握手成功,客户端和服务器之间就建立了持久的双向连接。这个连接是全双工的,意味着客户端和服务器都可以同时发送和接收数据。
  3. 数据传输:一旦连接建立,客户端和服务器就可以通过WebSocket协议直接发送和接收数据帧。这些数据帧可以是文本数据、二进制数据或者控制帧,用于控制连接状态。
  4. 心跳检测:为了确保连接的可靠性,WebSocket连接通常需要进行心跳检测。客户端和服务器会定期发送心跳包来检测连接是否存活。如果一方长时间未收到对方的心跳包,则可以断开连接。

WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。与传统的HTTP协议相比,WebSocket技术具有更高的实时性、更少的网络带宽使用以及双向通信等优点。

此外,WebSocket通信机制还提供了以下几个特点:

  • 较少的控制开销:在连接创建后,服务器和客户端之间交换数据时,用于协议控制的数据包头部相对较小,这有助于减少网络带宽的使用。
  • 更强的实时性:由于协议是全双工的,服务器可以随时主动给客户端下发数据,这使得数据传输的延迟更低,能够更快地将数据传输到客户端。
  • 保持连接状态:与HTTP不同的是,WebSocket需要先创建连接,这就使得其成为一种有状态的协议,在后续通信时可以省略部分状态信息。
  • 更好的二进制支持:WebSocket定义了二进制帧,可以更轻松地处理二进制内容。
  • 可以支持扩展:WebSocket定义了扩展,用户可以扩展协议、实现部分自定义的子协议。

总的来说,WebSocket通信机制提供了一种高效、实时、双向的通信方式,使得客户端和服务器之间的数据交换变得更加简单和高效。

以下是一个简单的WebSocket通信示例,包括客户端(使用JavaScript在浏览器中)和服务器(使用Node.js和ws库)的代码。

服务器端(Node.js + ws)

首先,你需要安装ws库,它是一个流行的WebSocket服务器实现。

npm install ws

然后,你可以创建一个简单的WebSocket服务器:

// server.js
const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('received: %s', message);// 发送消息回客户端ws.send(`Hello, you sent -> ${message}`);});ws.send('Welcome to the WebSocket server!');
});console.log('WebSocket server is running on port 8080');

客户端(HTML + JavaScript)

在客户端,你可以使用原生的WebSocket API来连接服务器并发送/接收消息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Client</title>
</head>
<body><script>const socket = new WebSocket('ws://localhost:8080');socket.onopen = function(event) {console.log('Connected to WebSocket server!');socket.send('Hello from client!');};socket.onmessage = function(event) {console.log('Message from server: ', event.data);};socket.onerror = function(error) {console.error('WebSocket Error: ', error);};socket.onclose = function(event) {if (event.wasClean) {console.log('Connection closed cleanly, code: ' + event.code + ' reason: ' + event.reason);} else {console.error('Connection died');}};
</script></body>
</html>

使用示例

  1. 启动WebSocket服务器:在命令行中运行node server.js
  2. 打开HTML文件:在浏览器中打开包含客户端代码的HTML文件。
  3. 观察控制台输出:在客户端和服务器端的控制台中,你应该能看到相互发送的消息。

这个示例展示了WebSocket通信的基本机制,包括建立连接、发送和接收消息,以及处理连接关闭和错误事件。在实际应用中,你可以根据需要扩展这些功能。

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

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

相关文章

C++ QT设计模式:访问者模式

基本概念 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许你在不改变被访问类的前提下&#xff0c;定义对其进行操作的新操作。 实现的模块有&#xff1a; ObjectStructure&#xff08;对象结构&#xff09;&#xff1a;用于存储…

轻松拿下指针(5)

文章目录 一、回调函数是什么二、qsort使用举例三、qsort函数的模拟实现 一、回调函数是什么 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#x…

计算模型的边界

https://github.com/libigl/libigl.git 这是几何计算库&#xff0c;可以计算出模型的边界 #define _CRT_SECURE_NO_WARNINGS#include <iostream>#include <igl/boundary_loop.h>#include <igl/list_to_matrix.h>int main(){std::vector<std::vector<…

肺部营养“救星”,让每次呼吸更自由

​#肺科营养#朗格力#班古营养#复合营养素#肺部营养# 正常的健康人,每天自由幸福的呼吸。但是对于肺病患者来说,特别是慢阻肺人群,每一次呼吸都可能是一场挑战,每一口气都显得弥足珍贵。 肺病患者号称沉默的“呼吸杀手”,它虽然沉默,但不代表它没能力,除了引起肺功能下降,氧气…

云商店如何让更多企业摘到技术普惠的“果实”?

文 | 智能相对论 作者 | 沈浪 现阶段&#xff0c;越是工业体系发达的地区&#xff0c;越需要加速技术普惠的步伐。比如&#xff0c;在苏州&#xff0c;华为云就在联合当地政府、企业伙伴打造以华为云云商店为重要链接的智能化商业增长底座。 华为云云商店以“电商式”的购物…

Git学习——迁移单一仓库至其他代码托管平台

Git学习——迁移单一仓库至其他代码托管平台 简介流程总结 简介 因需迁移单一代码仓库至其他代码托管平台&#xff0c;要迁移的包括仓库内容以及所有历史记录和推送日志。 本文中的方法同样适用于在同一代码托管平台中克隆仓库。 流程 1. 创建新仓库&#xff1a; 在目的平台…

软件需求规格文档 (SRS) 模版

文章目录 软件需求规格文档 (SRS) - 范例1. 引言1.1 目的1.2 范围1.3 定义、缩写和术语1.4 参考文献1.5 总体描述 2. 系统概述2.1 系统环境2.2 系统功能概述2.3 用户特性2.4 假设与约束 3. 功能需求3.1 用户身份验证模块3.1.1 总体概述3.1.2 具体需求3.1.2.1 登录功能描述3.1.2…

OpenAI春季发布会-免费多模态GPT4O-简介

前言 2024.5.14&#xff0c;OpenAI宣布即将发布一款性能更为强大的大模型GPT4o&#xff0c;虽然没有爆出些超级酷炫无敌吊炸天的新玩意&#xff0c;但是这次的多模态模型&#xff0c;大家可以免费用了~~&#xff08;但是&#xff09; 虽然是免费使用&#xff0c;但官方发布会上…

逆向学习记录--第一天

NSSCTF工坊逆向综合基础第二题 考查知识点&#xff1a;ida的使用与编程能力 wp&#xff1a; 运行一下&#xff0c;没有东西&#xff1b; 查壳是64位&#xff0c;没有壳 直接ida打开 代码解析&#xff1a;输入flag&#xff0c;对flag进行用key进行轮换之后再加12&#xff…

鸿蒙 DevEcoStudio:用户名密码获取保存

【使用首选项实现用户名密码保存获取】 打开src/main/ets/entryability路径下的EntryAbility.ts文件 在 export default class EntryAbility extends UIAbility {onCreate(want, launchParam) {hilog.info(0x0000, testTag, %{public}s, Ability onCreate);下边添加内容&…

C++:左值(引用)右值(引用)

〇、前言 本文会讨论C中的左值&#xff0c;右值&#xff0c;左值引用&#xff0c;右值引用&#xff0c;以及会理清它们之间的关系。 一、左值与右值 &#xff08;一&#xff09;概述 1. 左值是一般指表达式结束后依然存在的持久化对象。右值指表达式结束时就不再存在的临时…

334_C++_std::bind中使用shared_from_this()

std::bind(&HttpClient::getPwd, shared_from_this(), std::placeholders::_1, std::placeholders::_2);[ HttpClient继承自NetObj,NetObj是父类,NetObj受到std::shared_pt

分析 vs2019 c++ 中的 decltype 与 declval

&#xff08;1&#xff09; decltype 可以让推断其参数的类型。按住 ctrl 点击 decltype &#xff0c;会发现无法查阅 其定义 &#xff1a; &#xff08;2&#xff09; 但 STL 库里咱们可以查阅函数 declval 的 定义&#xff0c;很短&#xff0c;摘抄如下&#xff1a; templat…

【氮化镓】高温GaN HEMTs大信号模型——ASM-HEMT

这篇文章的标题是《An ASM-HEMT for Large-Signal Modeling of GaN HEMTs in High-Temperature Applications》&#xff0c;由Nicholas C. Miller等人撰写&#xff0c;发表于2023年9月29日。文章的主要内容是关于一种适用于高温应用的GaN HEMTs&#xff08;高电子迁移率晶体管&…

Java 高级面试问题及答案1

Java 高级面试问题及答案 问题1: 请解释Java中的垃圾回收机制&#xff0c;并描述其工作原理。 答案&#xff1a; Java中的垃圾回收&#xff08;Garbage Collection, GC&#xff09;是一种自动内存管理机制&#xff0c;用于识别和回收不再使用的对象&#xff0c;从而释放内存资…

使用System.Drawing绘制基本几何图形

1.使用System.Drawing绘制一个正方形 using System; using System.Drawing; using System.Windows.Forms;public partial class MyForm : Form {public MyForm(){// 你可以在这里设置Form的双缓冲&#xff0c;以避免绘制时出现的闪烁 this.DoubleBuffered true;}protected o…

LeetCode 每日一题 ---- 【1553.吃掉 N 个橘子的最少天数】

LeetCode 每日一题 ---- 【1553.吃掉 N 个橘子的最少天数】 1553.吃掉N个橘子的最少天数方法&#xff1a;记忆化搜索 1553.吃掉N个橘子的最少天数 方法&#xff1a;记忆化搜索 前两天给树浇水&#xff0c;原来浇的是橘子树哇 今天直接来了个大的【困难】 class Solution {Ma…

Linux——缓冲区

一、问题引入 我们先来看看下面的代码&#xff1a;我们使用了C语言接口和系统调用接口来进行文件操作。在代码的最后&#xff0c;我们还使用fork函数创建了一个子进程。 #include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<sys/wait.h&…

将jar打包成exe可安装程序,并在html页面唤醒

一、exe4j将jar打包成exe 1.exe4j下载 下载地址&#xff1a;https://www.ej-technologies.com/download/exe4j/files 2.exe4j打包jar 2.1. welcome 可以选择历史配置&#xff0c;新增则直接下一步 2.2. project type选择“jar in exe” mode 2.3. application info设置应用…

【接口测试_03课_-接口自动化思维梳理及Requests库应用】

一、通过代码&#xff0c;实现Jmeter 1、项目要放在虚拟环境里面&#xff0c;解释器要使用虚拟环境的 上面是虚拟环境&#xff0c;下面是系统环境。2选一 venv目录 查看当前虚拟环境已存在的依赖包 2、安装Requests依赖包 1&#xff09;安装命令 pip install requests 如果…