Springboot+WebSocket 简易聊天室（私聊+群聊+广播）

已于 2024-05-08 14:07:32 修改
阅读量717 收藏 8
点赞数 25
分类专栏： Java驿站 文章标签： WebSocket Springboot 聊天室
于 2024-05-07 10:26:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ying_ph/article/details/138522056
版权

概览

广播：每个用户登录，会进行全局通知
私聊：不同用户进行一对一私聊，消息互不干扰
群聊：不同房间进行多对多群聊，消息互不干扰

效果图

看得懂代码原理，页面UI可自定义调。

广播

在这里插入图片描述

私聊

在这里插入图片描述

群聊

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

后端代码

我的是JDK17 jakarta类会有区别（JDK8是javax）

Maven

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocketConfig

package com.cn.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Service;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author H
 * @date 2024/5/7
 * @description 配置类
 */
@Configuration
@EnableWebSocket
@Service
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

SocketMsg

package com.cn.domain;

import lombok.Data;

/**
 * @author H
 * @date 2024/5/7
 * @description 实体类 接收客户端发过来的信息
 */
@Data
public class SocketMsg {
    /**
     * 聊天类型 0 全局广播 1 单聊 2 群聊
     **/
    private int type;
    /**
     * 发送者
     **/
    private String sendOutUser;
    /**
     * 接受者
     **/
    private String receiveUser;
    /**
     * 房间id
     **/
    private String roomId;
    /**
     * 消息
     **/
    private String msg;

}

WebSocketUtil

package com.cn.util;

import cn.hutool.json.JSONUtil;
import com.cn.domain.SocketMsg;
import jakarta.websocket.*;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import org.apache.commons.lang3.ObjectUtils;
import org.springframework.stereotype.Component;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @author H
 * @date 2024/5/7
 * @description WebSocket工具类 连接测试
 */
@Component
@ServerEndpoint("/test/websocket/{userName}")
public class WebSocketUtil {

    private String userName;
    private Session session;

    /**
     * 固定前缀
     */
    private static final String USER_NAME_PREFIX = "user_name_";

    /**
     * 存放Session集合，方便推送消息 （jakarta.websocket）
     */
    private static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>();

    /**
     * 存放房间用户集合，方便推送消息 （jakarta.websocket）
     */
    private static HashMap<String, List<String>> groupSessionMap = new HashMap<>();

    /**
     * 群聊：向指定房间ID推送消息
     */
    public synchronized static void groupMessage(SocketMsg socketMsg) {
        // 存储房间号和用户信息
        String roomId = socketMsg.getRoomId();
        // 判断是否有这个房间
        List<String> strings = groupSessionMap.get(roomId);
        if (ObjectUtils.isEmpty(strings)) {
            List<String> users = new ArrayList<>();
            users.add(socketMsg.getSendOutUser());
            groupSessionMap.put(roomId, users);
        } else {
            // 这里应该写接口，先添加房间ID，简易写法直接传过来
            List<String> users = groupSessionMap.get(roomId);
            String sendOutUser = socketMsg.getSendOutUser();
            boolean contains = users.contains(sendOutUser);
            if (!contains) {
                users.add(sendOutUser);
            }
        }

        // 发送给接收者
        if (roomId != null) {
            // 发送给接收者
            System.out.println(socketMsg.getSendOutUser() + " 向房间 【 " + roomId + " 】 发送了一条消息：" + socketMsg.getMsg());
            // 此时要判断房间有哪些人，把这些消息定向发给处于此房间的用户
            List<String> roomUser = groupSessionMap.get(roomId);
            for (String userName : roomUser) {
                // 接收消息的用户
                Session receiveUser = sessionMap.get(USER_NAME_PREFIX + userName);
                receiveUser.getAsyncRemote().sendText(socketMsg.getSendOutUser() + " 向房间 【 " + roomId + " 】 发送了一条消息：" + socketMsg.getMsg());
            }
        } else {
            // 发送消息的用户
            System.out.println(socketMsg.getSendOutUser() + " 私聊的用户 " + socketMsg.getReceiveUser() + " 不在线或者输入的用户名不对");
            Session sendOutUser = sessionMap.get(USER_NAME_PREFIX + socketMsg.getSendOutUser());
            // 将系统提示推送给发送者
            sendOutUser.getAsyncRemote().sendText("系统消息：对方不在线或者您输入的用户名不对");
        }
    }

    /**
     * 私聊：向指定客户端推送消息
     */
    public synchronized static void privateMessage(SocketMsg socketMsg) {
        // 接收消息的用户
        Session receiveUser = sessionMap.get(USER_NAME_PREFIX + socketMsg.getReceiveUser());
        // 发送给接收者
        if (receiveUser != null) {
            // 发送给接收者
            System.out.println(socketMsg.getSendOutUser() + " 向 " + socketMsg.getReceiveUser() + " 发送了一条消息：" + socketMsg.getMsg());
            receiveUser.getAsyncRemote().sendText(socketMsg.getSendOutUser() + "：" + socketMsg.getMsg());
        } else {
            // 发送消息的用户
            System.out.println(socketMsg.getSendOutUser() + " 私聊的用户 " + socketMsg.getReceiveUser() + " 不在线或者输入的用户名不对");
            Session sendOutUser = sessionMap.get(USER_NAME_PREFIX + socketMsg.getSendOutUser());
            // 将系统提示推送给发送者
            sendOutUser.getAsyncRemote().sendText("系统消息：对方不在线或者您输入的用户名不对");
        }
    }

    /**
     * 全局消息：公开聊天记录
     *
     * @param message 发送的消息
     */
    public synchronized static void publicMessage(String message) {
        for (String username : sessionMap.keySet()) {
            Session session = sessionMap.get(username);
            session.getAsyncRemote().sendText("公共频道接收了一条消息：" + message);
            System.out.println("公共频道接收了一条消息：" + message);
        }
    }

    /**
     * 监听：连接成功
     *
     * @param session
     * @param userName 连接的用户名
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userName") String userName) {
        this.userName = userName;
        this.session = session;
        String name = USER_NAME_PREFIX + userName;
        if (!sessionMap.containsKey(name)) {
            sessionMap.put(name, session);
            // 在线数加1
            String tips = userName + " 加入聊天室。当前聊天室人数为" + sessionMap.size();
            System.out.println(tips);
            publicMessage(tips);
        }
    }

    /**
     * 监听: 连接关闭
     */
    @OnClose
    public void onClose() {
        String name = USER_NAME_PREFIX + userName;
        // 连接关闭后，将此websocket从set中删除
        sessionMap.remove(name);
        String tips = userName + " 退出聊天室。当前聊天室人数为" + sessionMap.size();
        System.out.println(tips);
        publicMessage(tips);
    }

    /**
     * 监听：收到客户端发送的消息
     *
     * @param message 发送的信息（json格式，里面是 SocketMsg 的信息）
     */
    @OnMessage
    public void onMessage(String message) {
        if (JSONUtil.isTypeJSONObject(message)) {
            SocketMsg socketMsg = JSONUtil.toBean(message, SocketMsg.class);
            if (socketMsg.getType() == 2) {
                // 群聊，需要找到发送者和房间ID
                groupMessage(socketMsg);
            } else if (socketMsg.getType() == 1) {
                // 单聊，需要找到发送者和接受者
                privateMessage(socketMsg);
            } else {
                // 全局广播群发消息
                publicMessage(socketMsg.getMsg());
            }
        }
    }

    /**
     * 监听：发生异常
     *
     * @param error
     */
    @OnError
    public void onError(Throwable error) {
        System.out.println("userName为：" + userName + "，发生错误：" + error.getMessage());
        error.printStackTrace();
    }

}

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        input {
            width: 150px;
            height: 30px;
            line-height: 25px;
            padding: 5px 10px;
            border-radius: 5px;
            border: 2px solid;
            font-size: 16px;
        }

        #msg, #receiveUser, #roomId {
            width: 235px;
        }

        button {
            width: 80px;
            height: 45px;
            padding: 5px 20px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<h1>聊天室</h1>
<div class="info">
    <input type="text" id="sendOutUser" placeholder="自己的用户名">
    <button onclick="connectWebSocket()">上线</button>
    <button onclick="closeWebSocket()">下线</button>
    <br>
    <br>
    <input type="text" id="msg" placeholder="要发送的信息"/>
    <button onclick="sendAll()">全局</button>
    <hr>
    <input type="text" id="receiveUser" placeholder="用户名(私聊)"/>
    <button onclick="send()">私聊</button>
    <hr>
    <input type="text" id="roomId" placeholder="房间ID(群聊)"/>
    <button onclick="sendRoom()">群聊</button>
</div>
<hr>
<div id="msgList" class="msgList">

</div>
<script type="text/javascript">
    var websocket = null;

    //连接WebSocket
    function connectWebSocket() {
        var sendOutUser = document.getElementById("sendOutUser").value;
        if (sendOutUser === "") {
            alert("请输入用户名");
            return;
        }
        //判断当前浏览器是否支持websocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8003/test/websocket/" + document.getElementById("sendOutUser").value);
        } else {
            alert('当前浏览器 not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            alert("连接发生错误");
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
            var sendOutUser = document.getElementById("sendOutUser")
            sendOutUser.readOnly = true
            sendOutUser.style.backgroundColor = '#ddd'
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            console.log(event.data)
            innerdiv("", event.data)
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            innerdiv("", "websocket连接关闭");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closewebsocket();
        }
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    // 发送群消息
    function sendRoom() {
        var m = new Map(); // 空Map
        var sendOutId = document.getElementById("sendOutUser")  //发送者
        var msg = document.getElementById("msg").value  //发送消息
        if (msg === "") {
            alert("请输入消息");
            return;
        }
        var roomId = document.getElementById("roomId").value //群聊ID
        if (roomId === "") {
            alert("请输入房间号");
            return;
        }
        m.set("sendOutUser", sendOutUser.value);
        m.set("msg", msg)
        m.set("type", 2)
        m.set("roomId", roomId)

        json = mapToJson(m)
        websocket.send(json)
        // innerdiv("我", msg)
    }

    // 发送私聊消息
    function send() {
        var m = new Map(); // 空Map
        var sendOutId = document.getElementById("sendOutUser")  //发送者
        var msg = document.getElementById("msg").value  //发送消息
        if (msg === "") {
            alert("请输入消息");
            return;
        }
        if (receiveUser === "") {
            alert("请输入用户名");
            return;
        }
        var receiveUser = document.getElementById("receiveUser").value //接收者
        m.set("sendOutUser", sendOutUser.value);
        m.set("msg", msg)
        m.set("receiveUser", receiveUser)
        m.set("type", 1)
        json = mapToJson(m)
        websocket.send(json)
        // innerdiv("我", msg)
    }

    // 发送全局广播
    function sendAll() {
        var m = new Map(); // 空Map
        var sendOutId = document.getElementById("sendOutUser")  //发送者
        var msg = document.getElementById("msg").value  //发送消息
        if (msg === "") {
            alert("请输入消息");
            return;
        }
        m.set("sendOutUser", sendOutUser.value);
        m.set("msg", msg)
        m.set("type", 0)
        json = mapToJson(m)
        websocket.send(json)
        // innerdiv("我", msg)
    }

    //map转换为json
    function mapToJson(map) {
        var obj = Object.create(null);
        for (var [k, v] of map) {
            obj[k] = v;
        }
        return JSON.stringify(obj);
    }

    //显示聊天记录到页面
    function innerdiv(id, txt) {
        var msgList = document.getElementById("msgList")
        if (id === "") {
            msgList.innerHTML += "<div>" + txt + "</div><br>"
        } else {
            msgList.innerHTML += "<div>" + id + ": " + txt + "</div><br>"
        }
    }
</script>
</body>
</html>

参考：https://blog.csdn.net/weixin_43165220/article/details/125994478

一枚小蜗牛H
关注
  • 25
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【十五】springboot整合WebSocket实现聊天室
weixin_56995925的博客
10-08 2万+
springboot整合WebSocket实现聊天室
springboot+websocket+redis实现聊天室
08-05
springboot+websocket+redis实现聊天室功能，可以实现私聊和群聊(并支持发送图片)
springboot+websocket聊天室（私聊+群聊）
weixin_43165220的博客
07-26 3962
springboot+websocket聊天室，实现了私聊和群聊。
基于Springboot+WebSocket+Netty实现在线聊天、群聊系统
热门推荐
wml_JavaKill的博客
04-24 2万+
此文主要实现在好友添加、建群、聊天对话、群聊功能，使用Java作为后端语言进行支持，界面友好，开发简单。
基于SpringBoot+Vue+WebSocket的在线聊天室
最新发布
qq_40640261的博客
12-30 1713
本系统设计实现了一个在线聊天系统，支持用户注册、用户登录、显示当前在线用户人数、查看当前在线用户、选择群聊、选择与当前在线用户私聊、实时接收消息等功能。本项目采用前后端分离模式前后端分离模式（Front-end and Back-end Separation）是一种软件架构模式，将前端和后端的开发和部署分离开来。在这种模式下，前端和后端被视为独立的两个系统，通过接口进行通信。前端主要负责用户界面和用户交互的展示，通过 HTTP 请求与后端进行数据交互，获取数据并更新用户界面。
非常简单的用Springboot+websocket 实现聊天室小项目（并保存用户登录信息）
neymar_jr的博客
12-26 2205
websocket 是http的补充，为了实现实时通信，一次握手便可以保持长连接，避免繁琐的请求头浪费宽带。websocket 可以非常简单的实现一个聊天室的项目。 下面，我简易地用Springboot+websocket 实现聊天室小项目。 （1）pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns...
SpringBoot+websocket实现私聊和群聊(可以发送文字和图片)
Attacking_Ape的博客
07-27 7862
Websocket实现私聊和群聊1. websocket的概念1.1. 全双工概念2. websocket实现聊天室2.1. WebSocket API2.1.1. 构造方法2.1.1.1. 语法2.1.1.2. 参数2.1.1.3. 抛出异常2.1.2. 常量2.1.3. 属性2.1.4. 方法2.1.5. 事件3. websocket实现群聊或私聊或图片发送3.1. 项目的最终目录结构![本图片分为三个小的项目：1.websocket实现群聊；2.websocket实现群聊和私聊；3.websocket
springboot+websocket实现聊天程序
未的博客
05-24 441
1、什么是Websocket？ websocket采用W3C国际标准，完美支持HTML5的新协议，采用双全工通信，摆脱传统http连接轮询的窘况，它于http没有关系， http不支持持久连接，websocket只是能够兼容现有浏览器的握手规范，是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 2、websocket创建过程 客户端创建过
SpringBoot+Websocket+Vue的使用
佐勒之博
07-05 6767
SpringBoot+Websocket+Vue的使用 首先是对websocket进行讲解 简介  WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服
基于Vue+springboot+websocket实现的简短仿微信web聊天室（私聊和群聊功能）（可在线预览）
qq_46416934的博客
08-28 1496
更新中。
基于WebSocket+Vue网络聊天室在线聊天系统设计
10-23
## 开发软件：WebStorm Nodejs + WebSocket + Vue 网络聊天室 一个简单的聊天室demo，实现的功能有: 私聊 群聊 消息已读和未读 未读消息显示和提醒 聊天文字颜色区别 创建房间 用户下线提示
基于Nodejs+Express+WebSocket网络在线聊天室系统设计
11-01
用户如果没有账号可以注册一个，登录系统后可以查看所有的聊天室房间和所有的在线用户，用户可以选择某个用户进行私聊，也可以加入某个房间群聊，聊天的时候可以发送表情包，也可以发送图片或者文件，还有历史聊天...
MybatisPlus:中QueryWrapper＜＞().lambda使用(条件查询)
普通人一枚
04-20 1万+
MyBatis-Plus QueryWrapper及LambdaQueryWrapper的使用 假如我们有一张user表，现需要通过user_name查出所有数据 @ApiModel(description = "用户实体") public class User { /** * serialVersionUID */ @ApiModelProperty(value = "主键") private Integer id; @ApiModelPro...
Mybatis-Plus使用或“or”问题，及使用方法
普通人一枚
08-10 1万+
Mybatis-Plus使用或“or”问题，及使用方法
validation校验包常用校验注解@NotEmpty，@NotBlank，@NotNull等注解
普通人一枚
07-21 8715
validation校验包常用校验注解@NotEmpty，@NotBlank，@NotNull等注解
Springboot+SpringSecurity一篇看会
普通人一枚
03-06 8397
SpringSecurity总结
Springboot 读取JSON文件
普通人一枚
09-21 6304
Springboot 读取JSON文件
使用AOP：获取controller请求参数与返回参数
普通人一枚
08-12 6087
/** * AOP：用于获取controller的方法返回值 */ @Component @Aspect public class LoggerAspectJAdvice { private LoggerBuff loggerBuff = LoggerBuff.create("XXX_XXX_XXX"); //* *..*.*(..)) 此为所有切面 @AfterReturning(pointcut = "execution(* com.cn..*.*Controller.*.
springboot+websocket实现消息发送
09-17
使用Redis可以实现聊天室功能，包括私聊和群聊，并且还支持发送图片。使用RabbitMQ和WebSocket可以实现分布式消息推送，生产者将消息发送给RabbitMQ，然后由RabbitMQ通过路由键指定具体的管道，消费者监听指定的管道...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值