springboot+vue+websocket实现单聊代码、存储历史消息
时间: 2023-09-18 11:14:29 浏览: 47
下面是一个简单的实现单聊的示例代码,使用了Spring Boot作为后端框架,Vue作为前端框架,WebSocket用于实现实时通信,同时使用MySQL数据库存储历史消息。
1. 后端代码
使用Spring Boot框架,先配置WebSocket和MySQL数据库,然后编写WebSocket处理器和消息存储服务。
WebSocket配置:
```java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new WebSocketHandler(), "/chat").setAllowedOrigins("*");
}
}
```
WebSocket处理器:
```java
public class WebSocketHandler extends TextWebSocketHandler {
private static final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
String sessionId = session.getId();
sessions.put(sessionId, session);
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
String sessionId = session.getId();
sessions.remove(sessionId);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
String sessionId = session.getId();
String payload = message.getPayload();
JSONObject jsonObject = JSON.parseObject(payload);
String toUserId = jsonObject.getString("toUserId");
String content = jsonObject.getString("content");
// 存储消息到数据库
MessageService.saveMessage(toUserId, content);
// 发送消息给指定用户
WebSocketSession toSession = sessions.get(toUserId);
if (toSession != null) {
toSession.sendMessage(new TextMessage(content));
}
}
}
```
消息存储服务:
```java
@Service
public class MessageService {
@Autowired
private JdbcTemplate jdbcTemplate;
public static void saveMessage(String toUserId, String content) {
String sql = "INSERT INTO messages (to_user_id, content) VALUES (?, ?)";
jdbcTemplate.update(sql, toUserId, content);
}
public List<Message> getMessages(String userId) {
String sql = "SELECT content FROM messages WHERE to_user_id = ?";
List<String> contentList = jdbcTemplate.queryForList(sql, String.class, userId);
List<Message> messages = new ArrayList<>();
for (String content : contentList) {
Message message = new Message();
message.setContent(content);
messages.add(message);
}
return messages;
}
}
```
2. 前端代码
使用Vue框架,通过WebSocket建立连接,发送和接受消息,并将消息显示在界面上。
建立WebSocket连接:
```javascript
let socket = new WebSocket('ws://localhost:8080/chat');
socket.onopen = function(event) {
console.log('WebSocket连接已建立');
}
socket.onclose = function(event) {
console.log('WebSocket连接已关闭');
}
socket.onmessage = function(event) {
let message = JSON.parse(event.data);
let content = message.content;
// 显示消息
}
```
发送消息:
```javascript
let message = {
toUserId: toUserId,
content: content
};
socket.send(JSON.stringify(message));
```
显示历史消息:
```javascript
axios.get('/messages/' + toUserId).then(response => {
let messages = response.data;
// 显示历史消息
});
```
以上是一个简单的实现单聊的示例代码,可以根据实际需要进行修改和优化。