Springboot项目搭建简单的websocket

北城小生

3464人浏览 · 2024-10-28 15:19:00

北城小生 · 2024-10-28 15:19:00 发布

一、引包

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

二、config配置

注意：我这俩整理了两个config没有进行整合处理，你们使用的时候可以两个同时存在，也可以自己进行整合处理

1、WebSocketConfig

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.*;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
//config.setBrokerDeliveryMode(MessageBrokerRegistry.BrokerDeliveryMode.BROADCASTING);
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket-endpoint").withSockJS();
}

}
2、WebSocketConfigPersistence

import com.inprod.inpro.demos.handle.MyWebSocketHandler;
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 WebSocketConfigPersistence implements WebSocketConfigurer {

private final MyWebSocketHandler webSocketHandler;

public WebSocketConfigPersistence(MyWebSocketHandler webSocketHandler) {
this.webSocketHandler = webSocketHandler;
}

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

import org.springframework.stereotype.Component;
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;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {

private final CopyOnWriteArraySet<WebSocketSession> sessions = new CopyOnWriteArraySet<>();

@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
sessions.add(session);
System.out.println("New session added, session id: " + session.getId());
}

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
System.out.println("Received message: " + message.getPayload());
// 在这里你可以处理客户端发来的消息，比如进行广播等
}

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

/**
* 向所有页面发送信息
* @param message
* @throws IOException
*/
public void sendMessageToAll(String message) throws IOException {
for (WebSocketSession session : sessions) {
System.out.println("sendId"+session.getId());
if (session.isOpen()) {
//String ss = "7361698d-a757-4849-6560-fe2c8b15948a";
session.sendMessage(new TextMessage(message));
}
}
}
}
四、测试handler

package com.inprod.inpro.demos.handle;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.io.IOException;

/**
* @ClassName : MessageHandler
* @Description :
* @Author : JHY
* @Date: 2024-10-24 08:41
*/

@RestController
public class MessageHandler {
@Resource
private MyWebSocketHandler webSocketHandler;
@MessageMapping("/send")
@SendTo("/topic/messages")
public String sendMessage() {
return "这是前台请求后台得反馈数据";
}
@GetMapping("/sendHeml")
public void sendHeml(){
try {
String message = "这是发送得websocket测试消息" + System.currentTimeMillis();
webSocketHandler.sendMessageToAll(message);
} catch (IOException e) {
throw new RuntimeException(e);
}
}
}
五、前端页面

<!DOCTYPE html>
<html>
<head>
<title>WebSocket Demo</title>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
</head>
<body>
<div>
<input type="text" id="messageInput" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
</div>
<ul id="messagesList"></ul>
<script>
//-------------前台页面向后台发送请求并获得相应展示在页面-------------------
var socket = new SockJS('/websocket-endpoint');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
stompClient.subscribe('/topic/messages', function (message) {
console.log(2222,message.body)
var messagesList = document.getElementById('messagesList');
var listItem = document.createElement('li');
listItem.textContent = message.body;
messagesList.appendChild(listItem);
});
});
function sendMessage() {
var messageInput = document.getElementById('messageInput');
stompClient.send('/app/send', {}, messageInput.value);
messageInput.value = '';
}
//--------------------接收后台发送得websocket信息并展示在页面----------------
const ws = new WebSocket('ws://localhost:10086/ws');
ws.onopen = function() {
console.log('Connection opened');
};
ws.onmessage = function(event) {
console.log(123,event.data)
var messagesList = document.getElementById('messagesList');
var listItem = document.createElement('li');
listItem.textContent = event.data;
messagesList.appendChild(listItem);
};
ws.onclose = function() {
console.log('Connection closed');
};
ws.onerror = function(error) {
console.error('WebSocket Error: ', error);
};
</script>
</body>
</html>