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

在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 {@Overridepublic 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 {@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("Connected: " + session.getId());}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("Received: " + message.getPayload());session.sendMessage(new TextMessage("Hello, " + message.getPayload() + "!"));}@Overridepublic 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>