websocket在springboot中的使用

本文详细介绍了WebSocket与Socket的区别,WebSocket的工作机制,以及在SpringBoot中如何配置和使用WebSocket进行实时通信。通过示例展示了WebSocket的配置、连接建立、消息收发过程,并提供了实际项目的代码片段。此外,还分享了服务端主动推送消息到客户端的实现方法。

websocket在springboot中的使用


  1.websocket和socket的区别

   WebSocket 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。谈到Websocket,就不难想到Socket,几乎每一个第一次接触WebSocket的人都会内心生出一个疑问:WebSocket和Socket的区别在哪里?
在这里插入图片描述
  Socket其实并不是一个协议,而是为了方便使用TCP或UDP而抽象出来的一层,是位于应用层和传输控制层之间的一组接口。

Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket去组织数据,以符合指定的协议。

  当两台主机通信时,必须通过Socket连接,Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议,IP协议的连接则依赖于链路层等更低层次。

  WebSocket则是一个典型的应用层协议。

区别
  Socket是传输控制层协议,WebSocket是应用层协议。

  2.websocket机制

   以下简要介绍一下 WebSocket 的原理及运行机制。

   WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:

   WebSocket 是一种双向通信协议,在建立连接后,WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据,就像 Socket 一样;
WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接,连接成功后才能相互通信。
非 WebSocket 模式传统 HTTP 客户端与服务器的交互如下图所示:
在这里插入图片描述
   图 1. 传统 HTTP 请求响应客户端服务器交互图

   使用 WebSocket 模式客户端与服务器的交互如下图:
在这里插入图片描述
   图 2.WebSocket 请求响应客户端服务器交互图

   上图对比可以看出,相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket 是类似 Socket 的 TCP 长连接的通讯模式,一旦 WebSocket 连接建立后,后续数据都以帧序列的形式传输。在客户端断开 WebSocket 连接或 Server 端断掉连接前,不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息是在同一个持久连接上发起,实时性优势明显。

  3.websocket使用

   Websocket的使用相当简单,并且几乎所有浏览器都支持。首先需要在pom.xml中导入websocket的依赖文件,如下所示:

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

   其次需要创建一个配置类来配置socket的路径监听。

@Configuration
public class WebsocketConfig {
   
   

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
   
   
        return new ServerEndpointExporter();
    }
}

最后编写服务端,

@ServerEndpoint("/websocket")
@Component
@Slf4j
public class MyWebsocketServer {
   
   
    /**
     * 存放所有在线的客户端
     */
    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session) {
   
   
        log.info("有新的客户端连接了: {}", session.getId());
        //将新用户存入在线的组
        clients.put(session.getId(), session);
    }

    /**
     * 客户端关闭
     * @param session session
     */
    @OnClose
    public void onClose(Session session) {
   
   
        log.info("有用户断开了, id为:{}", session.getId());
        //将掉线的用户移除在线的组里
        clients.remove(session.getId());
    }

    /**
     * 发生错误
     * @param throwable e
     */
    @OnError
    public void onError(Throwable throwable) {
   
   
        throwable.printStackTrace();
    }

    /**
     * 收到客户端发来消息
     * @param message  消息对象
     */
    @OnMessage
    public void onMessage(String message) {
   
   
        log.info("服务端收到客户端发来的消息: {}", message);
        this.sendAll(message);
    }

    /**
     * 群发消息
     * @param message 消息内容
     */
    private void sendAll(String message) {
   
   
        
### Spring Boot 和 Vue 中使用 WebSocket 的实现与用法 #### 一、引入 WebSocket 依赖 为了在 Spring Boot 项目中支持 WebSocket 功能,需要在 `pom.xml` 文件中添加 WebSocket 的相关依赖。以下是 Maven 配置中的典型依赖项[^2]: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` #### 二、配置 WebSocket 后端服务 在 Spring Boot 应用程序中启用 WebSocket 支持,可以通过创建一个配置类并注册 `ServerEndpointExporter` 来完成[^3]。 以下是一个典型的 WebSocket 配置示例: ```java @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); // 定义广播路径前缀 config.setApplicationDestinationPrefixes("/app"); // 设置应用消息前缀 } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws").withSockJS(); // 注册 WebSocket 终端点 } } ``` 上述代码定义了一个 `/ws` 路径作为 WebSocket 连接的入口,并启用了 SockJS 协议的支持以便兼容不完全支持 WebSocket 的浏览器[^4]。 #### 三、前端 Vue.js 实现 WebSocket 客户端 在 Vue.js 中集成 WebSocket 可以通过 Stomp.js 和 SockJS 提供的库来简化通信逻辑。首先安装必要的 npm 包: ```bash npm install sockjs-client stompjs --save ``` 接着,在 Vue 组件中初始化 WebSocket 并监听消息。以下是一个完整的 Vue 前端实现示例[^5]: ```javascript import SockJS from 'sockjs-client'; import * as Stomp from 'stompjs'; export default { data() { return { ws: null, messageList: [] }; }, mounted() { this.initWebSocket(); }, methods: { initWebSocket() { const socket = new SockJS('http://localhost:8080/ws'); // 对应后端 /ws 地址 this.ws = Stomp.over(socket); this.ws.connect({}, frame => { console.log('Connected:', frame); this.ws.subscribe('/topic/messages', response => { const msg = JSON.parse(response.body).content; this.messageList.push(msg); // 将收到的消息加入列表 }); }, error => { console.error('WebSocket Error:', error); }); }, sendMessage(messageContent) { this.ws.send("/app/send", {}, JSON.stringify({ content: messageContent })); } }, beforeDestroy() { if (this.ws && this.ws.connected) { this.ws.disconnect(() => { console.log('Disconnected'); }); } } }; ``` 此代码片段实现了 WebSocket 的连接建立、订阅主题以及发送消息的功能。 #### 四、测试与调试 运行应用程序时,确保前后端能够正常交互。可以在 Vue 控制台观察日志输出,验证是否成功接收到来自 Spring Boot 的消息推送[^1]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值