WebSocket backend actively calls up the frontend
- Build a maven project pom file dependency
-
- Write front-end code
- illustrate:
Build a maven project pom file dependency
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.3.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.3.5.RELEASE</version>
</dependency>
1 Create a websocket config
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {<!-- -->
@Autowired
private CustomInterceptor customInterceptor;
@Autowired
private MyWebSocketHandler myWebSocketHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {<!-- -->
registry
.addHandler(myWebSocketHandler, "websocket")
.addInterceptors(customInterceptor)
.setAllowedOrigins("*");
}
}
2 Create your own handshake interceptor HandshakeInterceptor
@Component
public class CustomInterceptor implements HandshakeInterceptor {<!-- -->
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {<!-- -->
System.out.println("Handshake begins");
// Get request parameters
URI uri = request.getURI();
String query = uri.getPath();
if (StringUtils.hasText(query)) {<!-- -->
return true;
}
System.out.println("User login has expired");
return false;
}
@Override
public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {<!-- -->
System.out.println("Handshake completed");
}
}
3 Create your own data processor TextWebSocketHandler
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {<!-- -->
/**
*Socket establishment success event
*
* @param session
* @throwsException
*/
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {<!-- -->
// Object token = session.getAttributes().get("token");
// if (token != null) {<!-- -->
// The user connection is successful and placed in the online user cache
WsSessionManager.add("1", session);
// } else {<!-- -->
// throw new RuntimeException("User login has expired!");
// }
}
@Override
public void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {<!-- -->
// Process the received message
System.out.println("Received message: " + message.getPayload());
//Send message to client
session.sendMessage(new TextMessage("Hello, " + message.getPayload() + "!"));
}
/**
* When the socket is disconnected
*
* @param session
* @param status
* @throwsException
*/
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {<!-- -->
Object token = session.getAttributes().get("token");
if (token != null) {<!-- -->
// User exits, remove cache
WsSessionManager.remove(token.toString());
}
}
}
Write front-end code
<!DOCTYPE html>
<html>
<head>
<title>Work order information</title>
<form action="#" onsubmit="return validateForm()">
<label for="category">Category & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;Category:</label>
<select id="category">
<option value="">Please select a category</option>
<option value="value1">Chargeback</option>
<option value="value2">Add item</option>
<option value="value3">Sample unqualified</option>
<option value="value4">Process</option>
<!-- Add other category options -->
</select>
<br>
<label for="submitter">Submitted by:</label>
<input type="text" id="submitter" name="submitter" required>
<br>
<label for="notifier">Notifier:</label>
<input type="text" id="notifier" name="notifier" required>
<br>
<label for="remark">Preparation & amp;nbsp; & amp;nbsp; & amp;nbsp;Note:</label>
<textarea id="remark" name="remark"></textarea>
<br>
<input type="submit" value="submit">
<br>
<div id="result"></div>
</form>
</head>
<body>
<style>
#re {<!-- -->
width: 300px;
height: 50px;
overflow-wrap: break-word;
}
</style>
<script>
function validateForm() {<!-- -->
var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object
xhr.open('POST', 'http://localhost:8080/api/hello', true); // Set the request method, backend interface address and asynchronous flag
xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); // Or set to an allowed domain name
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
xhr.setRequestHeader('Content-Type', 'application/json'); // Set request header (if needed)
var submitterDate = document.getElementById("submitter").value;
var notifierDate = document.getElementById("notifier").value;
var remarkDate = document.getElementById("remark").value;
var data = {<!-- --> submitter: submitterDate, notifier: notifierDate,remark:remarkDate };
xhr.onreadystatechange = function() {<!-- --> // Listen for state change events
if (xhr.readyState === XMLHttpRequest.DONE) {<!-- --> // Determine whether the request is completed
if (xhr.status === 200) {<!-- --> // Determine whether the response status code is 200 (success)
var response = JSON.parse(xhr.responseText); // Parse response data into JSON format
<!-- document.getElementById('result').innerHTML = response; // Display response data on the page -->
} else {<!-- -->
console.error('Request failed:' + xhr.status); // Output error message
}
}
};
xhr.send(JSON.stringify(data)); //Send request
};
//Create WebSocket connection
var socket = new WebSocket("ws://localhost:8080/websocket");
//Event handler function triggered when the connection is opened
socket.onopen = function() {<!-- -->
console.log("WebSocket connected.");
};
//Event handler function triggered when message is received
socket.onmessage = function(event) {<!-- -->
document.addEventListener('DOMContentLoaded', (event) => {<!-- -->
var resultElement = document.getElementById('result');
if (resultElement) {<!-- -->
resultElement.innerHTML = "<title>" + event.data + "</title>";
}
});
};
</script>
</body>
</html>
Description:
When the front end creates a new WebSocket object, it will call its ws://localhost:8080/websocket interface. This will establish a communication link similar to a long connection with the server the day after tomorrow. When sending a message to this link the day after tomorrow, The front-end can process data through the onmessage function. It can be a back-end that returns data to the front-end. The front-end can pop up windows in a timely manner.