在信息爆炸的时代,用户对网页的期待早已超越了静态内容的展示。实时聊天、股票报价、协同编辑等功能的实现,都离不开服务器与客户端之间持续、高效的数据交互。传统的HTTP请求-响应模型难以满足这种需求,而WebSocket的出现,为构建实时Web应用打开了新的大门。
简介:WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接, 并进行双向数据传输。
传统的HTTP协议是一种单向的请求-响应模型,客户端发起请求,服务器返回响应。这种模式下,服务器无法主动向客户端推送数据,只能依赖客户端不断轮询,效率低下且实时性差。
WebSocket协议的诞生打破了这种僵局。它基于TCP协议,建立起全双工的通信通道,允许服务器和客户端随时随地互相发送消息,无需等待请求,极大地提升了实时性。
客户端发起请求: 客户端使用HTTP协议向服务器发起WebSocket连接请求,并在请求头中包含WebSocket相关信息,例如:
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket // 请求升级协议
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== // 随机生成的key
Sec-WebSocket-Version: 13 // WebSocket版本
服务器响应确认: 服务器收到请求后,如果同意建立WebSocket连接,则返回一个HTTP响应,确认升级协议,例如:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kZZ7TdQihdUh-8= // 根据key计算出的值
至此,WebSocket连接建立,客户端和服务器之间可以进行双向数据传输。
WebSocket使用帧(Frame)作为数据传输的基本单元,每个帧包含以下部分:
当一方需要关闭WebSocket连接时,可以发送一个关闭帧,另一方收到后,应该回复一个关闭帧,然后关闭连接。
Spring Boot 对 WebSocket 提供了良好的支持,使得开发者可以轻松构建实时应用。
在项目的 pom.xml 文件中添加 spring-boot-starter-websocket 依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
使用 @ServerEndpoint 注解创建一个WebSocket处理器,用于处理WebSocket连接:
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
@Component
@ServerEndpoint("/chat") // 指定WebSocket连接的路径
public class ChatEndpoint {
// 建立连接时触发
@OnOpen
public void onOpen(Session session) {
System.out.println("New connection established: " + session.getId());
}
// 收到客户端消息时触发
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println("Received message from " + session.getId() + ": " + message);
// 向客户端发送消息
session.getBasicRemote().sendText("Server received: " + message);
}
// 连接关闭时触发
@OnClose
public void onClose(Session session) {
System.out.println("Connection closed: " + session.getId());
}
// 发生错误时触发
@OnError
public void onError(Session session, Throwable throwable) {
System.out.println("Error occurred: " + throwable.getMessage());
}
}
var websocket = new WebSocket("ws://localhost:8080/chat"); // 创建WebSocket对象,指定连接地址
websocket.onopen = function(event) {
console.log("WebSocket connection opened"); // 连接成功回调
};
websocket.onmessage = function(event) {
console.log("Server message: " + event.data); // 收到消息回调
};
websocket.onclose = function(event) {
console.log("WebSocket connection closed"); // 连接关闭回调
};
function sendMessage() {
var message = document.getElementById("messageInput").value;
websocket.send(message); // 发送消息
}
HTTP协议和WebSocket协议对比:
WebSocket缺点:
服务器长期维护长连接需要一定的成本 各个浏览器支持程度不一 WebSocket 是长连接,受网络限制比较大,需要处理好重连
结论:WebSocket并不能完全取代HTTP,它只适合在特定场景下使用(实时弹幕、网页聊天等)
WebSocket作为HTML5规范的一部分,为构建实时Web应用提供了强大的解决方案。它克服了传统HTTP请求-响应模型的局限性,实现了服务器和客户端之间的双向通信。Spring Boot对WebSocket的良好支持,使得开发者可以更加便捷地构建高性能、实时交互的Web应用。
以上就是关于WebSocket的使用详解,感谢各位看官的观看,下期见,谢谢~
相关教程:HTTP 对比 WebSocket