基于Vue+SpringBoot+WebSocket实现Web端聊天系统（包含网络通信+心跳+客户端服务端+后端，采用java+mysql实现）

完整资源获取
点击下载完整资源

1、资源项目源码均已通过严格测试验证，保证能够正常运行；
2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通；
3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；
4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。

基于Vue+SpringBoot+WebSocket实现Web端聊天系统是一个涉及前端、后端以及数据库技术的综合性项目。以下是对该项目的综述：

一、项目背景与意义

随着互联网的快速发展，实时通信已成为许多应用不可或缺的功能。WebSocket作为一种在单个TCP连接上进行全双工通信的协议，能够高效地实现服务器与客户端之间的实时数据交换。结合Vue、SpringBoot和MySQL等技术，可以构建一个功能完善的Web端聊天系统，满足用户实时通信的需求。
二、技术选型

前端：使用Vue框架构建用户界面，Vue以其简洁的语法和高效的性能，成为前端开发的主流选择。
后端：采用SpringBoot框架，SpringBoot简化了Spring应用的初始搭建以及开发过程，通过约定优于配置的理念，让开发者能够更快地构建出生产级别的Spring应用。
通信协议：使用WebSocket协议实现实时通信，WebSocket能够在单个TCP连接上进行全双工通信，降低了网络延迟和带宽占用。
数据库：使用MySQL作为数据库存储用户信息和聊天记录，MySQL是一种关系型数据库管理系统，具有高性能、可靠性和易用性等特点。

三、系统架构

系统采用前后端分离的方式，前端负责用户界面的展示和交互，后端负责业务逻辑的处理和数据的存储。前后端通过WebSocket协议进行通信，实现实时数据交换。
四、功能实现

用户注册与登录：用户可以通过前端界面进行注册和登录操作，后端验证用户信息并返回相应的结果。
聊天功能：用户可以在聊天室中进行私聊和群聊，前端负责发送消息和接收消息，后端负责消息的转发和存储。
心跳机制：为了保持WebSocket连接的活跃性，系统实现了心跳机制。前端定时发送心跳包给后端，后端收到心跳包后返回响应，确保连接的有效性。
用户管理：后端提供用户管理功能，包括用户信息的查询、修改和删除等操作。
聊天记录查询：用户可以通过前端界面查询聊天记录，后端根据用户请求返回相应的聊天记录。

五、技术难点与解决方案

WebSocket连接管理：在WebSocket通信过程中，需要管理连接的建立、维护和关闭。系统通过后端控制器和前端事件监听器实现连接的管理。
消息转发与存储：系统需要实现消息的转发和存储功能。后端通过消息队列和数据库实现消息的转发和存储，确保消息的实时性和持久性。
用户身份验证：为了保证系统的安全性，需要对用户进行身份验证。系统通过JWT等技术实现用户身份验证和权限控制。

六、总结与展望

基于Vue+SpringBoot+WebSocket实现的Web端聊天系统是一个功能完善、性能高效的实时通信应用。通过前后端分离的方式和WebSocket协议的应用，系统实现了用户注册与登录、聊天功能、心跳机制、用户管理和聊天记录查询等功能。未来，可以进一步优化系统性能、增加更多实用功能（如文件传输、语音聊天等）并加强系统的安全性。

核心代码，websocket部分

package com.xdx97.socket.controller;

import com.xdx97.socket.bean.MsgInfo;
import com.xdx97.socket.bean.SessionList;
import com.xdx97.socket.bean.User;
import com.xdx97.socket.common.utils.CurPool;
import com.xdx97.socket.common.utils.JsonUtils;
import com.xdx97.socket.common.utils.SpringContextUtil;
import com.xdx97.socket.mapper.MsgInfoMapper;
import com.xdx97.socket.mapper.SeesionListMapper;
import com.xdx97.socket.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.*;

@Component
@ServerEndpoint("/websocket/{userId}/{sessionId}")
//此注解相当于设置访问URL
public class WebSocket {

    @Autowired
    private SeesionListMapper seesionListMapper;

    @Autowired
    private UserMapper userMapper;

    @Autowired
    private MsgInfoMapper msgInfoMapper;

    private Session session;


    @OnOpen
    public void onOpen(Session session,@PathParam(value="userId")Integer userId, @PathParam(value="sessionId")String sessionId) {
        this.session = session;
        CurPool.webSockets.put(userId,this);
        List<Object> list = new ArrayList<>();
        list.add(sessionId);
        list.add(session);
        CurPool.sessionPool.put(userId , list);
        System.out.println("【websocket消息】有新的连接，总数为:"+CurPool.webSockets.size());
    }

    @OnClose
    public void onClose() {
        // 断开连接删除用户删除session
        Integer userId = Integer.parseInt(this.session.getRequestParameterMap().get("userId").get(0));
        CurPool.sessionPool.remove(userId);
        CurPool.webSockets.remove(userId);
        if (userMapper == null){
            this.userMapper = (UserMapper)SpringContextUtil.getBean("userMapper");
        }
        User user = userMapper.selectByPrimaryKey(userId);
        CurPool.curUserPool.remove(user.getName());
        System.out.println("【websocket消息】连接断开，总数为:"+CurPool.webSockets.size());
    }

    @OnMessage
    public void onMessage(String message) {

        String sessionId = this.session.getRequestParameterMap().get("sessionId").get(0);
        if (sessionId == null){
            System.out.println("sessionId 错误");
        }
        // 在这里无法注入Mapper所以使用这种方式注入Mapper
        if (seesionListMapper == null){
            this.seesionListMapper = (SeesionListMapper)SpringContextUtil.getBean("seesionListMapper");
        }
        if (userMapper == null){
            this.userMapper = (UserMapper)SpringContextUtil.getBean("userMapper");
        }
        if (msgInfoMapper == null){
            this.msgInfoMapper = (MsgInfoMapper)SpringContextUtil.getBean("msgInfoMapper");
        }
        SessionList sessionList = seesionListMapper.selectByPrimaryKey(Integer.parseInt(sessionId));
        User user = userMapper.selectByPrimaryKey(sessionList.getUserId());
        MsgInfo msgInfo = new MsgInfo();
        msgInfo.setContent(message);
        msgInfo.setCreateTime(new Date());
        msgInfo.setFromUserId(sessionList.getUserId());
        msgInfo.setFromUserName(user.getName());
        msgInfo.setToUserId(sessionList.getToUserId());
        msgInfo.setToUserName(sessionList.getListName());
        msgInfo.setUnReadFlag(0);
        // 消息持久化
        msgInfoMapper.insert(msgInfo);

        // 判断用户是否存在，不存在就结束
        List<Object> list = CurPool.sessionPool.get(sessionList.getToUserId());
        if (list == null || list.isEmpty()){
            // 用户不存在，更新未读数
            seesionListMapper.addUnReadCount(sessionList.getToUserId(),sessionList.getUserId());
        }else{
            // 用户存在，判断会话是否存在
            String id = seesionListMapper.selectIdByUser(sessionList.getToUserId(), sessionList.getUserId())+"";
            String o = list.get(0) + "";
            if (id.equals(o)){
                // 会话存在直接发送消息
                sendTextMessage(sessionList.getToUserId(),JsonUtils.objectToJson(msgInfo));
            }else {
                // 判断会话列表是否存在
                if (id == null || "".equals(id) || "null".equals(id)){
                    // 新增会话列表
                    SessionList tmpSessionList = new SessionList();
                    tmpSessionList.setUserId(sessionList.getToUserId());
                    tmpSessionList.setToUserId(sessionList.getUserId());
                    tmpSessionList.setListName(user.getName());
                    tmpSessionList.setUnReadCount(1);
                    seesionListMapper.insert(tmpSessionList);
                }else {
                    // 更新未读消息数量
                    seesionListMapper.addUnReadCount(sessionList.getToUserId(),sessionList.getUserId());
                }
                // 会话不存在发送列表消息
                List<SessionList> sessionLists = seesionListMapper.selectByUserId(sessionList.getToUserId());
                sendTextMessage(sessionList.getToUserId() ,JsonUtils.objectToJson(sessionLists));
            }
        }
        System.out.println("【websocket消息】收到客户端消息:"+message);
    }

    // 此为广播消息
//    public void sendAllMessage(String message) {
//        for(WebSocket webSocket : webSockets) {
//            System.out.println("【websocket消息】广播消息:"+message);
//            try {
//                webSocket.session.getAsyncRemote().sendText(message);
//            } catch (Exception e) {
//                e.printStackTrace();
//            }
//        }
//    }

    // 此为单点消息 (发送文本)
    public void sendTextMessage(Integer userId, String message) {
        Session session = (Session)CurPool.sessionPool.get(userId).get(1);
        if (session != null) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    // 此为单点消息 (发送对象)
//    public void sendObjMessage(String sessionId, Object message) {
//        Session session = CurPool.sessionPool.get(sessionId);
//        if (session != null) {
//            try {
                session.getAsyncRemote().sendObject(message);
//                session.getBasicRemote().sendText(JsonUtils.objectToJson(message));
//            } catch (Exception e) {
//                e.printStackTrace();
//            }
//        }
//    }

}