WebSocket轻松实现服务端和客户端通信

后端

2023-06-28 23:37:09

WebSocket：打造实时通信应用的利器

在当今快节奏的数字世界中，实时通信已成为企业和个人不可或缺的一部分。WebSocket 技术为实现这种实时连接提供了强大的解决方案，它通过双向全双工通信在客户端和服务器之间建立持久连接。

WebSocket 的工作原理

WebSocket 是一种基于 TCP 的协议，它弥补了 HTTP 请求-响应模型的不足，后者仅支持单向通信。WebSocket 允许客户端和服务器在单个持久连接上同时发送和接收数据，从而实现实时消息传递。

使用 Spring Boot 搭建 WebSocket 服务端

创建 Spring Boot 项目：
使用 IntelliJ IDEA 或其他 IDE 创建一个新的 Spring Boot 项目并选择合适的版本。

添加 WebSocket 依赖：
在 pom.xml 中添加 Spring WebSocket 依赖：

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

配置 WebSocket 端点：
在 Java 类中创建 WebSocket 端点以处理客户端请求：

@MessageMapping("/message")
@SendTo("/chat")
public String handleMessage(@Payload String message) {
    return message;
}

启动服务端：
运行 Spring Boot 项目以启动服务端，默认监听端口为 8080。

HTML5 WebSocket 客户端

创建 HTML 页面：
创建一个包含 WebSocket 连接代码的 HTML 页面：

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

    socket.onopen = function() {
        console.log("Connected to WebSocket server");
    };

    socket.onmessage = function(event) {
        console.log("Received message: " + event.data);
    };

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

运行 HTML 客户端：
使用浏览器打开 HTML 页面以连接到 WebSocket 服务端并发送和接收消息。

SpringBoot WebSocket 客户端

创建 SpringBoot 客户端项目：
创建一个新的 SpringBoot 项目并添加 WebSocket 依赖：

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

配置 WebSocket 端点：
在 Java 类中配置 WebSocket 端点：

public static void main(String[] args) {
    StompSession stompSession = stompClient.connect(URL, sessionHandler).get();
    stompSession.subscribe("/chat", sessionHandler);
}

private static class MyStompSessionHandler implements StompSessionHandler {
    @Override
    public void handleMessage(StompSession session, StompHeaders headers, byte[] payload) {
        System.out.println("Received message: " + new String(payload));
    }
}