WebSocket实现前后端通讯_websocket前后端交互-CSDN博客

本文链接：https://blog.csdn.net/m0_52348758/article/details/123566273

本文介绍了WebSocket作为实时通讯解决方案的优势，通过SpringBoot/SpringCloud后端与Vue前端的整合，详细阐述了WebSocket的配置、处理类创建、消息发送及前端的适配与测试，展示了WebSocket在订单通知中的应用场景。

摘要由CSDN通过智能技术生成

一、思路：

1、平台实现推送，之在前的项目有用过Ajax轮询的技术，这种方式浏览器需要不断的向服务器发出请求，会浪费很多的带宽等资源，技术可行但不太好。

2、完完全全在前端实现此需求，在前端监听订单列表中元素的变化，循环遍历订单列表监听或使用Vue的Watch监听，当订单列表有新增元素即可调用播放音效API，感觉不怎么靠谱，没去试过。

3、最终使用了Websocket实现的，WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接-长连接，并进行双向数据传输。我猜使用这个方案最重要的原因是后端开发是我更擅长的领域吧。

二、SpringBoot/SpringCloud整合WebSocket

1、引入WebSocket Jar包

在需要用到WebSocket 通信的SpringBoot 工程的pom.xml 文件中引入WebSocket Jar包。

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

2、创建WebSocket 配置类

该配置类用于检测带注解@ServerEndpoint 的bean 并将它们注册到容器中。

package com.tjt.mall.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;


@Configuration
@Slf4j
public class WebSocketConfig {
    /**
     * 给spring容器注入这个ServerEndpointExporter对象
     * 相当于xml：
     * <beans>
     * <bean id="serverEndpointExporter" class="org.springframework.web.socket.server.standard.ServerEndpointExporter"/>
     * </beans>
     * <p>
     * 检测所有带有@