websocket实现单聊

单聊

转载于:https://www.cnblogs.com/caodneg7/p/10177350.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的实现单聊的示例代码,使用了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; // 显示历史消息 }); ``` 以上是一个简单的实现单聊的示例代码,可以根据实际需要进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值