websocket学习笔记【springboot+websocket聊天室demo】

文章目录

  • WebSocket是什么？
  • 为什么需要WebSocket?
  • WebSocket和Http连接的区别
  • WebSocket的工作原理
    • 基本交互过程：
  • Java中的WebSocket支持
  • WebSocket的优势
  • springboot + websocket + themlef 一个聊天室demo
    • pom.xml
    • WebSocketConfig
    • ChatController
    • WebController
    • chat.html
    • application.yml
  • 测试效果

WebSocket是什么？

WebSocket是一种基于TCP协议的双向通信协议，它允许服务器和客户端之间建立持久的连接。与传统的HTTP请求/响应模型不同，WebSocket连接一旦建立，可以在不断开的情况下双向传输数据。这使得WebSocket在实时应用中非常有用，例如在线游戏、即时聊天、实时协作工具等。

为什么需要WebSocket?

尽管HTTP协议广泛应用于网络通信，但它存在一个关键的局限性：通信只能由客户端发起。这种方式在需要频繁的数据更新和实时交互的场景中效率低下。例如，在一个聊天应用中，使用HTTP协议，客户端需要不断地发送请求以检查新消息，这种“轮询”机制浪费了大量的资源。WebSocket应运而生，解决了这个问题，通过建立一个持久的连接，实现了更高效的数据交换。

WebSocket和Http连接的区别

  • 通信方式：
    HTTP： HTTP是一种无状态协议，每次请求都是独立的，即使是在同一个客户端和服务器之间的多次请求。客户端向服务器发送请求，服务器处理请求并返回响应，然后连接关闭。HTTP通常是一种请求/响应协议。
    WebSocket： WebSocket是一种全双工协议，允许双方建立持久性的连接，以便在连接建立后双向传输数据。WebSocket支持实时通信，允许服务器和客户端随时发送数据，而无需为每个消息建立新的连接。

  • 连接建立：
    HTTP： HTTP连接是临时的，每个请求都需要建立新的TCP连接，完成后即刻关闭。这导致了额外的延迟，尤其是在需要频繁通信的实时应用中。
    在这里插入图片描述

    WebSocket： WebSocket连接是持久的，一旦建立，它可以一直保持开放状态，不需要在每次通信之间重新建立连接。这减少了延迟，并使它适用于实时应用。
    在这里插入图片描述

  • 头部信息：
    HTTP： HTTP请求和响应通常包括大量的头部信息，用于描述请求的属性、内容类型等。这些头部信息会占用额外的带宽，尤其是在小数据传输中显得不必要。
    WebSocket： WebSocket头部信息相对较少，因为它专注于数据传输，减少了不必要的开销。

  • 用途：
    HTTP： HTTP主要用于请求和获取资源，如网页、图像、文档等。每个HTTP请求都是短暂的，没有保持连接的需求。
    WebSocket： WebSocket适用于需要实时通信、双向数据交换的应用，如在线游戏、实时聊天、实时协作工具、监控系统等。

  • 安全性：
    HTTP： HTTP本身不提供加密，因此数据可以被拦截和窥探。但HTTPS通过TLS/SSL协议提供了数据加密和安全性。
    WebSocket： WebSocket也可以通过WSS（WebSocket Secure）协议提供加密和安全性，以确保数据的机密性。

WebSocket的工作原理

基本交互过程：

1. 握手阶段： 客户端通过发送HTTP升级请求到服务器来启动WebSocket连接。服务器收到这个请求后，如果支持WebSocket，它将回复一个HTTP 101切换协议的响应，从而建立WebSocket连接。

2. 数据传输： 一旦WebSocket连接建立，客户端和服务器可以双向传输数据。无论是客户端还是服务器，都可以随时向对方发送消息。这种双向通信的实时性使WebSocket在很多应用场景中非常有用。

3. 关闭连接： 当需要关闭WebSocket连接时，任一方可以发送一个关闭帧，通知对方关闭连接。这确保了连接的正常关闭，释放资源。

Java中的WebSocket支持

Java提供了多种库和框架来支持WebSocket技术，其中最知名的是Java API for WebSocket（JSR-356），它是Java EE 7规范的一部分。Java WebSocket API允许你在Java应用程序中创建WebSocket服务器和客户端。

WebSocket的优势

减少开销: 在建立连接后，WebSocket不需要像HTTP那样为每个消息发送额外的头信息，这降低了通信的总体开销。
实时性: 全双工通信使得消息可以即时发送和接收，非常适合需要实时数据交互的应用。
节省资源: 相比于HTTP轮询，WebSocket通过维持持久连接减少了频繁建立和断开连接的资源消耗。

springboot + websocket + themlef 一个聊天室demo

在这里插入图片描述

pom.xml

		<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

WebSocketConfig

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/chat").withSockJS();}@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {registry.enableSimpleBroker("/topic");registry.setApplicationDestinationPrefixes("/app");}
}

ChatController

@Controller
public class ChatController {@MessageMapping("/sendMessage")@SendTo("/topic/public")public String sendMessage(String message) {return message;}}

WebController

@Controller
public class WebController {@GetMapping("/chat")public String chat() {return "chat"; // Thymeleaf 模板文件的名称（不包含 .html 扩展名）}
}

chat.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Chat Room</title><script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/stomp-websocket/lib/stomp.min.js"></script><style>#messageArea {height: 300px;overflow-y: auto;border: 1px solid #cccccc;padding: 10px;margin-bottom: 10px;}.chat-message {margin-bottom: 10px;border: 1px solid #dddddd;padding: 5px;border-radius: 5px;}</style>
</head>
<body>
<div id="chatPage"><div id="messageArea"></div><input type="text" id="messageInput" placeholder="Type a message..."><button onclick="sendMessage()">Send</button>
</div>
<script th:inline="javascript">var stompClient = null;function connect() {var socket = new SockJS('/chat');stompClient = Stomp.over(socket);stompClient.connect({}, function (frame) {stompClient.subscribe('/topic/public', function (message) {showMessage(message.body);});});}function sendMessage() {var message = document.getElementById('messageInput').value;stompClient.send("/app/sendMessage", {}, message);document.getElementById('messageInput').value = '';}function showMessage(message) {var messageArea = document.getElementById('messageArea');var messageElement = document.createElement('div');messageElement.classList.add('chat-message');messageElement.innerText = message;messageArea.appendChild(messageElement);}connect();
</script>
</body>
</html>

application.yml

server:port: 8081spring:thymeleaf:mode: HTMLcache: trueprefix: classpath:/templates/encoding: UTF-8suffix: .htmlcheck-template-location: truetemplate-resolver-order: 1

测试效果

在浏览器访问http://localhost:8081/chat，打开多个界面
在这里插入图片描述
在其中一个窗口发送信息
在这里插入图片描述
其他窗口都收到了信息
在这里插入图片描述

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

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

相关文章

PDF/X、PDF/A、PDF/E：有什么区别，为什么有这么多格式？

PDF/X、PDF/A、PDF/E：有什么区别，为什么有这么多格式？

PDF 是一种通用文件格式&#xff0c;允许用户演示和共享文档&#xff0c;无论软件、硬件或操作系统如何。多年来&#xff0c;已经创建了多种 PDF 子类型来满足各个行业的不同需求。让我们看看一些最流行的格式&#xff1a;PDF/X、PDF/A 和 PDF/E。 FastReport .net下载 PDF/X …
阅读更多...
火山引擎云原生存储加速实践

火山引擎云原生存储加速实践

在火山引擎相关的业务中绝大部分的机器学习和数据湖的算力都运行在云原生 K8s 平台上。云原生架构下存算分离和弹性伸缩的计算场景&#xff0c;极大的推动了存储加速这个领域的发展&#xff0c;目前业界也衍生出了多种存储加速服务。但是面对计算和客户场景的多样性&#xff0c…
阅读更多...
Go fsnotify简介

Go fsnotify简介

fsnotify是一个用Go编写的文件系统通知库。它提供了一种观察文件系统变化的机制&#xff0c;例如文件的创建、修改、删除、重命名和权限修改。它使用特定平台的事件通知API&#xff0c;例如Linux上的inotify&#xff0c;macOS上的FSEvents&#xff0c;以及Windows上的ReadDirec…
阅读更多...
Leetcode——岛屿的最大面积

Leetcode——岛屿的最大面积

1. 题目链接&#xff1a;695. 岛屿的最大面积 2. 题目描述&#xff1a; 给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求两个 1 必须在 水平或者竖直的四个方向上 相邻。你可以假设 grid 的四个边缘都…
阅读更多...
[Mac软件]Adobe XD(Experience Design) v57.1.12.2一个功能强大的原型设计软件

[Mac软件]Adobe XD(Experience Design) v57.1.12.2一个功能强大的原型设计软件

Adobe XD是一个直观、强大的UI/UX开发工具&#xff0c;旨在设计、原型设计、用户之间共享材料&#xff0c;以及通过数字技术设计交互。Adobe XD为您提供开发网站、应用程序、语音界面、游戏界面、电子邮件模板等所需的一切。 无限制地创建 设计各种互动&#xff0c;创建看起来…
阅读更多...
01序列 卡特兰数

01序列 卡特兰数

解法&#xff1a; 将01序列置于坐标轴上&#xff0c;起始点为原点。0表示向右走&#xff0c;1表示向上走。这样就可以将前缀0的个数不少于1的个数就可以转换为路径上的点&#xff0c;横坐标大于纵坐标&#xff0c;也就是求合法路径个数。 注意题目mod的数是质数&#xff0c;所…
阅读更多...
YOLOv5独家原创改进：最新原创WIoU_NMS改进点，改进有效可以直接当做自己的原创改进点来写，提升网络模型性能精度

YOLOv5独家原创改进：最新原创WIoU_NMS改进点，改进有效可以直接当做自己的原创改进点来写，提升网络模型性能精度

💡该教程为属于《芒果书》📚系列，包含大量的原创首发改进方式, 所有文章都是全网首发原创改进内容🚀 💡本篇文章为YOLOv5独家原创改进：独家首发最新原创WIoU_NMS改进点，改进有效可以直接当做自己的原创改进点来写，提升网络模型性能精度。 💡对自己数据集改进有效…
阅读更多...
开发知识点-Vue-Electron

开发知识点-Vue-Electron

Electron ElectronVue打包.exe桌面程序 ElectronVue打包.exe桌面程序 为了不报错 卸载以前的脚手架 npm uninstall -g vue-cli安装最新版脚手架 cnpm install -g vue/cli创建一个 vue 随便起个名 vue create electron-vue-example (随便起个名字electron-vue-example)进入 创建…
阅读更多...
Node.js详解

Node.js详解

一、是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎&#xff08;Google Chrome 的内核&#xff09;&#xff0c;利用事件驱动、非阻塞和异步输入输出模型等技术提高性能 可以理解为 Node.js 就是一个服务器端的、非阻塞式I/…
阅读更多...
关于Chrome中F12调试Console输入多行

关于Chrome中F12调试Console输入多行

在chrome 浏览器中使用console调试的时&#xff0c;如果想在console中输入多行代码&#xff0c;需要进行换行。 这时我们可以使用 [ Shift Enter ] 。也叫&#xff1a; 软回车。
阅读更多...
C 语言实现 UDP

C 语言实现 UDP

广播 发送广播信息&#xff0c;局域网中的客户端都可以接受该信息 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <string.h> #include <arpa/inet.h>int main() {// 1.创建一个通信的socketint fd socket(PF_INET, …
阅读更多...
S32DS踩坑日记五-bootloader跳转APP时触发DefaultISR

S32DS踩坑日记五-bootloader跳转APP时触发DefaultISR

S32DS踩坑日记五-bootloader跳转APP时触发DefaultISR bootloader和APP由另一位同事开发过程中&#xff0c;被导师叫回去写论文了。 由于项目不急&#xff0c;接手后未作任何改动&#xff0c;后面硬件工程师手工焊了几块电路版&#xff0c;需要刷上程序测试电路板。然后就遇到了…
阅读更多...
Java 通过POI快速导入带图片的excel并且图片不会丢失

Java 通过POI快速导入带图片的excel并且图片不会丢失

## 通过POI快速导入带图片的excel并且图片不会丢失导入带图片的excel，这里也是研究了很久，在之前的博客中也有说明过，在项目使用过程中，发现很多时候导入响应很慢，而且每次导入图片都会丢失几张，所以又花了点时间研究修改了下，具体如下： 这边在导入时，通过自定义注解…
阅读更多...
nginx启动命令

nginx启动命令

普通启动 切换到nginx安装目录的sbin目录下&#xff0c;执行&#xff1a;./nginx 通过配置文件启动 ./nginx -c /usr/local/nginx/conf/nginx.conf /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 其中-c是指定配置文件,而且配置文件路径必须指定绝对路…
阅读更多...
MyBatis-Plus 系列

MyBatis-Plus 系列

目录&#xff1a; 一、 Spring Boot 整合 MyBatis Plus 二、MyBatisPlus 多数据源配置 三、MybatisPlus —注解汇总 四、MyBatis Plus—CRUD 接口 五、MyBatis-Plus 条件构造器 六、MyBatis-Plus 代码生成器 MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09…
阅读更多...
Dart 3.2 更新，Flutter Web 的未来越来越明朗

Dart 3.2 更新，Flutter Web 的未来越来越明朗

参考原文&#xff1a;https://medium.com/dartlang/dart-3-2-c8de8fe1b91f 本次跟随 Flutter 3.16 发布 的 Dart 3.2 &#xff0c;包含有&#xff1a;私有 final 字段的非空改进、新的 interop 改进、对 DevTools 中的扩展支持、以及对 Web 路线图的更新&#xff0c;包括对 Was…
阅读更多...
解决requests库中session.verify参数失效的问题

解决requests库中session.verify参数失效的问题

在使用requests库进行HTTP请求时&#xff0c;如果在环境变量中设置了’REQUESTS_CA_BUNDLE’&#xff0c;并且在session对象中设置了verify参数为False&#xff0c;那么API请求会使用环境变量中的值而不是session对象中的值。这是因为在requests库中&#xff0c;当session对象中…
阅读更多...
壹基金爱泽瑞金 安全家园物料配送忙

壹基金爱泽瑞金 安全家园物料配送忙

11月9日到10日&#xff0c;瑞金赋能公益陆续收到壹基金、阿里巴巴公益爱心网友捐赠的社区志愿者救援队队伍物资&#xff0c;马不停蹄地把物资配送到河背街社区、金都社区和沙洲坝镇等项目点&#xff0c;扎实稳妥推进项目有序执行。 在这次物资配送中&#xff0c;志愿者冒雨前行…
阅读更多...
DC电源模块对效率有什么要求？

DC电源模块对效率有什么要求？

BOSHIDA DC电源模块对效率有什么要求&#xff1f; DC电源模块是现代科技中非常重要的组成部分&#xff0c;它是将交流电转换为直流电的装置&#xff0c;可以提供稳定的电源给各种设备和系统使用。效率是DC电源模块的一个关键性能指标&#xff0c;直接影响着模块的整体性能和效…
阅读更多...
ssd202d-logo-cmd_bootlogo分析

ssd202d-logo-cmd_bootlogo分析

cmd_bootlogo.c运行过程 common/autoboot.c:593: disp_logo(0); sprintf(cmd_str, "bootlogo %d 1 0 0 0", logo_id); do_display函数 获取对应结构体，里面有各种参数
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发