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

WebSocket 入门详解

news 来源：原创 2025/7/22 11:09:28

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、Three.js、WebGL、Go
经验经验：6年+ 前端开发经验，专注于图形渲染和AI技术
开源项目：智简未来晓智元宇宙、数字孪生引擎
大家好！我是 [晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！

什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上提供全双工通信的协议。它由 IETF 于 2011 年标准化，被广泛应用于实时应用程序中，例如在线聊天、游戏、股票行情更新等。

相比于传统的 HTTP 请求-响应模式，WebSocket 具有以下特点：

全双工通信：客户端和服务器可以随时互相发送消息。
低延迟：由于协议头部较小且无需频繁建立连接，通信效率更高。
状态保持：WebSocket 连接一旦建立，可以长期保持，避免了 HTTP 的无状态性问题。

WebSocket 的工作原理

握手阶段：
- WebSocket 连接始于客户端通过 HTTP 向服务器发起的 WebSocket 握手请求。
- 请求包含 Upgrade 和 Connection 头部，用于标识升级协议。
- 服务器接受请求后，会返回 101 Switching Protocols 响应码，完成协议切换。
通信阶段：
- 握手成功后，客户端和服务器之间建立一个持续的双向通信通道。
- 数据通过帧（frames）的形式传输，帧头部较小，效率高。

WebSocket 与 HTTP 的区别

特性	WebSocket	HTTP
协议类型	全双工	半双工
连接保持	长连接	每次请求需要新连接
消息方向	双向通信	单向通信（请求-响应）
头部大小	小（适合频繁通信）	大（适合偶发性通信）
应用场景	实时应用（聊天、游戏等）	静态资源获取

如何使用 WebSocket？

以下是一个简单的 WebSocket 示例：

安装 websocket 包

pnpm i websocket

客户端代码

// 0 链接还没有建立
// 1 链接建立
// 2 链接正在关闭
// 3 链接已关闭
const websocket = new WebSocket('ws://localhost:8080/');websocket.onopen = function () {console.log(websocket.readyState);
};const btn = document.getElementById('btn');
btn.addEventListener('click', () => {const value = document.getElementById('text').value;websocket.send(value);
});websocket.onmessage = function (msg) {console.log(msg.data);
};

服务端代码（Node.js 示例）

const WebSocketServer = require('websocket').server;
const http = require('http');const server = http.createServer(function (request, response) {response.writeHead(404);response.end();
});server.listen(8080, function () {console.log('server run in 8080');
});const wsServer = new WebSocketServer({httpServer: server,autoAcceptConnections: false,
});wsServer.on('request', function (request) {const connection = request.accept();connection.on('message', function (msg) {connection.send(msg.utf8Data + 'world');});
});

应用场景

在线聊天：如即时通讯工具、聊天室。
实时数据推送：如股票行情、体育比分。
多人游戏：如在线实时对战游戏。
物联网：如设备状态监控、实时数据采集。

WebSocket 的优势与局限

优势

实时性强：适合对低延迟和高频数据更新有需求的应用。
高效通信：相比 HTTP 请求，数据传输更高效。
持续连接：减少了频繁建立和断开连接的开销。

局限

浏览器兼容性：较老版本的浏览器可能不支持 WebSocket。
复杂性：需要更多的开发和运维工作，比如连接管理和安全性保障。
防火墙限制：部分防火墙可能阻止 WebSocket 连接。

总结

WebSocket 为实时通信提供了一个高效的解决方案，广泛应用于各种需要低延迟、双向数据传输的场景。虽然它存在一些局限性，但通过合理的架构设计和技术选型，可以充分发挥其优势，为用户带来更优质的体验。

关注作者

在这里插入图片描述

WebSocket 入门详解

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙技术栈：JavaScript、React、Three.js、WebGL、Go 经验经验：6年前端开发经验，专注于图形渲染和AI技术开源项目：智简未来晓智元宇宙、数字孪生引擎大家好！…...

编程日记 2025/7/22 11:09:28

只针对 https://ouc-sz.chinahrt.com/center/MyExam import requests import time import random import pandas as pd from openpyxl import load_workbookexcel_file rC:\Users\N3verL4nd\Desktop\exam_answers.xlsx# 定义请求头，包含 Authorization headers {…...

编程日记 2025/7/22 17:13:09

uniapp通过v-if进行判断时,会出现闪屏？【已解决】

1.问题：按钮切换时，通过v-if来判断，会出现闪烁情况，影响用户体验 2.v-if 闪烁问题可能的原因 ‌条件切换频繁‌：如果 v-if 指令的条件在短时间内频繁切换，会导致元素不断被销毁和重新创建，从而…...

编程日记 2025/7/22 23:16:57

jmeter设置tps、响应时间监测时间间隔

jmeter设置tps、响应时间监测时间间隔思路： 1、设置tps和响应时间插件的采集时间间隔，然后运行jmeter脚本； 2、先按默认配置跑出jtl文件保存下来，再添加tps和响应时间插件，设置采集时间间隔后，导入jtl文件…...

编程日记 2025/7/22 11:55:07

Android Notification 问题：Invalid notification (no valid small icon)

问题描述与处理策略 1、问题描述 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.my.notifications/com.my.notifications.MainActivity}: java.lang.IllegalArgumentException: Invalid notification (no valid small icon): Notification(chan…...

编程日记 2025/7/22 23:04:30

Kotlin 协程基础知识总结四 —— Flow

异步流 Flow 主要内容： 认识：特性、构建器与上下文、启动、取消与取消检测特性、缓冲操作符：过渡操作符、末端操作符、组合、扁平异常：异常处理、完成 1、认识 1.1 如何异步返回多个值挂起函数可以异步返回单个值&#xff0c…...

编程日记 2025/7/21 23:32:48

Ubuntu24.04安装NVIDIA驱动及工具包

Ubuntu24.04安装NVIDIA驱动及工具包安装nvidia显卡驱动安装cuda驱动安装cuDNN安装Anaconda 安装nvidia显卡驱动 NVIDIA 驱动程序（NVIDIA Driver）是专为 NVIDIA 图形处理单元（GPU）设计的软件，它充当操作系统与硬件之间…...

编程日记 2025/7/22 23:01:06

雷电模拟器安装LSPosed

雷电模拟器最新版支持LSPosed。记录一下安装过程首先到官网下载并安装最新版，我安装的时候最新版是9.1.34.0，64位然后开启root和系统文件读写然后下载magisk-delta-6并安装 ,这个是吾爱破解论坛提供的，号称适配安卓7以上所有机型&#x…...

编程日记 2025/7/22 22:59:47

基于深度学习(HyperLPR3框架)的中文车牌识别系统-搭建开发环境

本篇内容为搭建开发环境。包括：python开发环境，Qt/C开发环境，以及用到的各个库的安装和配置。一、Python开发环境搭建与配置 1、下载并安装Anaconda 我没有用最新的版本，安装的是 Anaconda3-2021.05-Windows-x86_64.exe&#…...

编程日记 2025/7/22 2:03:31

TCP 为什么采用三次握手和四次挥手以及 TCP 和 UDP 的区别

1. TCP 为什么采用三次握手和四次挥手采用三次握手的原因： 确认双方的收发能力。第一次握手，客户端发送 SYN 报文，告诉服务器自身具备发送数据的能力，第二次握手，服务器回应 SYN ACK 报文，表名自己既能…...

编程日记 2025/7/22 12:50:59

Apriori关联规则算法 HNUST【数据分析技术】(2025)

1.理论知识 Apriori是一种常用的数据关联规则挖掘方法，它可以用来找出数据集中频繁出现的数据集合。该算法第一次实现在大数据集上的可行的关联规则提取，其核心思想是通过连接产生候选项及其支持度，然后通过剪枝生成频繁项集。 Apriori算法的…...

编程日记 2025/7/22 12:35:32

Sqoop的使用

每个人的生活都是一个世界，即使最平凡的人也要为他那个世界的存在而战斗。 ——《平凡的世界》目录一、sqoop简介 1.1 导入流程 1.2 导出流程二、使用sqoop 2.1 sqoop的常用参数 2.2 连接参数列表 2.3 操作hive表参数 2.4 其它参数三、sqoop应用 - 导入…...

编程日记 2025/7/22 12:47:22

华为 IPD，究竟有什么特点？（一）

关注作者 （一）华为版 IPD 特点一：一定要让研发转身为作战部队冲到前台的研发，应主动拉通公司上下游，向前抓需求，向后支撑可制造性、可服务性，并推动制造、服务的改进。 1）研发从…...

编程日记 2025/7/22 12:58:05

Go快速开发框架2.6.0版本更新内容快速了解

GoFly企业版框架2.6.0版本更新内容较多，为了大家能够快速了解，本文将把更新内容列出详细讲解。本次更新一段时间以来大伙反馈的问题，并且升级后台安全认证机制，增加了RBAC权限管理及系统操作日志等提升后台数据安全性。更新明细…...

编程日记 2025/7/22 13:12:28

C++的第一个程序

前言在学习c之前，你一定还记得c语言的第一个程序当时刚刚开始进行语言学习因此告诉到，仅仅需要记住就可以 #include <stdio.h>int main(){printf("Hello World");return 0; }而对于c中的第一个程序，似乎有所变化 C的…...

编程日记 2025/7/22 12:41:39

《机器学习》线性回归模型实现

目录一、一元线性回归模型 1、数据 2、代码 3、结果二、多元线性回归模型 1、数据 2、代码 3、结果一、一元线性回归模型 1、数据 2、代码 # 导入所需的库 import pandas as pd # 用于数据处理和分析 from matplotlib import pyplot as plt # 用于数据可视化 fr…...

编程日记 2025/7/22 13:34:52

蓝桥杯速成教程｛三｝（adc,i2c,uart）

目录一、adc 原理图编辑引脚配置 Adc通道使能配置实例测试编辑效果显示案例程序 badc 按键相关函数测量频率占空比 main 按键的过程显示界面的过程二、IIC通信-eeprom 原理图AT24C02 引脚配置不可用状态，用的软件IIC 官方库移植 At24c02手册编辑…...

编程日记 2025/7/22 17:39:23

【Agent】Chatbot、Copilot与Agent如何帮助我们的提升效率？

人工智能（AI）技术的迅猛发展正在深刻改变我们的生活和工作方式。你是否曾想过，未来的工作场景会是什么样子？AI的崛起不仅仅是科技的进步，更是我们生活方式的革命。今天，我们将深入探讨三种主要的AI能力&…...

编程日记 2025/7/22 13:25:12

PostgreSQL 数据库连接

title: PostgreSQL 数据库连接 date: 2024/12/29 updated: 2024/12/29 author: cmdragon excerpt: PostgreSQL是一款功能强大的开源关系数据库管理系统，在现代应用中广泛应用于数据存储和管理。连接到数据库是与PostgreSQL进行交互的第一步，这一过程涉及到多个方面，包括连…...

编程日记 2025/7/22 14:00:44

C++ 设计模式：中介者模式（Mediator Pattern）

链接：C 设计模式链接：C 设计模式 - 门面模式链接：C 设计模式 - 代理模式链接：C 设计模式 - 适配器中介者模式（Mediator Pattern）是行为型设计模式之一，它的主要目的是通过一个中介者对象来…...

编程日记 2025/7/22 13:28:40

计算机网络期末复习

目录第一章-概述第二章-物理层第三章-数据链路层第四章-网络层第五章-运输层第六章-应用层试卷郑州轻工业大学--计算机网络（谢希仁-第八版）--期末复习重点题型及试卷如果有答案错乱或者不对的地方请告知一下，感谢&#xff0…...

编程日记 2025/7/22 5:38:52

JUC并发工具---线程协作

信号量能被FixedThreadPool代替吗 Semaphore信号量控制需要限制访问量的资源，没有获取到信号量的线程会被阻塞 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.Semaphore;public class Sem…...

编程日记 2025/7/22 13:46:45

SkyWalking java-agent 是如何工作的，自己实现一个监控sql执行耗时的agent

Apache SkyWalking 是一个开源的应用性能监控 (APM) 工具，支持分布式系统的追踪、监控和诊断。SkyWalking Agent 是其中的一个重要组件，用于在服务端应用中收集性能数据和追踪信息，并将其发送到 SkyWalking 后端服务器进行处理和展示。 SkyW…...

编程日记 2025/7/22 13:52:49

Linux 常用命令 - pwd 【显示当前工作目录】

简介 pwd 命令来源于 “print working directory”，即“打印当前工作目录”。这个命令的最主要功能就是显示当前用户所在的完整目录路径。在实际工作中我们经常会频繁在各个目录下进行切换，为了快速获取当前我们所在的目录，可以使用该命令进…...

编程日记 2025/7/22 14:02:16

如何在 Ubuntu 上安装 PyTorch

简介 PyTorch 因其易用性、动态计算图和高效性而日益流行，成为实现深度学习模型的首选。如果你想探索这个工具并学习如何在 Ubuntu 上安装 PyTorch，本指南将对你有所帮助！ 在本教程中，我们将引导你完成在 Ubuntu 系统上使用 Pip…...

编程日记 2025/7/22 14:06:53

redis优化

在高并发、高性能、高可用系统中，Redis 的优化至关重要。以下是一些在面试中可以详细说明的 Redis 优化策略，以及具体的实践经验和技术亮点： 1. 数据模型与结构设计优化使用合适的数据结构 ：根据业务需求选择合适的 Redis 数据结…...

编程日记 2025/7/22 14:12:26

QT的信号和槽页面的应用

完善对话框，点击登录弹出对话框，如果账号和密码匹配，则弹出信息对话框，给出提示”登录成功“，提供一个Ok按钮，用户点击Ok后，关闭登录界面，跳转到其他界面如果账号和密码不匹配&…...

编程日记 2025/7/22 14:14:44

Jmeter自学【8】- 使用JMeter模拟设备通过MQTT发送数据

今天使用jmeter推送数据到MQTT，给大家分享一下操作流程。一、安装JMeter 参考文档：Jmeter自学【1】- Jmeter安装、配置二、安装MQTT插件 1、下载插件我的Jmeter版本是5.6.3，用到的插件是：mqtt-xmeter-2.0.2-jar-with-depe…...

编程日记 2025/7/21 17:35:46

深度学习任务中的 `ulimit` 设置优化指南

深度学习任务中的 ulimit 设置优化指南 1. 什么是 ulimit？2. 深度学习任务中的关键 ulimit 设置2.1 max locked memory（-l）2.2 open files（-n）2.3 core file size（-c）2.4 stack size&#xff08…...

编程日记 2025/7/22 14:29:32

C++(Qt)软件调试---VS性能探查器（27）

文章目录 [toc]1 概述🐜2 VS工具说明2.1 使用场景2.2 工具适用项目 3 CPU使用率4 内存分析4.1 调试模式下分析内存4.2 非调试模式下分析内存 5 相关地址🐐 更多精彩内容👉内容导航 👈👉C软件调试 👈 1 概述…...

编程日记 2025/7/22 14:26:04

Spring源码_05_IOC容器启动细节

前面几章，大致讲了Spring的IOC容器的大致过程和原理，以及重要的容器和beanFactory的继承关系，为后续这些细节挖掘提供一点理解基础。掌握总体脉络是必要的，接下来的每一章都是从总体脉络中， 去研究之前没看的一些重要…...

编程日记 2025/7/22 14:27:52

【c语言】简单的c程序设计

内存 1byte8bit 1KB1024byte 1MB1024byte 1G1024MB 1T1024G 变量变量可以由数字、字母和下划线组成且不能以数字开头任何不满足条件的变量都是非法变量，如含有特殊字符的变量等变量不能含有空白字符，如空格、换行符等变量区分大小写变量不能是c语言…...

编程日记 2025/7/22 19:19:53

k8s dashboard可视化操作界面的安装

一、官方安装方法根据官网的安装配置可以选择如下安装： kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.0.0/aio/deploy/recommended.yaml 二、添加阿里云加速进行安装 #修改recommended.yaml拉取镜像的链接 vim recommended.yam…...

编程日记 2025/7/22 14:33:03

鸿蒙项目云捐助第三十一讲云捐助项目云前台显示商品列表

鸿蒙项目云捐助第三十一讲云捐助项目云前台显示商品列表前面完成了云数据库后台的商品批量添加，这里需要把数据放在分类导航页面中显示。一、云前台显示商品列表这里需要把商品列表显示在MyNavSliderBar的组件中,MyNavSliderBar组件是通过首页路由实现的,在项…...

编程日记 2025/7/22 14:34:47

【rustdesk】客户端和服务端的安装和部署（自建服务器，docker，远程控制开源软件rustdesk）

【rustdesk】客户端和服务端的安装和部署（自建服务器，docker） 一、官方部署教程 https://rustdesk.com/docs/zh-cn/client/mac/ 官方服务端下载地址 https://github.com/rustdesk/rustdesk-server/releases 我用的docker感觉非常方便&am…...

编程日记 2025/7/22 14:40:10

Flink源码解析之：如何根据算法生成StreamGraph过程

Flink源码解析之：如何根据算法生成StreamGraph过程在我们日常编写Flink应用的时候，会首先创建一个StreamExecutionEnvironment.getExecutionEnvironment()对象，在添加一些自定义处理算子后，会调用env.execute来执行定义好的Flin…...

编程日记 2025/7/22 14:43:39

【Spring MVC 核心机制】核心组件和工作流程解析

在 Web 应用开发中，处理用户请求的逻辑常常会涉及到路径匹配、请求分发、视图渲染等多个环节。Spring MVC 作为一款强大的 Web 框架，将这些复杂的操作高度抽象化，通过组件协作简化了开发者的工作。无论是处理表单请求、生成动态页面&#x…...

编程日记 2025/7/22 19:23:39

2、Bert论文笔记

Bert论文 1、解决的问题2、预训练微调2.1预训练微调概念2.2深度双向2.3基于特征和微调（预训练下游策略） 3、模型架构4、输入/输出1.输入：2.输出：3.Learned Embeddings(学习嵌入)1. **Token Embedding**2. **Position Embedding**3…...

编程日记 2025/7/22 14:54:11

hadoop搭建

前言一般企业中不会使用master slave01 slave02来命名 vmware创建虚拟机打开vmware软件，新建虚拟机典型稍后安装系统选择centos7 虚拟机名称和安放位置自行选择（最小化安装消耗空间较少） 默认磁盘大小即可自定义硬件选择centos7的i…...

编程日记 2025/7/22 16:09:57

19_HTML5 Web Workers --[HTML5 API 学习之旅]

HTML5 Web Workers 是一种允许 JavaScript 在后台线程中运行的技术，从而不会阻塞用户界面或其他脚本的执行。通过使用 Web Workers，你可以执行复杂的计算任务而不影响页面的响应速度，提升用户体验。 Web Workers 的特点 Web Workers 是 HTM…...

编程日记 2025/7/21 16:32:38

【PCIe 总线及设备入门学习专栏 5.1 -- PCIe 引脚 PRSNT 与热插拔】

文章目录 OverviewPRSNT 与热插拔PRSNT 硬件设计 Overview Spec 定义的热插拔是把一个PCIe卡（设备）从一个正在运行的背板或者系统中插入/或者移除。这个过程需要不影响系统的其他功能。插入的新的设备可以正确工作。显然，这里面需要考虑的问…...

编程日记 2025/7/22 15:51:30

使用docker compose安装gitlab

使用docker compose安装gitlab GitLab简介设置GITLAB_HOME路径创建docker挂载目录获取可用的GitLab版本编写docker-compose.yml文件启动docker基础配置 GITLAB_OMNIBUS_CONFIG修改配置中文设置数据库配置系统邮箱配置 GitLab简介 GitLab是一个基于Git的开源项目&#xff0c…...

编程日记 2025/7/22 16:00:00

性能中 UV、PV 和并发量的关系

在性能测试中，UV（独立访客数）、PV（页面浏览量）和并发量是重要的指标，用于评估系统的负载能力。它们之间关系紧密，需要通过合理的计算和示例进行说明。 1. 概念解析 UV（Unique Visito…...

编程日记 2025/7/22 9:16:55

Go语言zero项目服务恢复与迁移文档

## 一. 服务器环境配置在迁移和配置项目时，首先需要确保服务器环境正确配置。以下是配置步骤： ### 1. 安装 Go 语言环境首先，确保 Go 语言环境已经安装，并且配置正确。执行以下步骤： # 下载 Go 语言安装包 wge…...

编程日记 2025/7/22 16:29:28

Redis - Token JWT 概念解析及双token实现分布式session存储实战

Token 定义：令牌，访问资源接口（API）时所需要的资源凭证一、Access Token 定义：访问资源接口（API）时所需要的资源凭证，存储在客户端组成组成部分说明uid用户唯一的身份标识time…...

编程日记 2025/7/22 16:44:19

QT中使用OpenGL function

1.前言 QT做界面编程很方便，QTOpenGL的使用也很方便，因为QT对原生的OpenGL API进行了面向对象化的封装。如： 函数：initializeOpenGLFunctions()...... 类：QOpenGLVertexArrayObject、QOpenGLBuffer、QOpenGLShader…...

编程日记 2025/7/22 15:24:43

STM32-笔记18-呼吸灯

1、实验目的使用定时器 4 通道 3 生成 PWM 波控制 LED1 ，实现呼吸灯效果。频率：2kHz，PSC71，ARR499 利用定时器溢出公式周期等于频率的倒数。故Tout 1/2KHZ；Ft 72MHZ PSC71（喜欢设置成Ft的倍数&…...

编程日记 2025/7/22 17:20:24

MAC M4安装QT使用国内镜像源在线安装

MAC M4安装QT使用国内镜像源在线安装一、下载安装包1. 访问[https://www.qt.io/](https://www.qt.io/)下载在线安装包2. 下载结果二、创建QT账户，安装的时候需要三、安装1. 终端打开安装包2. 指定安装源3. 运行安装完的QT 一、下载安装包 1. 访问https://www.qt.…...

编程日记 2025/7/22 17:18:59