揭阳网站开发定制,旅游网站建设报价方案,开发公司承担物业费的规定,中牟网站建设文章目录 WebSocket是什么#xff1f;为什么需要WebSocket?WebSocket和Http连接的区别WebSocket的工作原理基本交互过程#xff1a; Java中的WebSocket支持WebSocket的优势springboot websocket themlef 一个聊天室demopom.xmlWebSocketConfigChatControllerWebController… 文章目录 WebSocket是什么为什么需要WebSocket?WebSocket和Http连接的区别WebSocket的工作原理基本交互过程 Java中的WebSocket支持WebSocket的优势springboot websocket themlef 一个聊天室demopom.xmlWebSocketConfigChatControllerWebControllerchat.htmlapplication.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也可以通过WSSWebSocket Secure协议提供加密和安全性以确保数据的机密性。
WebSocket的工作原理
基本交互过程
1. 握手阶段 客户端通过发送HTTP升级请求到服务器来启动WebSocket连接。服务器收到这个请求后如果支持WebSocket它将回复一个HTTP 101切换协议的响应从而建立WebSocket连接。
2. 数据传输 一旦WebSocket连接建立客户端和服务器可以双向传输数据。无论是客户端还是服务器都可以随时向对方发送消息。这种双向通信的实时性使WebSocket在很多应用场景中非常有用。
3. 关闭连接 当需要关闭WebSocket连接时任一方可以发送一个关闭帧通知对方关闭连接。这确保了连接的正常关闭释放资源。
Java中的WebSocket支持
Java提供了多种库和框架来支持WebSocket技术其中最知名的是Java API for WebSocketJSR-356它是Java EE 7规范的一部分。Java WebSocket API允许你在Java应用程序中创建WebSocket服务器和客户端。
WebSocket的优势
减少开销: 在建立连接后WebSocket不需要像HTTP那样为每个消息发送额外的头信息这降低了通信的总体开销。 实时性: 全双工通信使得消息可以即时发送和接收非常适合需要实时数据交互的应用。 节省资源: 相比于HTTP轮询WebSocket通过维持持久连接减少了频繁建立和断开连接的资源消耗。
springboot websocket themlef 一个聊天室demo pom.xml dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependencyWebSocketConfig
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:thhttp://www.thymeleaf.org
headtitleChat Room/titlescript srchttps://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/stomp-websocket/lib/stomp.min.js/scriptstyle#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 idchatPagediv idmessageArea/divinput typetext idmessageInput placeholderType a message...button onclicksendMessage()Send/button
/div
script th:inlinejavascriptvar 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打开多个界面 在其中一个窗口发送信息 其他窗口都收到了信息
