用vue+websocket配合java实现一对一聊天

前言

最近朋友的毕业设计有个需要实现聊天的功能，前端部分需要我帮忙实现，就去简单做了下。虽然之前有了解过用node相关的框架也可以比较方便的实现相关功能，但这次是需要配合他的java后端。所以对web前端来说算是比较新奇。前后端都实现了后，效果还是比较好的。

环境说明

1. Java jdk1.8.202
2. Mysql 8.0.3
3. Redis 5.0.12
4. Vue2.x
5. SpringBoot 2.7.1
6. WebsocketStomp

功能设计

1. 一对一聊天
2. 聊天信息持久化
3. 聊天信息推送
4. 聊天用户在线状态管理

一对一聊天实现

一对一聊天是聊天应用程序中最基本的功能之一。它允许两个用户实时地相互发送消息。

1. 前端实现

   const ws = new WebSocket('ws://localhost:8080/websocket');
   
   ws.onopen = function() {
     console.log('WebSocket已连接');
   };
   
   ws.onmessage = function(event) {
     const data = JSON.parse(event.data);
   
     if (data.type === 'message') {
       console.log(`收到消息：${data.message}`);
     }
   };
   
   ws.onclose = function() {
     console.log('WebSocket已断开');
   };
   
   ws.onerror = function(event) {
     console.log(`WebSocket出错：${event.error}`);
   };
   
   function sendMessage(message) {
     const data = JSON.stringify({
       type: 'message',
       message: message
     });
   
     ws.send(data);
   }
   

2. 后端实现

   @RestController
   @RequestMapping("/websocket")
   public class WebSocketController {
   
     @Autowired
     private WebSocketService webSocketService;
   
     @PostMapping("/send-message")
     public void sendMessage(@RequestBody MessageRequest messageRequest) {
       webSocketService.sendMessage(messageRequest.getTo(), messageRequest.getMessage());
     }
   }
   

聊天信息持久化

聊天信息持久化是指将聊天信息存储到数据库中，以便能够在以后检索。

1. 前端实现

   const saveMessage = (message) => {
     const data = JSON.stringify({
       type: 'save-message',
       message: message
     });
   
     ws.send(data);
   };
   

2. 后端实现

   @PostMapping("/save-message")
   public void saveMessage(@RequestBody MessageRequest messageRequest) {
     Message message = new Message();
     message.setFrom(messageRequest.getFrom());
     message.setTo(messageRequest.getTo());
     message.setMessage(messageRequest.getMessage());
   
     messageService.save(message);
   }
   

聊天信息推送

聊天信息推送是指将聊天信息实时推送到客户端。

1. 前端实现

   ws.onmessage = function(event) {
     const data = JSON.parse(event.data);
   
     if (data.type === 'message') {
       console.log(`收到消息：${data.message}`);
     } else if (data.type === 'notification') {
       console.log(`收到通知：${data.notification}`);
     }
   };
   

2. 后端实现

   @PostMapping("/send-notification")
   public void sendNotification(@RequestBody NotificationRequest notificationRequest) {
     webSocketService.sendNotification(notificationRequest.getTo(), notificationRequest.getNotification());
   }
   

聊天用户在线状态管理

聊天用户在线状态管理是指跟踪聊天用户当前的在线状态，以便能够在其他用户需要与他们聊天时通知他们。

1. 前端实现

   const updateOnlineStatus = (onlineStatus) => {
     const data = JSON.stringify({
       type: 'update-online-status',
       onlineStatus: onlineStatus
     });
   
     ws.send(data);
   };
   

2. 后端实现

   @PostMapping("/update-online-status")
   public void updateOnlineStatus(@RequestBody OnlineStatusRequest onlineStatusRequest) {
     webSocketService.updateOnlineStatus(onlineStatusRequest.getUserId(), onlineStatusRequest.getOnlineStatus());
   }
   

结语

本文介绍了如何使用Vue.js和Java构建一对一聊天应用程序。我们介绍了如何实现一对一聊天、聊天信息持久化、聊天信息推送和聊天用户在线状态管理。我们还探讨了一些优化聊天应用程序性能的技巧。希望本文对您有所帮助。