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

WebSocket 协议

原文地址: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;并进行双向数据传输。…...

[mysql]mysql排序和分页

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

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

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

一次渲染十万条数据:前端技术优化(上)

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

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

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

python中网络爬虫框架

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

GEC6818初次连接使用

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

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

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

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

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

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

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

往证是什么意思

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

Camunda流程引擎并发性能优化

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

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…...

【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 本章小结 第二章…...

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

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

力扣之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…...

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

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

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 >…...

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.查看列名…...

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

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

Java伪终端完全实战:如何用pty4j实现跨平台命令行交互

Java伪终端完全实战&#xff1a;如何用pty4j实现跨平台命令行交互 【免费下载链接】pty4j Pty for Java 项目地址: https://gitcode.com/gh_mirrors/pt/pty4j 在Java应用中集成命令行交互功能&#xff0c;你是否曾面临跨平台兼容性差、进程管理复杂、终端控制能力有限等…...

探索式学习:UMA模型在水分解催化中的应用指南

探索式学习&#xff1a;UMA模型在水分解催化中的应用指南 【免费下载链接】ocp Open Catalyst Projects library of machine learning methods for catalysis 项目地址: https://gitcode.com/GitHub_Trending/oc/ocp 突破传统计算瓶颈&#xff1a;UMA模型的核心价值解析…...

细胞转染优化方向(一):PEI转染效率优化指南【曼博生物】

摘要&#xff1a;PEI转染是AAV、慢病毒及重组蛋白生产中的常用方法。本文从培养基、细胞状态、密度及质粒质量等关键因素出发&#xff0c;系统总结影响PEI转染效率的核心参数及优化思路。 关键词&#xff1a;PEI转染、AAV生产、细胞转染优化、细胞密度、培养基选择、质粒质量一…...

Serge模型管理终极指南:如何快速下载、配置和优化AI模型

Serge模型管理终极指南&#xff1a;如何快速下载、配置和优化AI模型 【免费下载链接】serge A web interface for chatting with Alpaca through llama.cpp. Fully dockerized, with an easy to use API. 项目地址: https://gitcode.com/gh_mirrors/se/serge Serge是一个…...

ReactPy服务端渲染终极指南:如何在Python中构建现代Web应用

ReactPy服务端渲染终极指南&#xff1a;如何在Python中构建现代Web应用 【免费下载链接】reactpy Its React, but in Python 项目地址: https://gitcode.com/gh_mirrors/re/reactpy ReactPy是Python中构建用户界面的革命性库&#xff0c;让你无需JavaScript就能创建现代…...

GLM-OCR与LSTM网络融合实践:提升连续手写体文本识别效果

GLM-OCR与LSTM网络融合实践&#xff1a;提升连续手写体文本识别效果 最近在折腾一个挺有意思的项目&#xff0c;朋友那边有个需求&#xff0c;要识别一些手写的病历和处方。你懂的&#xff0c;医生那笔迹&#xff0c;龙飞凤舞&#xff0c;连笔连得飞起&#xff0c;传统的OCR工…...

MySQL视图与子查询的那些事儿:从报错1349看数据库设计的最佳实践

MySQL视图与子查询深度解析&#xff1a;从报错1349看高效数据库设计 在数据库开发与维护过程中&#xff0c;视图(View)和子查询(Subquery)是两种极为常用的技术手段。它们能够简化复杂查询、提高代码复用性&#xff0c;并为数据安全提供额外保障。然而&#xff0c;当这两种技术…...

Auto-Photoshop-StableDiffusion-Plugin中文适配终极指南:让AI绘画更懂中文用户

Auto-Photoshop-StableDiffusion-Plugin中文适配终极指南&#xff1a;让AI绘画更懂中文用户 【免费下载链接】Auto-Photoshop-StableDiffusion-Plugin A user-friendly plug-in that makes it easy to generate stable diffusion images inside Photoshop using either Automat…...

别只写对话了!Ren‘Py高级玩家都在用的5个隐藏技巧:转场、音效、变量与存档

别只写对话了&#xff01;RenPy高级玩家都在用的5个隐藏技巧&#xff1a;转场、音效、变量与存档 当你已经能够用RenPy制作基础视觉小说时&#xff0c;是否发现自己的作品总像"电子版小说"&#xff1f;真正的商业级作品会通过动态转场、环境音效、分支剧情等设计让玩…...

洛谷-入门4-数组3

P2141 [NOIP 2014 普及组] 珠心算测验 题目背景 NOIP2014 普及 T1 题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术。珠心算训练&#xff0c;既能够开发智力&#xff0c;又能够为日常生活带来很多便利&#xff0c;因而在很多学校得到普及。 某学…...