SpringMVC的WebSocket实现一对一聊天,html页面上显示最新的十行聊天信息
时间: 2023-05-25 11:03:20 浏览: 50
1. 首先要在配置文件中开启WebSocket支持:
```xml
<mvc:annotation-driven/>
<bean class="org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean">
<property name="maxTextMessageBufferSize" value="8192"/>
<property name="maxBinaryMessageBufferSize" value="8192"/>
</bean>
```
2. 编写WebSocket处理器,继承自TextWebSocketHandler,重写其中的几个方法:
```java
@Component
public class MyHandler extends TextWebSocketHandler {
private static List<String> messages = new ArrayList<>();
private static final int MAX_MESSAGE_NUM = 10;
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// 获取消息内容并保存到列表中
String msg = message.getPayload();
messages.add(msg);
// 限制最多只能保存10条消息
if (messages.size() > MAX_MESSAGE_NUM) {
messages = messages.subList(messages.size() - MAX_MESSAGE_NUM, messages.size());
}
// 发送消息给所有连接的客户端
session.sendMessage(new TextMessage(msg));
for (WebSocketSession sess : sessions) {
// 如果发送的不是自己发的消息,则将消息推送给其他客户端
if (!sess.getId().equals(session.getId())) {
sess.sendMessage(new TextMessage(msg));
}
}
}
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 添加新连接的客户端到sessions列表中
sessions.add(session);
// 将最新的10条消息发送给客户端
String content = String.join("<br/>", messages);
session.sendMessage(new TextMessage(content));
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
// 从sessions列表中移除断开连接的客户端
sessions.remove(session);
}
}
```
3. 编写HTML页面,使用WebSocket连接服务器:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var socket;
function connect() {
socket = new WebSocket("ws://localhost:8080/chat");
socket.onopen = function (event) {
console.log("Connected");
}
socket.onmessage = function (event) {
console.log("Message received", event.data);
var content = event.data.replace(/\n/g, "<br/>");
$('#messages').append('<p>' + content + '</p>');
}
socket.onclose = function (event) {
console.log("Disconnected");
}
}
function send() {
var message = $('#message').val();
$('#message').val("");
socket.send(message);
}
</script>
</head>
<body onload="connect()">
<h1>WebSocket Chat</h1>
<div id="messages"></div>
<input type="text" id="message"/>
<button onclick="send()">Send</button>
</body>
</html>
```
以上是实现SpringMVC的WebSocket一对一聊天,并在HTML页面上显示最新的十行聊天信息的步骤。