不使用WebSocket 呢
时间: 2024-03-21 14:38:50 浏览: 14
如果不使用 WebSocket,你可以考虑使用 Ajax 技术来实现页面与后端的实时通信。以下是一个简单的 HTML 页面示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Chat</title>
</head>
<body>
<div>
<textarea id="content" rows="10" cols="50"></textarea>
<br>
<input type="text" id="message" /><button onclick="send()">Send</button>
</div>
<script>
function send() {
var message = document.getElementById("message").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/chat");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify({message: message}));
document.getElementById("message").value = "";
}
setInterval(function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/chat");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var content = document.getElementById("content");
var messages = JSON.parse(xhr.responseText);
for (var i = 0; i < messages.length; i++) {
content.value += messages[i] + "\n";
}
}
}
xhr.send();
}, 1000);
</script>
</body>
</html>
```
在这个页面中,我们使用了 setInterval 函数来定时向服务器发送 Ajax 请求,以获取最新的消息列表。我们还定义了一个 send 函数,用于向服务器发送消息。在发送消息时,我们将消息封装成 JSON 格式,并设置请求头的 Content-Type 为 application/json;charset=UTF-8。
接下来,你需要在后端编写一个 ChatController 类,用于处理 Ajax 请求。以下是一个简单的 ChatController 示例代码:
```java
@RestController
public class ChatController {
private static final List<String> messages = new CopyOnWriteArrayList<>();
@PostMapping("/chat")
public void addMessage(@RequestBody Map<String, String> message) {
messages.add(message.get("message"));
}
@GetMapping("/chat")
public List<String> getMessages() {
return new ArrayList<>(messages);
}
@GetMapping("/")
public String index() {
return "index";
}
}
```
在这个类中,我们定义了一个 messages 列表,用于存储所有收到的消息。在 addMessage 方法中,我们将收到的消息添加到 messages 列表中。在 getMessages 方法中,我们返回 messages 列表的副本,以便客户端可以获取到最新的消息列表。最后,我们还定义了一个 index 方法,用于返回 HTML 页面。
需要注意的是,为了让 Spring Boot 支持 Ajax 技术,你需要在项目中添加 spring-boot-starter-web 依赖,并在配置文件中添加以下配置:
```yaml
spring:
mvc:
async:
request-timeout: 30000
```
这样,你就可以在 Spring Boot 中实现一个可以连续发送消息的窗口了。但是需要注意的是,这种方式会产生很多的 HTTP 请求,可能会对服务器的性能造成一定的影响。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)