文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

SpringBoot怎么使用WebSocket实现群发消息

2023-06-08 04:33

关注

这篇文章主要介绍了SpringBoot怎么使用WebSocket实现群发消息的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇SpringBoot怎么使用WebSocket实现群发消息文章都会有所收获,下面我们一起来看看吧。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,已被 W3C 定为标准。使用 WebSocket 可以使得客户端和服务器之间的数据交换变得更加简单。在 WebSocket 协议中,浏览器和服务器只需要完成一次握手,两者之间就可以直接创建持久性的连接,并进行双向数据传输。

SpringBoot怎么使用WebSocket实现群发消息

特点

一、添加依赖

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

二、配置 WebSocket

Spring 框架提供了基于 WebSocket 的 STOMP 支持,STOMP 是一个简单的可互操作的协议,通常被用于通过中间服务器在客户端之间进行异步消息传递。

@Configuration@EnableWebSocketMessageBrokerpublic class WebSocketConfig implements WebSocketMessageBrokerConfigurer {     @Override    public void configureMessageBroker(MessageBrokerRegistry config) {        // 设置消息代理的前缀,如果消息的前缀为"/topic",就会将消息转发给消息代理(broker)        // 再由消息代理广播给当前连接的客户端        config.enableSimpleBroker("/topic");        // 下面方法可以配置一个或多个前缀,通过这些前缀过滤出需要被注解方法处理的消息。        // 例如这里表示前缀为"/app"的destination可以通过@MessageMapping注解的方法处理        // 而其他 destination(例如"/topic""/queue")将被直接交给 broker 处理        config.setApplicationDestinationPrefixes("/app");    }     @Override    public void registerStompEndpoints(StompEndpointRegistry registry) {        // 定义一个前缀为"/chart"的endpoint,并开启 sockjs 支持。        // sockjs 可以解决浏览器对WebSocket的兼容性问题,客户端将通过这里配置的URL建立WebSocket连接        registry.addEndpoint("/chat").withSockJS();    }}

三、服务端代码

根据上面 WebSocketConfig 的配置,@MessageMapping("/hello") 注解的方法将用来接收“/app/hello”路径发送来的消息,在注解方法中对消息进行处理后,再将消息转发到 @SendTo 定义的路径上。而 @SendTo 路径是一个前缀为“/topic”的路径,因此该消息被交给消息代理 broker,再由 broker 进行广播。

@Controllerpublic class DemoController {    @MessageMapping("/hello")    @SendTo("/topic/greetings")    public Message greeting(Message message) throws Exception {        return message;    }}
@Datapublic class Message {    private String name;        private String content;}

四、前端代码 

在 resources/static 目录下创建 chat.html 页面作为聊天页面。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>群聊</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.1.2/sockjs.min.js"></script>    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>    <script>        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("");        }        // 建立一个WebSocket连接        function connect() {            // 用户名不能为空            if (!$("#name").val()) {                return;            }            // 首先使用 SockJS 建立连接            var socket = new SockJS('/chat');            // 然后创建一个STOMP实例发起连接请求            stompClient = Stomp.over(socket);            // 连接成功回调            stompClient.connect({}, function (frame) {                // 进行页面设置                setConnected(true);                // 订阅服务端发送回来的消息                stompClient.subscribe('/topic/greetings', function (greeting) {                    // 将服务端发送回来的消息展示出来                    showGreeting(JSON.parse(greeting.body));                });            });        }        // 断开WebSocket连接        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) {            $("#greetings")                .append("<div>" + message.name+":"+message.content + "</div>");        }        // 页面加载后进行初始化动作        $(function () {            $( "#connect" ).click(function() { connect(); });            $( "#disconnect" ).click(function() { disconnect(); });            $( "#send" ).click(function() { sendName(); });        });    </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" >    <div>        <label for="name">请输入聊天内容:</label>        <input type="text" id="content" placeholder="聊天内容">    </div>    <button id="send" type="button">发送</button>    <div id="greetings">        <div id="conversation" >群聊进行中...</div>    </div></div></body></html>

五、验证结果

我们请求地址:http://127.0.0.1:8086/chat.html

登录用户:piao

SpringBoot怎么使用WebSocket实现群发消息

登录用户:admin

SpringBoot怎么使用WebSocket实现群发消息

关于“SpringBoot怎么使用WebSocket实现群发消息”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“SpringBoot怎么使用WebSocket实现群发消息”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯