首页 Java java教程 SpringBoot怎么使用WebSocket实现群发消息

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

May 12, 2023 pm 06:55 PM
websocket springboot

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

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

特点

  • WebSocket 使用时需要先创建连接,这使得 Websocket 成为一种有状态的协议,在之后的通信过程中可以省略部分状态信息(例如身份认证等)。

  • WebSocket 连接在端口 80(ws)或者 443(wss)上创建,与 HTTP 使用的端口相同,这样,基本上所有的防火墙都不会阻止 WebSocket 连接。

  • WebSocket 使用 HTTP 协议进行握手,因此它可以自然而然地集成到网络浏览器和 HTTP 服务器中,而不需要额外的成本。

  • 心跳消息(ping 和 pong)将被反复的发送,进而保持 WebSocket 连接一直处于活跃状态。

  • 使用该协议,当消息启动或者到达的时候,服务端和客户端都可以知道。

  • WebSocket 连接关闭时将发送一个特殊的关闭消息。

  • WebSocket 支持跨域,可以避免 Ajax 的限制。

  • HTTP 规范要求浏览器将并发连接数限制为每个主机名两个连接,但是当我们使用 Websocket 的时候,当握手完成之后,该限制就不存在了,因为此时的连接已经不再是 HTTP 连接了。

  • WebSocket 协议支持扩展,用户可以扩展协议,实现部分自定义的子协议。

  • WebSocket 拥有更好的二进制支持以及更好的压缩效果。

一、添加依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
登录后复制

二、配置 WebSocket

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

@Configuration
@EnableWebSocketMessageBroker
public 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 进行广播。

@Controller
public class DemoController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }

}
登录后复制
@Data
public 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>
登录后复制
  • SockJS 是一个浏览器JavaScript库,提供类似于WebSocket的对象。SockJS为您提供了一个一致的,跨浏览器的Javascript API,该API在浏览器和Web服务器之间创建了低延迟,全双工,跨域的通信通道。

  • STOMP 即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP客户端与任意STOMP消息代理(Broker)进行交互。

  • @SendTo 注解,该注解将方法处理过的消息转发到 broker,再由 broker 进行消息广播。

五、验证结果

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

登录用户:piao

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

登录用户:admin

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

以上是SpringBoot怎么使用WebSocket实现群发消息的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Java和WebSocket的结合:如何实现实时视频流播放 Java和WebSocket的结合:如何实现实时视频流播放 Dec 17, 2023 pm 05:50 PM

随着互联网技术的不断发展,实时视频流已经成为了互联网领域的一个重要应用。要实现实时视频流播放,其中的关键技术包括WebSocket和Java。本文将介绍如何结合使用WebSocket和Java实现实时视频流播放,并提供相关的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工通信的协议,它在Web

如何使用PHP和WebSocket实现实时通信 如何使用PHP和WebSocket实现实时通信 Dec 17, 2023 pm 10:24 PM

随着互联网技术的不断发展,实时通信已经成为了日常生活中不可缺少的一部分。利用WebSockets技术可以实现高效、低延迟的实时通信,而PHP作为互联网领域使用最广泛的开发语言之一,也提供了相应的WebSocket支持。本文将为大家介绍如何使用PHP和WebSocket实现实时通信,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单

golang WebSocket与JSON的结合:实现数据传输和解析 golang WebSocket与JSON的结合:实现数据传输和解析 Dec 17, 2023 pm 03:06 PM

golangWebSocket与JSON的结合:实现数据传输和解析在现代的Web开发中,实时数据传输变得越来越重要。WebSocket是一种用于实现双向通信的协议,与传统的HTTP请求-响应模型不同,WebSocket允许服务器向客户端主动推送数据。而JSON(JavaScriptObjectNotation)是一种用于数据交换的轻量级格式,它简洁易读

PHP和WebSocket: 实现实时数据传输的最佳实践方法 PHP和WebSocket: 实现实时数据传输的最佳实践方法 Dec 18, 2023 pm 02:10 PM

PHP和WebSocket:实现实时数据传输的最佳实践方法引言:在Web应用程序开发中,实时数据传输是一项非常重要的技术需求。传统的HTTP协议是一种请求-响应模式的协议,不能有效地实现实时数据传输。为了满足实时数据传输的需求,WebSocket协议应运而生。WebSocket是一种全双工通信协议,它提供了一种在单个TCP连接上进行全双工通信的方式。相比于H

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

SpringBoot与SpringMVC的比较及差别分析 SpringBoot与SpringMVC的比较及差别分析 Dec 29, 2023 am 11:02 AM

SpringBoot和SpringMVC都是Java开发中常用的框架,但它们之间有一些明显的差异。本文将探究这两个框架的特点和用途,并对它们的差异进行比较。首先,我们来了解一下SpringBoot。SpringBoot是由Pivotal团队开发的,它旨在简化基于Spring框架的应用程序的创建和部署。它提供了一种快速、轻量级的方式来构建独立的、可执行

Java Websocket如何实现在线白板功能? Java Websocket如何实现在线白板功能? Dec 17, 2023 pm 10:58 PM

JavaWebsocket如何实现在线白板功能?在现代互联网时代,人们越来越注重实时协作和互动的体验。在线白板就是一种基于Websocket实现的功能,它能够使多个用户实时协作编辑同一个画板,完成绘图和标注等操作,为在线教育、远程会议、团队协作等场景提供了便捷的解决方案。一、技术背景WebSocket是HTML5提供的一种新的协议,它在同一条TCP连接上实

SSE 与 WebSocket SSE 与 WebSocket Apr 17, 2024 pm 02:18 PM

在本文中,我们将比较服务器发送事件(SSE)和 WebSocket,两者都是用于传递数据的可靠方法。我们将在八个方面对它们进行分析,包括通信方向、底层协议、安全、易用性、性能、消息结构、易用性和测试工具。这些方面的比较总结如下:类别服务器发送事件 (SSE)WebSocket通信方向单向双向底层协议HTTPWebSocket 协议安全与 HTTP 相同存在安全漏洞易用性设置简单设置复杂性能消息发送速度快受消息处理和连接管理影响消息结构纯文本文本或二进制易用性广泛可用对 WebSocket 集成有

See all articles