Spring Boot整合WebSocket 实现消息群发(群聊)功能

最新推荐文章于 2024-06-24 15:42:47 发布

我自是光亮

最新推荐文章于 2024-06-24 15:42:47 发布

阅读量984

点赞数 1

文章标签：多人聊天群聊 WebSocket Spring Boot

本文链接：https://blog.csdn.net/qq_42972134/article/details/88094316

版权

首先创建一个Spring boot项目 pox.xml如下

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

这里我们使用jar包的形式对前端库进行统一管理

接着我们配置WebSocket 代码如下

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //设置消息代理的前缀
       
        registry.enableSimpleBroker("/topic");


        //表示配置一个或多个前缀 表示前缀为/app的destination可以通过@messageMapping注解的方法处理
        //而其他destination(列入/topic)就将直接交给broker处理
        registry.setApplicationDestinationPrefixes("/app");
    }
     
    @Override
    //定义一个前缀为"/chat"的endPoint，并开启sockjs支持
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();
    }
}

完事后我们定义一个Controller

    @Autowired
    //Spring Boot已经配置好了 直接注入了使用即可
    SimpMessagingTemplate messagingTemplate;
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception{
        return message;
    }

差点忘了实体类

public class Message {
    //用户名
    private String name;
    //内容
    private String content;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

我们的后台代码就差不多啦接着我们去static里面创建一个名为chat.html的页面
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div>
    <label for="name">请输入用户名：</label>
    <input type="text" id="name" placeholder="用户名">
</div>
<div>
    <button id="connect" type="button">连接</button>
    <button id="disconnect" type="button" disabled="disabled">断开连接</button>
</div>
<div id="chat" style="display: none">
<div>
    <label for="name">请输入聊天内容：</label>
    <input type="text" id="content" placeholder="聊天内容">
</div>
<button id="send" type="button">发送</button>
<div id="greetings">
    <div id="conversation" style="display: none">群聊进行中...</div>
</div>
</div>
</body>
</html>

这里解释一下：
这几个js都是我们从maven里面导入了的所以相当于是自带了我们只管用就行.
只需要定义一个app.js就行
代码如下

var stompClient = null;
function setConnected(connected) {
    $("#connect").prop("disabled",connected);
    $("#disconnect").prop("disabled",!connected);
    if(connected){
        $("#conversation").show();
        $("#chat").show();
    }
    else{
        $("#conversation").hide();
        $("#chat").hide();
    }
    $("#greetings").html("");
}

function connect() {
    if(!$("#name").val()){
        return;
    }
    var socket = new SockJS('/chat');
    stompClient = Stomp.over(socket)
    stompClient.connect({},function (frame) {
        setConnected(true);
        stompClient.subscribe('/topic/greetings',function (greeting) {
            showGreeting(JSON.parse(greeting.body));
        });
    });
}
function disconnect() {
    if(stompClient !== null){
        stompClient.disconnect();
    }
setConnected(false);
}
function sendName() {
    stompClient.send("/app/hello",{},
        JSON.stringify({'name': $("#name").val(),'content':$("#content").val()}));
}

function showGreeting(message) {

    $("#content").val("");
    $("#greetings").append("<div>"+message.name+":"+message.content+"</div>");
}

$(function () {

    $("#connect").click(function () {
        connect();
    });
    $("#disconnect").click(function () {
        disconnect();
    });
    $("#send").click(function () {
        sendName();
    });
});

大功告成！开始我们的测试叭

这里我们需要开启两个客户端哟也就是说浏览器模拟两个客户端（或者多个 you happy jiu ok）

在这里插入图片描述
测试成功!
我们的WebSocket主要是用来让我们客户端和服务器进行交互的就像这个群聊
我们客户端发送数据给服务器，服务器接收后将数据发送给页面

后面我还会写一个关于WebSocket实现点对点发送(一对一聊天)的功能感兴趣的可以进我的主页查看文章。

我自是光亮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot整合WebSocket 实现消息群发(群聊)功能

首先创建一个Spring boot项目 pox.xml如下 &lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-web...
复制链接

扫一扫