SpringBoot+WebSocket向前端推送消息的实现示例

 更新时间:2024年08月05日 09:29:25   作者:iQM75  
WebSocket是一种在单个TCP连接上进行全双工通信的协议,允许服务器主动向客户端推送信息,同时也能从客户端接收信息,本文主要介绍了SpringBoot+WebSocket向前端推送消息的实现示例,感兴趣的可以了解一下

什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议,允许服务器主动向客户端推送信息,同时也能从客户端接收信息。

WebSocket协议诞生于2008年,并在2011年成为国际标准。这种协议解决了传统HTTP请求中需要不断轮询服务器的问题,通过建立持久化的连接,实现了高效的双向数据传输。具体如下:

  • 基本特点:WebSocket建立在TCP协议之上,提供了一个全双工通信通道。这意味着服务器和客户端可以在一个连接上同时发送和接收信息,且数据交换更加高效。
  • 协议兼容:虽然WebSocket是一个独立的协议,但它在握手阶段使用HTTP协议,以确保与现有系统的兼容性。其默认端口也是80和443,使得它可以通过各种HTTP代理服务器。
  • 应用场景:WebSocket非常适合需要实时数据交互的应用,如聊天应用、在线游戏、实时通知等。
  • 数据格式:WebSocket支持传输文本和二进制数据,并且数据格式轻量,开销小,性能高。
  • API使用:在开发中,可以使用WebSocket API轻松地创建和管理连接,并通过这些连接发送和接收数据。例如,在JavaScript中,可以这样创建和处理WebSocket连接:
// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');

// 连接成功触发
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 监听消息
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

综上所述,WebSocket通过提供高效、低开销的双向通信协议,极大地改善了实时数据传输的体验,适用于需要频繁数据交互的应用场景 。

实现

1、在你的pom.xml文件中添加以下依赖:

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

2、创建一个配置类,继承AbstractWebSocketMessageBrokerConfigurer,并重写configureMessageBrokerregisterStompEndpoints方法。 

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }
}

 3、创建一个类,用于处理客户端发送的消息和向客户端发送消息。

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {

    @MessageMapping("/send")
    @SendTo("/topic/messages")
    public String handleMessage(String message) {
        return "Received: " + message;
    }
}

4、在前端,你需要使用SockJS和STOMP.js库来连接WebSocket服务器并接收消息。首先,确保你已经在HTML文件中引入了这两个库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

5、然后,你可以使用以下JavaScript代码连接到WebSocket服务器并接收消息:

// 建立连接
var socket = new SockJS('/websocket');
var stompClient = Stomp.over(socket);

// 连接到服务器
stompClient.connect({}, function (frame) {
    console.log('Connected: ' + frame);

    // 订阅消息
    stompClient.subscribe('/topic/messages', function (message) {
        console.log('Received: ' + message.body);
    });
});

// 发送消息
function sendMessage() {
    var message = document.getElementById('message').value;
    stompClient.send("/app/send", {}, message);
}

 现在,当你调用sendMessage函数时,它将通过WebSocket向后端发送消息,后端将处理该消息并将其广播到所有订阅了/topic/messages的客户端。

到此这篇关于SpringBoot+WebSocket向前端推送消息的实现示例的文章就介绍到这了,更多相关SpringBoot WebSocket推送消息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java中ReentrantLock4种常见的坑

    Java中ReentrantLock4种常见的坑

    本文主要介绍了Java中ReentrantLock 4种常见的坑,ReentrantLock默认情况下为非公平锁,下文关于其更多详情需要的小伙伴可以参考一下
    2022-05-05
  • springboot mybatis调用多个数据源引发的错误问题

    springboot mybatis调用多个数据源引发的错误问题

    这篇文章主要介绍了springboot mybatis调用多个数据源引发的错误问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Java中的@Builder注解问题详解

    Java中的@Builder注解问题详解

    这篇文章主要介绍了Java中的@Builder注解详解,@Builder 注解的其中一个大坑会导致默认值失效,这是使用此注解出现的一个问题,总的来说,不推荐再使用 @Builder 注解,接下来讲重点介绍其原因和替代方案,需要的朋友可以参考下
    2023-10-10
  • java 对象输入输出流读写文件的操作实例

    java 对象输入输出流读写文件的操作实例

    这篇文章主要介绍了java 对象输入输出流读写文件的操作实例的相关资料,这里使用实现Serializable接口,需要的朋友可以参考下
    2017-07-07
  • MyBatis获取插入记录的自增长字段值(ID)

    MyBatis获取插入记录的自增长字段值(ID)

    本文分步骤给大家介绍了MyBatis获取插入记录的自增长字段值的方法,在文中给大家提到了mybatis返回插入数据的自增长id,需要的朋友可以参考下
    2017-11-11
  • JAVA使用JDBC连接oracle数据库的详细过程

    JAVA使用JDBC连接oracle数据库的详细过程

    JDBC是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组成,下面这篇文章主要给大家介绍了关于JAVA使用JDBC连接oracle数据库的详细过程,需要的朋友可以参考下
    2023-05-05
  • Java虚拟机处理异常的最佳方式

    Java虚拟机处理异常的最佳方式

    这篇文章主要给大家介绍了关于Java虚拟机处理异常的最佳方式,文中通过示例代码介绍的非常详细,对大家的学习或者使用Java具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Java持久层面试题目及答案整理

    Java持久层面试题目及答案整理

    在本篇文章里小编给大家分享的是一篇关于Java持久层面试题目及答案整理内容,需要的朋友们学习参考下。
    2020-02-02
  • MyBatis-Plus多表联查的实现方法(动态查询和静态查询)

    MyBatis-Plus多表联查的实现方法(动态查询和静态查询)

    本文用示例介绍使用MyBatis-Plus进行多表查询的方法,包括静态查询和动态查询,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-03-03
  • java 将字符串、list 写入到文件,并读取内容的案例

    java 将字符串、list 写入到文件,并读取内容的案例

    这篇文章主要介绍了java 将字符串、list 写入到文件,并读取内容的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论