实时通信—舍我其谁—WebSocket 入门
|
admin
2025年5月25日 22:11
本文热度 294
|
一、WebSocket 是什么？
WebSocket 是一种网络通信协议，它提供了一种在客户端和服务器之间建立持久连接的方式，允许双方进行全双工通信。与传统的 HTTP 协议相比，WebSocket 可以在连接建立后，让服务器主动向客户端发送数据，而无需客户端频繁发起请求。
1.1 WebSocket 的工作原理
建立连接：客户端通过浏览器发起 WebSocket 请求，服务器接受请求后建立连接。
数据传输：连接建立后，客户端和服务器可以通过 WebSocket 隧道双向传输数据。
关闭连接：通信完成后，客户端或服务器可以关闭连接。
1.2 WebSocket 的优势
二、WebSocket 的使用场景
WebSocket 适用于需要实时交互的场景，以下是一些典型的应用场景：
2.1 实时聊天应用
2.2 实时监控系统
2.3 游戏互动
2.4 即时通知
三、WebSocket 的注意事项
3.1 兼容性
3.2 安全性
3.3 性能优化
四、WebSocket 的实现示例
4.1 前端代码示例
以下是一个简单的前端 WebSocket 示例，使用 HTML 和 JavaScript 实现：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>WebSocket 示例</title></head><body> <h1>WebSocket 客户端</h1> <button onclick="connect()">连接服务器</button> <button onclick="sendMessage()">发送消息</button> <button onclick="closeConnection()">关闭连接</button> <p id="messages"></p>
<script> var webSocket = null;
function connect() { if ('WebSocket' in window) { webSocket = new WebSocket("ws://localhost:18801/webSocket"); webSocket.onopen = function() { console.log("已连接"); }; webSocket.onmessage = function(event) { document.getElementById("messages").innerHTML += event.data + "<br>"; }; webSocket.onclose = function() { console.log("连接已关闭"); }; webSocket.onerror = function() { console.log("发生错误"); }; } else { alert("您的浏览器不支持 WebSocket！"); } }
function sendMessage() { if (webSocket) { webSocket.send("Hello, Server!"); } }
function closeConnection() { if (webSocket) { webSocket.close(); } } </script></body></html>
4.2 后端代码示例（Spring Boot）
以下是一个简单的 Spring Boot WebSocket 服务端示例：
4.2.1 添加依赖
在 pom.xml 文件中添加 WebSocket 依赖：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency>
4.2.2 配置 WebSocket
创建一个配置类 WebSocketConfig：
import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); }}
4.2.3 创建 WebSocket 服务端类
创建一个 WebSocket 服务端类 WebSocketServer：
import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Component;
import javax.websocket.*;import javax.websocket.server.ServerEndpoint;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint("/webSocket")@Componentpublic class WebSocketServer { private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class); private static final CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<>();
@OnOpen public void onOpen(Session session) { sessionPools.add(session); log.info("新连接加入：" + session.getId()); }
@OnClose public void onClose(Session session) { sessionPools.remove(session); log.info("连接关闭：" + session.getId()); }
@OnMessage public void onMessage(String message, Session session) { log.info("收到来自客户端的消息：" + message); for (Session sess : sessionPools) { if (sess.isOpen()) { try { sess.getBasicRemote().sendText("服务器收到消息：" + message); } catch (IOException e) { e.printStackTrace(); } } } }
@OnError public void onError(Session session, Throwable throwable) { log.error("发生错误：" + throwable.getMessage()); }}
五、总结
WebSocket 是一种强大的实时通信技术，适用于需要实时交互的场景。通过上述示例，你可以快速入门 WebSocket 的开发。WebSocket 的优势在于其高效性和实时性，能够显著提升用户体验，减少服务器负担。在实际开发中，需要注意兼容性、安全性和性能优化等问题，以确保系统的稳定运行。
阅读原文：原文链接
该文章在 2025/5/26 10:26:24 编辑过
400 186 1886
