WebSocket：超越平凡，探索交互式 Web 世界

见解分享

2023-12-05 18:42:20

前言

在这个信息时代，人们对即时性和交互性的需求不断攀升。WebSocket 技术作为一种轻量级协议，横空出世，为我们开启了 Web 应用程序交互式开发的新纪元。

WebSocket，它是一种基于 TCP 协议的全双工通信协议，允许客户端和服务器端进行双向通信，从而实现实时数据交换。这使得它非常适合构建聊天室、在线游戏、协作编辑器等交互式 Web 应用程序。

WebSocket 的优势

1. 双向通信

WebSocket 支持客户端和服务器端同时发送和接收消息，实现了真正意义上的双向通信。

2. 实时性

WebSocket 能够实现毫秒级的数据传输，为用户带来实时交互的体验。

3. 轻量级

WebSocket 是一个非常轻量级的协议，通信开销很小，适用于各种设备和网络环境。

WebSocket 在 Spring 中的使用

Spring Framework 提供了对 WebSocket 的支持，使得我们可以轻松地在 Spring Boot 应用程序中使用 WebSocket。

1. 依赖引入

首先，我们需要在项目中引入 Spring Boot WebSocket 的依赖：

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

2. WebSocket 配置

然后，我们需要在 Spring Boot 应用程序中配置 WebSocket。我们可以通过在 application.properties 文件中添加以下配置来实现：

spring.websocket.path=/websocket

3. WebSocket 控制器

接下来，我们需要创建一个 WebSocket 控制器来处理客户端的连接和消息。我们可以通过创建一个继承自 WebSocketController 的控制器来实现：

@Controller
public class WebSocketController implements WebSocketController {

    @Override
    public void handleWebSocketRequest(WebSocketHandler webSocketHandler, HttpServletRequest request) throws Exception {
        webSocketHandler.handleRequest(request, null);
    }

}

4. WebSocket 处理程序

最后，我们需要创建一个 WebSocket 处理程序来处理客户端发送的消息。我们可以通过创建一个继承自 WebSocketHandler 的处理器来实现：

@Component
public class WebSocketHandler implements WebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("WebSocket 连接已建立！");
    }

    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        System.out.println("收到消息：" + message.getPayload());
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("WebSocket 连接出现错误！");
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        System.out.println("WebSocket 连接已关闭！");
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }

}

5. WebSocket 页面

最后，我们需要在前端页面中添加 WebSocket 连接代码，以便客户端能够与服务器端建立 WebSocket 连接。

<script>
    var websocket = new WebSocket("ws://localhost:8080/websocket");

    websocket.onopen = function() {
        console.log("WebSocket 连接已建立！");
    };

    websocket.onmessage = function(event) {
        console.log("收到消息：" + event.data);
    };

    websocket.onclose = function() {
        console.log("WebSocket 连接已关闭！");
    };

    websocket.onerror = function() {
        console.log("WebSocket 连接出现错误！");
    };

    function sendMessage() {
        var message = document.getElementById("message").value;
        websocket.send(message);
    }
</script>

<form>
    <input type="text" id="message" placeholder="请输入消息">
    <input type="button" value="发送" onclick="sendMessage()">
</form>