WebSocket 原理与实现
原理
WebSocket 是一种在单个TCP连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据,而不需要客户端发起请求。一旦连接建立,客户端和服务器可以随时互相发送消息。
- 握手阶段:客户端通过HTTP请求升级到WebSocket协议。
- 数据传输阶段:一旦握手成功,双方可以通过TCP连接进行双向通信。
- 关闭阶段:当不再需要通信时,任意一方可以关闭连接。
实现步骤
- 添加依赖:在
pom.xml
中添加Spring Boot WebSocket依赖。 - 配置WebSocket:创建一个配置类来注册WebSocket处理器。
- 实现处理器:创建一个处理器类来处理WebSocket消息。
- 启动应用:创建Spring Boot启动类。
- 前端页面:编写HTML页面,使用JavaScript与WebSocket服务器进行通信。
代码示例
后端( Spring Boot)
java">package com.example.websocketdemo.config;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;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");}
}package com.example.websocketdemo.handler;import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import java.io.IOException;
import java.util.HashSet;
import java.util.Set;public class MyWebSocketHandler extends TextWebSocketHandler {private final Set<WebSocketSession> sessions = new HashSet<>();@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("客户端已连接: " + session.getId());sessions.add(session);}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("收到消息: " + message.getPayload());for (WebSocketSession sess : sessions) {try {sess.sendMessage(new TextMessage("服务器已收到: " + message.getPayload()));} catch (IOException e) {e.printStackTrace();}}}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("客户端已断开连接: " + session.getId());sessions.remove(session);}
}package com.example.websocketdemo;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class WebSocketDemoApplication {public static void main(String[] args) {SpringApplication.run(WebSocketDemoApplication.class, args);}
}
前端(HTML + JavaScript)
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>WebSocket 示例</title>
</head>
<body><h1>WebSocket 示例</h1><input type="text" id="messageInput" placeholder="输入消息"><button onclick="sendMessage()">发送消息</button><div id="messages"></div><script>const socket = new WebSocket('ws://localhost:8080/ws');socket.addEventListener('open', function (event) {console.log('已连接到服务器');});socket.addEventListener('message', function (event) {console.log('收到消息:', event.data);document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;});function sendMessage() {const input = document.getElementById('messageInput');const message = input.value;if (message.trim()) {socket.send(message);input.value = '';}}</script>
</body>
</html>
长轮询 原理与实现
原理
长轮询是一种模拟服务器推送的技术。客户端向服务器发送一个请求,服务器会保持这个连接打开,直到有新的数据可用或者超时。一旦服务器返回响应,客户端立即再次发起请求以保持连接。
- 客户端发起请求:客户端发送HTTP请求到服务器。
- 服务器等待数据:服务器保持连接打开,直到有新数据或超时。
- 服务器返回响应:一旦有新数据或超时,服务器返回响应。
- 客户端处理响应并重新发起请求:客户端处理响应并立即发起新的请求。
实现步骤
- 创建控制器:编写一个控制器来处理长轮询请求和数据更新请求。
- 启动应用:创建Spring Boot启动类。
- 前端页面:编写HTML页面,使用JavaScript发起长轮询请求和发送更新数据。
代码示例
后端(Spring Boot)
java">package com.example.longpollingdemo.controller;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.TimeUnit;@RestController
public class LongPollingController {private final ConcurrentHashMap<String, String> dataStore = new ConcurrentHashMap<>();private final Object lock = new Object();@GetMapping("/poll")public String poll(@RequestParam(value = "timeout", defaultValue = "5000") long timeout) throws InterruptedException {synchronized (lock) {if (dataStore.isEmpty()) {lock.wait(timeout); // 等待新数据或超时}return dataStore.pollFirstEntry().getValue(); // 返回第一条数据并移除}}@PostMapping("/update")public String update(@RequestParam String data) {synchronized (lock) {dataStore.put("latest", data); // 存储新数据lock.notifyAll(); // 通知等待的线程}return "数据更新成功";}
}package com.example.longpollingdemo;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class LongPollingDemoApplication {public static void main(String[] args) {SpringApplication.run(LongPollingDemoApplication.class, args);}
}
前端(HTML + JavaScript)
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>长轮询 示例</title>
</head>
<body><h1>长轮询 示例</h1><button onclick="sendUpdate()">发送更新</button><div id="messages"></div><script>let polling = false;function pollServer() {if (!polling) {polling = true;fetch('/poll?timeout=5000').then(response => response.text()).then(data => {document.getElementById('messages').innerHTML += `<p>收到数据: ${data}</p>`;polling = false;pollServer(); // 立即发起新的请求}).catch(error => console.error('Error:', error));}}function sendUpdate() {const newData = prompt('请输入要发送的数据:');fetch(`/update?data=${newData}`, { method: 'POST' }).then(response => response.text()).then(result => console.log(result)).catch(error => console.error('Error:', error));}// 初始调用pollServer();</script>
</body>
</html>
WebSocket 和长轮询的区别
特性 | WebSocket | 长轮询 |
---|---|---|
连接类型 | 持久连接 | 短暂连接 |
通信方式 | 全双工通信 | 单向通信 |
延迟 | 低延迟 | 较高延迟 |
资源消耗 | 相对较低 | 相对较高 |
适用场景 | 实时交互性强的应用,如聊天、游戏 | 不支持WebSocket的老式浏览器 |
复杂度 | 较高 | 较低 |
兼容性 | 需要浏览器和服务器的支持 | 广泛支持 |
注意事项
WebSocket 注意事项
- 安全性:确保使用WSS(WebSocket Secure)协议进行加密通信。
- 心跳检测:定期发送心跳包以保持连接活跃,防止网络中断导致连接失效。
- 错误处理:处理连接失败、重连等异常情况。
- 负载均衡:在分布式环境中,确保WebSocket连接能够正确路由到正确的服务器实例。
长轮询 注意事项
- 超时设置:合理设置超时时间,避免过长时间的等待影响用户体验。
- 并发控制:限制同时发起的请求数量,避免服务器压力过大。
- 错误处理:处理请求失败、超时等情况,并提供重试机制。
- 性能优化:尽量减少不必要的请求次数,提高响应速度。
总结
- WebSocket 提供了高效的全双工通信机制,适用于实时性要求高的应用场景,但实现相对复杂,需要考虑安全性和稳定性。
- 长轮询 是一种简单有效的模拟服务器推送技术,适用于不支持WebSocket的老式浏览器或简单应用场景,但存在较高的延迟和资源消耗问题。
根据具体需求选择合适的技术方案,如果需要高效实时通信且支持现代浏览器,建议使用WebSocket;如果需要兼容性广且实现简单,可以选择长轮询。