云端围炉，细说Spring Boot项目与JavaScript简单Websocket使用

Prompt 日志借由今天的教程，我们一同学习了如何在Spring Boot项目中结合JavaScript和Websocket进行高效、实时的通信操作，透过这个过程，相信你对这项技术有了更深入的理解和掌握。赞助商浪浪云，他们的援助使这门课程得以顺利进行。浪浪云一直专注于提供一流的云服务，使我们的学习和开发过程更为便捷、高效。他们的弹性计算、云存储和网络服务都是业界领先的，旨在帮助我们解决在业务扩展

geekrabbit

1243人浏览 · 2024-09-05 20:41:27

geekrabbit · 2024-09-05 20:41:27 发布

在Spring Boot项目中使用WebSocket与JavaScript进行简单的通信，可以通过以下步骤实现。我们将创建一个简单的Spring Boot WebSocket服务器，并使用JavaScript客户端进行连接和通信。

前言

大家朝着充满智能的未来而努力前行！今天，我们很荣幸的推出"Spring Boot项目与Javascript简单Websocket使用"的教程，这份实用且前沿的技术礼包由我们的赞助商浪浪云倾情提供。
他们一直在追求的不仅仅是技术的领先，更是品质的优秀。而说到优质的云服务，怎么能不提我们可靠的浪浪云呢？他们是业界领先的云服务供应商，服务产品涵盖弹性计算、云存储、网络服务等多个方面。他们承诺提供高效、稳定、便捷的服务，以此减轻你的IT管理压力，让你有更多的精力投入到业务的核心部分。浪浪云，将是你开展业务的得力助手。
借由本次由浪浪云赞助的教程，我们会指导你如何优雅地在Spring Boot项目中使用JavaScript和Websocket，让你的项目更具实时性，表现更出众。然而，技术的学习永无止境，我们也希望你能够通过我们的教程，不断挖掘学习的乐趣，扩宽技术的视野。
感谢你与我们一同成长，并感谢浪浪云的大力赞助。一起让我们在云端飞扬，追逐梦想的脚步不停歇！让浪浪云成为你云端历险的得力伙伴，带你领略云计算的无穷魅力！今天的努力，是为了明天的你，更加灵活自如地穿梭在技术的海洋中。官方地址https://langlangy.cn/?i28d989

1. 创建Spring Boot项目

添加依赖

在pom.xml中添加WebSocket依赖：

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

配置WebSocket

创建一个配置类来配置WebSocket：

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 {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

创建WebSocket处理器

创建一个WebSocket处理器来处理消息：

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;

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("Connected: " + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("Received: " + message.getPayload());
        session.sendMessage(new TextMessage("Hello, " + message.getPayload() + "!"));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Disconnected: " + session.getId());
    }
}

2. 创建JavaScript客户端

在您的HTML文件中，添加以下JavaScript代码来连接和通信：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>
<body>
    <h1>WebSocket Example</h1>
    <input type="text" id="messageInput" placeholder="Enter your message">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>

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

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

        ws.onmessage = function(event) {
            var messagesDiv = document.getElementById("messages");
            var message = document.createElement("div");
            message.textContent = "Received: " + event.data;
            messagesDiv.appendChild(message);
        };

        ws.onclose = function() {
            console.log("Disconnected from WebSocket server");
        };

        function sendMessage() {
            var input = document.getElementById("messageInput");
            var message = input.value;
            ws.send(message);
            input.value = "";
        }
    </script>
</body>
</html>