在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依赖：
xml
<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：
java
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处理器来处理消息：
java
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代码来连接和通信：
html
<!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>3. 运行Spring Boot应用
启动Spring Boot应用，确保它在8080端口运行（或根据需要更改端口）。
4. 访问客户端页面
打开浏览器，访问包含JavaScript客户端的HTML文件。输入消息并点击"Send"按钮，您应该会看到服务器返回的消息。
总结
Prompt 日志
亲爱的朋友们，感谢您的阅读与参与！借由今天的教程，我们一同学习了如何在Spring Boot项目中结合JavaScript和Websocket进行高效、实时的通信操作，透过这个过程，相信你对这项技术有了更深入的理解和掌握。
我们要特别感谢我们的赞助商浪浪云，他们的援助使这门课程得以顺利进行。浪浪云一直专注于提供一流的云服务，使我们的学习和开发过程更为便捷、高效。他们的弹性计算、云存储和网络服务都是业界领先的，旨在帮助我们解决在业务扩展和资源配置中遇到的挑战。
最后，无论您正处在技术的哪个阶段，掌握了哪些技能，或是正在面对哪些挑战，浪浪云和我们都愿意伴你左右，为你提供力所能及的支持和帮助。让我们一起，借由学习和实践，探索云计算的可能性，提升我们的专业技能，并为未来的成功打好基础！
