搜索
首页Javajava教程SpringBoot怎么使用WebSocket实现群发消息

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删除
为什么Java是开发跨平台桌面应用程序的流行选择?为什么Java是开发跨平台桌面应用程序的流行选择?Apr 25, 2025 am 12:23 AM

javaispopularforcross-platformdesktopapplicationsduetoits“ writeonce,runanywhere”哲学。1)itusesbytbytybytecebytecodethatrunsonanyjvm-platform.2)librarieslikeslikeslikeswingingandjavafxhelpcreatenative-lookingenative-lookinguisis.3)

讨论可能需要在Java中编写平台特定代码的情况。讨论可能需要在Java中编写平台特定代码的情况。Apr 25, 2025 am 12:22 AM

在Java中编写平台特定代码的原因包括访问特定操作系统功能、与特定硬件交互和优化性能。1)使用JNA或JNI访问Windows注册表;2)通过JNI与Linux特定硬件驱动程序交互;3)通过JNI使用Metal优化macOS上的游戏性能。尽管如此,编写平台特定代码会影响代码的可移植性、增加复杂性、可能带来性能开销和安全风险。

与平台独立性相关的Java开发的未来趋势是什么?与平台独立性相关的Java开发的未来趋势是什么?Apr 25, 2025 am 12:12 AM

Java将通过云原生应用、多平台部署和跨语言互操作进一步提升平台独立性。1)云原生应用将使用GraalVM和Quarkus提升启动速度。2)Java将扩展到嵌入式设备、移动设备和量子计算机。3)通过GraalVM,Java将与Python、JavaScript等语言无缝集成,增强跨语言互操作性。

Java的强键入如何有助于平台独立性?Java的强键入如何有助于平台独立性?Apr 25, 2025 am 12:11 AM

Java的强类型系统通过类型安全、统一的类型转换和多态性确保了平台独立性。1)类型安全在编译时进行类型检查,避免运行时错误;2)统一的类型转换规则在所有平台上一致;3)多态性和接口机制使代码在不同平台上行为一致。

说明Java本机界面(JNI)如何损害平台独立性。说明Java本机界面(JNI)如何损害平台独立性。Apr 25, 2025 am 12:07 AM

JNI会破坏Java的平台独立性。1)JNI需要特定平台的本地库,2)本地代码需在目标平台编译和链接,3)不同版本的操作系统或JVM可能需要不同的本地库版本,4)本地代码可能引入安全漏洞或导致程序崩溃。

是否有任何威胁或增强Java平台独立性的新兴技术?是否有任何威胁或增强Java平台独立性的新兴技术?Apr 24, 2025 am 12:11 AM

新兴技术对Java的平台独立性既有威胁也有增强。1)云计算和容器化技术如Docker增强了Java的平台独立性,但需要优化以适应不同云环境。2)WebAssembly通过GraalVM编译Java代码,扩展了其平台独立性,但需与其他语言竞争性能。

JVM的实现是什么,它们都提供了相同的平台独立性?JVM的实现是什么,它们都提供了相同的平台独立性?Apr 24, 2025 am 12:10 AM

不同JVM实现都能提供平台独立性,但表现略有不同。1.OracleHotSpot和OpenJDKJVM在平台独立性上表现相似,但OpenJDK可能需额外配置。2.IBMJ9JVM在特定操作系统上表现优化。3.GraalVM支持多语言,需额外配置。4.AzulZingJVM需特定平台调整。

平台独立性如何降低发展成本和时间?平台独立性如何降低发展成本和时间?Apr 24, 2025 am 12:08 AM

平台独立性通过在多种操作系统上运行同一套代码,降低开发成本和缩短开发时间。具体表现为:1.减少开发时间,只需维护一套代码;2.降低维护成本,统一测试流程;3.快速迭代和团队协作,简化部署过程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

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

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具