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

WebSocket 协议

news 2026/2/10 20:17:04

原文地址：xupengboo

WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

传统的一些网站推送技术，使用的技术是Ajax轮询。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

image-20240912092015069

聊天室案例，index.html ：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket 聊天室</title>
</head>
<body><h1>WebSocket 聊天室</h1><div><input id="messageInput" type="text" placeholder="输入消息..." /><button onclick="sendMessage()">发送</button></div><div><h2>聊天记录：</h2><pre id="chatLog"></pre></div><script>// 连接到 WebSocket 服务器const ws = new WebSocket('ws://localhost:8080/chat');// 监听 WebSocket 打开事件ws.onopen = function() {console.log('WebSocket 连接已打开');};// 监听 WebSocket 消息事件ws.onmessage = function(event) {console.log('收到服务器消息:', event.data);document.getElementById('chatLog').textContent += event.data + '\n';};// 发送消息到服务器function sendMessage() {const message = document.getElementById('messageInput').value;ws.send(message);}// 监听 WebSocket 错误事件ws.onerror = function(error) {console.error('WebSocket 错误:', error);};// 监听 WebSocket 关闭事件ws.onclose = function() {console.log('WebSocket 连接已关闭');};</script>
</body>
</html>

通过 SpringBoot 实现后台，WebSocket 通信服务：

  1. 引入 WebSocket 依赖：
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  1. 定义一个 WebSocket Handler 继承类：
package com.itholmes.demo.websocket;import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import java.util.Collections;
import java.util.HashSet;
import java.util.Set;/*** @Author xupengboo* @Date 2024/9/12 9:25* @Describe*/
public class ChatWebSocketHandler extends TextWebSocketHandler {// 用于存储所有客户端连接private final Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());// 当客户端连接时触发@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {sessions.add(session);System.out.println("新连接：" + session.getId());}// 当收到客户端消息时触发@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {String payload = message.getPayload();System.out.println("收到消息：" + payload);// 将消息广播给所有连接的客户端for (WebSocketSession webSocketSession : sessions) {if (webSocketSession.isOpen()) {webSocketSession.sendMessage(new TextMessage("客户端 " + session.getId() + " 说：" + payload));}}}// 当连接关闭时触发@Overridepublic void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) throws Exception {sessions.remove(session);System.out.println("连接关闭：" + session.getId());}}
  1. 配置 WebSocketConfigurer 类：
package com.itholmes.demo.websocket;import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;/*** @Author xupengboo* @Date 2024/9/12 9:26* @Describe*/
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 注册 WebSocket 处理器和路径registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*");  // 允许跨域}}
  1. 启动服务，配合前端测试即可。

相关文章：

WebSocket 协议

原文地址&#xff1a;xupengboo WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在 WebSocket API 中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff0c;并进行双向数据传输。…...

编程日记 2024/9/18 22:45:44

[mysql]mysql排序和分页

#排序和分页本身是两块内容,因为都比较简单,我们就把它分到通一个内容里. #1排序: SELECT * FROM employees #我们会发现,我们没有做排序操作,但是最后出来的107条结果还是会按顺序发出,而且是每次都一样.这我们就有一个疑惑了,现在我们的数据库是根据什么来排序的,在我们没有进…...

编程日记 2024/9/18 22:44:10

开源 AI 智能名片 S2B2C 商城小程序中的全渠道供应策略

摘要&#xff1a;本文深入探讨在开源 AI 智能名片 S2B2C 商城小程序的情境下&#xff0c;全渠道供应的运行机制。阐述各环节企业相互配合的重要性&#xff0c;重点分析零售企业在其中的关键作用&#xff0c;包括协调工作、信息传递、需求把握等方面&#xff0c;旨在实现高效的全…...

编程日记 2024/9/18 22:43:06

一次渲染十万条数据：前端技术优化（上）

今天看了一篇文章&#xff0c;写的是一次性渲染十万条数据的方法&#xff0c;本文内容是对这篇文章的学习总结&#xff0c;以及知识点补充。 在现代Web应用中&#xff0c;前端经常需要处理大量的数据展示&#xff0c;例如用户评论、商品列表等。直接渲染大量数据会导致浏览器性…...

编程日记 2024/9/18 22:41:03

springboot实训学习笔记（5）(用户登录接口的主逻辑)

接着上篇博客学习。上篇博客是已经基本完成用户模块的注册接口的开发以及注册时的参数合法性校验。具体往回看了解的链接如下。 springboot实训学习笔记&#xff08;4&#xff09;(Spring Validation参数校验框架、全局异常处理器)-CSDN博客文章浏览阅读576次&#xff0c;点赞7…...

编程日记 2024/9/18 22:40:02

python中网络爬虫框架

Python 中有许多强大的网络爬虫框架&#xff0c;它们帮助开发者轻松地抓取和处理网页数据。最常用的 Python 网络爬虫框架有以下几个&#xff1a; 1. Scrapy Scrapy 是 Python 中最受欢迎的网络爬虫框架之一&#xff0c;专为大规模网络爬取和数据提取任务而设计。它功能强大、…...

编程日记 2024/9/18 22:39:01

GEC6818初次连接使用

目录 1.开发板资源接口​编辑​编辑 2.安装 SecureCRT工具 2.1SecureCRT相关问题 3.连接开发板 4.开发板文件传输 4.1串口传输 rx 从电脑下载文件到开发板 sz 从开发板把文件发送到电脑 4.2U盘/SD卡传输 4.3网络传输[重点] 5.运行传到开发板的可执行文件 6.开发板网络…...

编程日记 2024/9/18 22:33:56

解释下不同Gan模型之间的异同点

生成对抗网络&#xff08;GAN, Generative Adversarial Network&#xff09;是一类强大的生成模型。随着时间的推移&#xff0c;研究人员提出了许多不同的 GAN 变体来改善原始模型的性能或针对特定任务进行优化。下面将解释一些常见的 GAN 变体&#xff0c;并讨论它们的异同点。…...

编程日记 2024/9/18 22:31:48

Hadoop的一些高频面试题 --- hdfs、mapreduce以及yarn的面试题

文章目录 一、HDFS1、Hadoop的三大组成部分2、本地模式和伪分布模式的区别是什么3、什么是HDFS4、如何单独启动namenode5、hdfs的写入流程6、hdfs的读取流程7、hdfs为什么不能存储小文件8、secondaryNameNode的运行原理9、hadoop集群启动后离开安全模式的条件10、hdfs集群的开机…...

编程日记 2024/9/18 22:28:41

Day99 代码随想录打卡|动态规划篇--- 01背包问题

题目&#xff08;卡玛网T46&#xff09;&#xff1a; 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等等&am…...

编程日记 2024/9/18 22:27:40

往证是什么意思

“往证”通常是在数学证明中使用的一种方法&#xff0c;尤其是在证明某个结论的相反&#xff08;即否定&#xff09;是错误的情况下。具体来说&#xff0c;就是假设结论不成立&#xff0c;然后通过逻辑推理展示出这种假设导致矛盾&#xff0c;从而得出原结论必然成立。 举例说…...

编程日记 2024/9/18 22:24:36

Camunda流程引擎并发性能优化

文章目录 Camunda流程引擎一、JobExecutor1、工作流程2、主要作用 二、性能问题1、实际场景&#xff1a;2、性能问题描述3、总结 三、优化方案方案一&#xff1a;修改 Camunda JobExecutor 源码以实现租户 ID 隔离方案二&#xff1a;使用 max-jobs-per-acquisition 参数控制上锁…...

编程日记 2024/9/18 22:23:35

spring springboot 日志框架

一、常见的日志框架 JUL、JCL、Jboss-logging、logback、log4j、log4j2、slf4j.... 注意&#xff1a;SLF4j 类似于接口 Log4j &#xff0c;Logback 都是出自同一作者之手 JUL 为apache 公司产品 Spring&#xff08;commons-logging&#xff09;、Hibernate&#xff08;jboss…...

编程日记 2024/9/18 22:21:30

【D3.js in Action 3 精译_022】3.2 使用 D3 完成数据准备工作

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可视化最佳实践&#xff08;下&#xff09;1.4 本章小结 第二章…...

编程日记 2024/9/18 22:20:29

电脑怎么禁用软件?5个方法速成，小白必入！

电脑禁用软件的方法多种多样&#xff0c;以下是五种简单易行的方法. 适合不同需求的用户&#xff0c;特别是电脑小白。 1. 使用任务管理器禁用启动项 操作步骤&#xff1a;按下“Ctrl Shift Esc”组合键&#xff0c;打开任务管理器。 切换到“启动”选项卡&#xff0c;找到…...

编程日记 2024/9/18 22:18:26

力扣之181.超过经理收入的员工

文章目录 1. 181.超过经理收入的员工1.1 题干1.2 准备数据1.3 题解1.4 结果截图 1. 181.超过经理收入的员工 1.1 题干 表&#xff1a;Employee -------------------- | Column Name | Type | -------------------- | id | int | | name | varchar | | salary | int | | mana…...

编程日记 2024/9/18 22:12:02

C++语法应用：从return机制看返回指针，返回引用

前言 编程是极其注重实践的工作,学习的同时要伴随代码 引入 此前对返回指针和引用有一些纠结&#xff0c;从return角度来观察发生了什么。 return机制 函数中return表示代码结束&#xff0c;如果return后面有其他代码将不被执行。 return发生了值转移&#xff0c;return后面的…...

编程日记 2024/9/18 22:09:50

Linux5-echo,＞,tail

1.echo命令 echo是输出命令&#xff0c;类似printf 例如&#xff1a;echo "hello world"&#xff0c;输出hello world echo pwd&#xff0c;输出pwd的位置。是键盘上~ 2.重定向符> >> >指把左边内容覆盖到右边 echo hello world>test.txt >…...

编程日记 2024/9/18 22:08:49

sqlgun靶场训练

1.看到php&#xff1f;id &#xff0c;然后刚好有个框&#xff0c;直接测试sql注入 2.发现输入1 union select 1,2,3#的时候在2处有回显 3.查看表名 -1 union select 1,group_concat(table_name),3 from information_schema.tables where table_schemadatabase()# 4.查看列名…...

编程日记 2024/9/18 22:05:44

简化登录流程，助力应用建立用户体系

随着智能手机和移动应用的普及&#xff0c;用户需要在不同的应用中注册和登录账号&#xff0c;传统的账号注册和登录流程需要用户输入用户名和密码&#xff0c;这不仅繁琐而且容易造成用户流失。 华为账号服务(Account Kit)提供简单、快速、安全的登录功能&#xff0c;让用户快…...

编程日记 2024/9/18 22:02:40

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/9 16:05:07

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2026/1/29 7:31:17

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52