【技术派后端篇】整合WebSocket长连接实现消息实时推送

最新推荐文章于 2025-04-25 19:59:07 发布
最新推荐文章于 2025-04-25 19:59:07 发布
阅读量355 收藏 4
点赞数 6
分类专栏： 项目 # 技术派 文章标签： websocket 网络协议 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaosw0521/article/details/147450007
版权

在技术派平台中，实现了文章被点赞或评论后，在右上角实时弹出消息提醒的功能。相较于之前仅有的消息通知红色标识，这种实时通知在交互体验上有显著提升。本文将详细介绍如何借助WebSocket实现消息的实时通知。

1 基础知识点

1.1 相关概念

  1. WebSocket：WebSocket是一种在单个TCP连接上进行全双工通信的协议，能使客户端和服务器实时地双向传输数据，无需频繁建立和关闭连接，可提高数据传输的效率和性能。
  2. STOMP：Simple Text Oriented Messaging Protocol，即简单文本定向消息协议，是在HTTP之上实现的简单灵活的消息传递协议，定义了一套简单的命令和帧格式用于客户端和服务器间的消息传递，可实现双向通讯。需注意，STOMP协议属于WebSocket的子协议。

1.2 WebSocket整合STOMP

WebSocket整合STOMP协议实现双向通讯的主要步骤如下：

  1. 建立WebSocket连接：客户端通过JavaScript的WebSocket API与服务器建立连接。
  2. 发送STOMP帧：连接建立后，客户端和服务器通过发送STOMP帧进行通信，STOMP帧是STOMP协议的基本单位，定义了订阅、发布等消息操作。
  3. 处理STOMP帧：服务器收到STOMP帧后，根据帧类型进行相应处理，如收到SUBSCRIBE帧为客户端创建订阅，收到SEND帧将消息发送到指定目的地。
  4. 关闭WebSocket连接：通信完成后，通过调用WebSocket API的close方法关闭连接。
    在这里插入图片描述

1.3 SpringBoot整合STOMP流程

SpringBoot对WebSocket提供了友好封装，便于搭建基于STOMP协议的WebSocket应用工程。其基本工作流程如下：

  1. 步骤1：初始化

    • 服务端：定义接收WebSocket连接的端点EndPoint；配置消息代理Broker，用于前端订阅，后端向Broker写入消息后，订阅该Broker的前端会收到相应消息；配置路由转发规则，将用户信息转发给相应处理器（类似RequestMappingHandlerMapping和@RequestMapping注解，WebSocket中使用Destination + @MessageMapping）。
    • 客户端：与EndPoint建立连接；订阅Broker并注册消息回调。
      在这里插入图片描述

  2. 步骤2：通讯

    • 服务端：主动向Broker写入消息，使用simpMessagingTemplate；消息应答使用@SendTo注解。
    • 客户端：发送消息调用send(xxxx)方法；消息应答触发订阅的回调函数。
      在这里插入图片描述

2 WebSocket集成

相关示例demo可在https://github.com/liuyueyi/spring-boot-demo/tree/master/spring-boot/203-websocket获取。

2.1 依赖配置

在Spring Boot应用的pom.xml配置文件中，引入WebSocket的核心依赖。

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

2.2 WebSocket配置

后端通过实现配置类StompConfiguration来定义相关信息：

@Configuration
@EnableWebSocketMessageBroker
public class StompConfiguration implements WebSocketMessageBrokerConfigurer {

    // 配置消息代理
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic"); // 客户端订阅地址前缀
        registry.setApplicationDestinationPrefixes("/app"); // 服务端接收地址前缀
    }

    // 注册STOMP端点
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws/hello").withSockJS(); // 客户端连接端点
    }
}
  1. 定义端点：使用registerStompEndpoints()方法。
  2. 定义客户端与服务端通讯信息：使用configureMessageBroker()方法，配置消息代理registry.enableSimpleBroker，配置消息转发registry.setApplicationDestinationPrefixes（转发前缀可为多个）。

配置完成后，客户端的相关路径为：建立连接路径是/ws/hello；订阅消息路径是/topic/xxx（由@SendTo的路径确定）；接收前端消息路径是/app/xxx（由@MessageMapping中的路径补齐）。

2.3 消息接收应答

实现简单消息应答，接收客户端向/app/hello发送的消息，将结果写回到/topic/hello对应的Broker，订阅该Broker的客户端会收到应答消息。

@Controller
public class HelloController {
    
    // 处理/app/hello路径的STOMP消息
    @MessageMapping("/hello")
    @SendTo("/topic/hello") // 将返回结果广播到指定主题
    public String greeting(String message) {
        return "[" + LocalDateTime.now() + "]: " + message;
    }
}

同时，编写定时器，由后端定时向/topic/hello这个Broker中写入消息，模拟后台主动下发消息场景。

@Autowired
private SimpMessagingTemplate simpMessagingTemplate;

// 定时推送示例（当前被注释）
@Scheduled(cron = "0/10 * * * * ?")
public void autoPush() {
    simpMessagingTemplate.convertAndSend("/topic/hello", "系统自动消息");
}

2.4 执行流程解析

var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    var socket = new SockJS('/ws/hello');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/hello', function (greeting) {
            console.log("resp: ", greeting.body)
            showGreeting(greeting.body);
        });
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $("#connect").click(function () {
        connect();
    });
    $("#disconnect").click(function () {
        disconnect();
    });
    $("#send").click(function () {
        sendName();
    });
});

核心js逻辑实现WebSocket连接建立与通讯：

  1. 建立连接connect()：通过new SockJS('/ws/hello')与后端端点建立连接；连接成功后，使用stompClient.subscribe('/topic/hello', 消息应答回调)订阅Broker并接收消息回传。
  2. 发送消息：调用stompClient.send("/app/hello", xxx)方法。
  3. 断开连接：调用stompClient.disconnect()方法。

2.5 效果演示

完成基于Spring Boot整合WebSocket与STOMP协议的示例应用搭建后，启动应用，可看到前端建立连接后向后端发送信息并接收后端广播消息的过程，多个客户端订阅同一Broker时，能收到后端发送的消息。
在这里插入图片描述

3 技术派基于WebSocket的消息通知

3.1 消息推送配置

WsChatConfig 是一个 Spring 配置类，其主要功能是配置基于 STOMP（Simple Text Oriented Messaging Protocol）协议的 WebSocket 通信。下面按照代码结构详细说明其逻辑：

  1. 类定义与注解
@Slf4j
@Configuration
@EnableWebSocketMessageBroker
public class WsChatConfig implements WebSocketMessageBrokerConfigurer {
  • @Slf4j：Lombok 提供的注解，会自动为该类生成一个日志记录器 log，方便日志输出。
  • @Configuration：Spring 注解，表明该类是一个配置类，Spring 容器会扫描并加载其中定义的 Bean。
  • @EnableWebSocketMessageBroker：启用基于消息代理的 WebSocket 支持，允许应用使用 STOMP 协议进行消息传递。
  • implements WebSocketMessageBrokerConfigurer：实现该接口，需要重写其中的方法来定制 WebSocket 消息代理的配置。
  1. 配置消息代理
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/chat");
    config.setApplicationDestinationPrefixes("/app");
}
  • config.enableSimpleBroker("/chat")：启用一个简单的基于内存的消息代理，客户端订阅以 /chat 开头的目的地后，就可以接收从服务端广播的消息。
  • config.setApplicationDestinationPrefixes("/app")：设置应用程序的目标前缀，以 /app 开头的消息会被路由到带有 @MessageMapping 注解的控制器方法进行处理。
  1. 注册 STOMP 端点
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/gpt/{id}/{aiType}")
            .setHandshakeHandler(new AuthHandshakeHandler())
            .addInterceptors(new AuthHandshakeInterceptor())
            .setAllowedOriginPatterns("*");
}
  • registry.addEndpoint("/gpt/{id}/{aiType}")：注册一个 WebSocket 端点，客户端可以通过这个端点连接到服务端。{id} 和 {aiType} 是路径变量，可用于标识不同的用户和 AI 类型。
  • .setHandshakeHandler(new AuthHandshakeHandler())：设置自定义的握手处理器，用于在 WebSocket 握手阶段进行身份验证等操作。
  • .addInterceptors(new AuthHandshakeInterceptor())：添加自定义的握手拦截器，进一步处理握手过程中的逻辑。
  • .setAllowedOriginPatterns("*")：允许所有来源的跨域请求，确保不同域名的客户端都能连接到该端点。
  1. 配置消息通道拦截器
@Override
public void configureClientInboundChannel(ChannelRegistration registration) {
    registration.interceptors(channelInInterceptor());
}

@Override
public void configureClientOutboundChannel(ChannelRegistration registration) {
    registration.interceptors(channelOutInterceptor());
}
  • configureClientInboundChannel：配置客户端发送到服务端的消息通道，添加入站拦截器 channelInInterceptor()，用于处理客户端发来的消息。
  • configureClientOutboundChannel：配置服务端发送到客户端的消息通道，添加出站拦截器 channelOutInterceptor()，用于处理服务端返回给客户端的消息。
  1. 定义 Bean
@Bean
public HandshakeHandler handshakeHandler() {
    return new AuthHandshakeHandler();
}

@Bean
public HttpSessionHandshakeInterceptor handshakeInterceptor() {
    return new AuthHandshakeInterceptor();
}

@Bean
public ChannelInterceptor channelInInterceptor() {
    return new AuthInChannelInterceptor();
}

@Bean
public ChannelInterceptor channelOutInterceptor() {
    return new AuthOutChannelInterceptor();
}
  • 使用 @Bean 注解将自定义的握手处理器、握手拦截器、入站拦截器和出站拦截器注册为 Spring Bean，方便 Spring 容器进行管理和使用。

综上所述，WsChatConfig 类通过实现 WebSocketMessageBrokerConfigurer 接口，完成了 WebSocket 端点的注册、消息代理的配置以及消息通道拦截器的设置，从而实现了基于 STOMP 协议的 WebSocket 通信功能，同时加入了身份验证等安全机制。

3.2 身份鉴权拦截器

AuthHandshakeInterceptor 类继承自 HttpSessionHandshakeInterceptor，主要作用是在 WebSocket 握手阶段进行用户身份验证和识别。下面详细解释其代码逻辑：

  1. 类定义和继承
public class AuthHandshakeInterceptor extends HttpSessionHandshakeInterceptor {

这行代码定义了 AuthHandshakeInterceptor 类，并继承自 HttpSessionHandshakeInterceptor。HttpSessionHandshakeInterceptor 是 Spring 提供的用于在 WebSocket 握手过程中处理 HTTP 会话的拦截器，继承它可以利用其已有的功能，同时自定义握手逻辑。

  1. 握手前的身份验证 (beforeHandshake 方法)
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
    log.info("准备开始握手了!");
    String session = SessionUtil.findCookieByName(request, LoginService.SESSION_KEY);
    ReqInfoContext.ReqInfo reqInfo = new ReqInfoContext.ReqInfo();
    SpringUtil.getBean(GlobalInitService.class).initLoginUser(session, reqInfo);

    if (reqInfo.getUser() == null) {
        log.info("websocket 握手失败，请登录之后再试");
        return false;
    }

    // 将用户信息写入到属性中
    attributes.put(MdcUtil.TRACE_ID_KEY, SelfTraceIdGenerator.generate());
    attributes.put(LoginService.SESSION_KEY, reqInfo);
    attributes.put(WsAnswerHelper.AI_SOURCE_PARAM, initAiSource(request.getURI().getPath()));
    return true;
}
  • 日志记录：使用 log.info 记录开始握手的信息。
  • 获取会话信息：通过 SessionUtil.findCookieByName 方法从请求中获取名为 LoginService.SESSION_KEY 的 Cookie 值。
  • 初始化用户信息：创建 ReqInfoContext.ReqInfo 对象，并调用 GlobalInitService 的 initLoginUser 方法，根据会话信息初始化用户信息。
  • 身份验证：检查 reqInfo 中的用户信息是否为空，如果为空则记录握手失败的日志并返回 false，表示握手失败。
  • 设置属性：如果身份验证通过，将生成的跟踪 ID、用户请求信息和 AI 来源信息添加到 attributes 中，这些信息将在后续的 WebSocket 通信中使用。最后返回 true，表示握手成功。
  1. 初始化 AI 来源 (initAiSource 方法)
private String initAiSource(String path) {
    int index = path.lastIndexOf("/");
    return path.substring(index + 1);
}

该方法从请求的 URI 路径中提取 AI 来源信息。通过查找最后一个 / 的位置，然后截取该位置之后的字符串作为 AI 来源。

  1. 握手后的处理 (afterHandshake 方法)
@Override
public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
    log.info("握手成功了!!!");
    super.afterHandshake(request, response, wsHandler, ex);
}

在握手成功后，使用 log.info 记录握手成功的日志，并调用父类的 afterHandshake 方法完成后续处理。

综上所述，AuthHandshakeInterceptor 类在 WebSocket 握手过程中进行用户身份验证，确保只有登录用户可以建立 WebSocket 连接，并在握手前后记录日志和处理相关信息。

3.3 握手处理器

AuthHandshakeHandler 类继承自 DefaultHandshakeHandler，主要用于在 WebSocket 握手过程中确定连接的用户身份。下面详细解释其代码逻辑：

  1. 类定义和注解
@Slf4j
public class AuthHandshakeHandler extends DefaultHandshakeHandler {
  • @Slf4j：Lombok 注解，用于自动生成日志记录器 log，方便在类中记录日志。
  • extends DefaultHandshakeHandler：继承 DefaultHandshakeHandler 类，该类是 Spring 提供的默认握手处理器，AuthHandshakeHandler 可以重写其方法来实现自定义的握手逻辑。
  1. 重写 determineUser 方法
@Override
protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler, Map<String, Object> attributes) {
    // case1: 根据cookie来识别用户，即可以实现所有用户连相同的ws地址，然后再 AuthHandshakeChannelInterceptor 中进行destination的转发
    ReqInfoContext.ReqInfo reqInfo = (ReqInfoContext.ReqInfo) attributes.get(LoginService.SESSION_KEY);
    if (reqInfo != null) {
        return reqInfo;
    }

    // case2: 根据路径来区分用户
    // 获取例如 ws://localhost/gpt/id 订阅地址中的最后一个用户 id 参数作为用户的标识, 为实现发送信息给指定用户做准备
    String uri = request.getURI().toString();
    String uid = uri.substring(uri.lastIndexOf("/") + 1);
    log.info("{} -> {}", uri, uid);
    return () -> uid;
}
  • determineUser 方法是 DefaultHandshakeHandler 中的一个受保护方法，用于在握手过程中确定连接的用户身份。重写该方法可以实现自定义的用户身份识别逻辑。
  • 身份识别方式一：通过 Cookie 识别
    • 从 attributes 中获取 LoginService.SESSION_KEY 对应的值，将其转换为 ReqInfoContext.ReqInfo 对象。
    • 如果 reqInfo 不为空，则将其作为 Principal 返回，表示用户身份已通过 Cookie 识别。
  • 身份识别方式二：通过路径识别
    • 如果通过 Cookie 未能识别用户身份，则从请求的 URI 中提取最后一个 / 之后的部分作为用户 ID。
    • 使用 Lambda 表达式创建一个 Principal 对象，其 getName() 方法返回提取的用户 ID。
    • 记录请求 URI 和提取的用户 ID 的日志信息。

综上所述，AuthHandshakeHandler 类在 WebSocket 握手过程中，通过两种方式确定连接的用户身份，确保后续的消息可以准确地发送给指定用户。

3.4 消息发送与处理

WsAnswerHelper 是一个 Spring 组件，主要职责是借助 WebSocket 向用户实时推送聊天相关消息，在技术派项目里实现消息实时推送功能。下面对其代码逻辑展开详细说明：

3.4.1 消息发送方法

  1. sendMsgToUser(String session, String question)
public void sendMsgToUser(String session, String question) {
    ChatRecordsVo res = chatFacade.autoChat(question, vo -> response(session, vo));
    log.info("AI直接返回：{}", res);
}
  • 调用 chatFacade.autoChat 方法发起自动聊天，传入用户提问 question 以及一个回调函数。
  • 回调函数 vo -> response(session, vo) 会在获取到聊天结果后，调用 response 方法把结果推送给指定用户。
  • 记录 AI 返回结果的日志。
  1. sendMsgToUser(AISourceEnum ai, String session, String question)
public void sendMsgToUser(AISourceEnum ai, String session, String question) {
    if (ai == null) {
        // 自动选择AI类型
        sendMsgToUser(session, question);
    } else {
        ChatRecordsVo res = chatFacade.autoChat(ai, question, vo -> response(session, vo));
        log.info("AI直接返回：{}", res);
    }
}
  • 若传入的 ai 为 null，则调用 sendMsgToUser(session, question) 方法自动选择 AI 类型进行聊天。
  • 若 ai 不为 null，则调用 chatFacade.autoChat 方法，指定 AI 类型进行聊天，并将结果推送给用户，同时记录日志。
  1. sendMsgHistoryToUser(String session, AISourceEnum ai)
 public void sendMsgHistoryToUser(String session, AISourceEnum ai) {
     ChatRecordsVo vo = chatFacade.history(ai);
     response(session, vo);
 }
  • 调用 chatFacade.history 方法获取指定 AI 类型的聊天历史记录。
  • 调用 response 方法将聊天历史记录推送给指定用户。

3.4.2 消息推送方法

    /**
     * 将返回结果推送给用户
     *
     * @param session
     * @param response
     */
    public void response(String session, ChatRecordsVo response) {
        // convertAndSendToUser 方法可以发送信给给指定用户,
        // 底层会自动将第二个参数目的地址 /chat/rsp 拼接为
        // /user/username/chat/rsp，其中第二个参数 username 即为这里的第一个参数 session
        // username 也是AuthHandshakeHandler中配置的 Principal 用户识别标志
        simpMessagingTemplate.convertAndSendToUser(session, "/chat/rsp", response);
    }
  • 借助 SimpMessagingTemplate 的 convertAndSendToUser 方法，把聊天结果 response 推送给指定用户 session。
  • 目标地址 /chat/rsp 会自动拼接成 /user/username/chat/rsp，这里的 username 就是 session。

3.4.3 业务逻辑执行方法

    public void execute(Map<String, Object> attributes, Runnable func) {
        try {
            ReqInfoContext.ReqInfo reqInfo = (ReqInfoContext.ReqInfo) attributes.get(LoginService.SESSION_KEY);
            ReqInfoContext.addReqInfo(reqInfo);
            String traceId = (String) attributes.get(MdcUtil.TRACE_ID_KEY);
            MdcUtil.add(MdcUtil.TRACE_ID_KEY, traceId);


            // 执行具体的业务逻辑
            func.run();

        } finally {
            ReqInfoContext.clear();
            MdcUtil.clear();
        }
    }
  • 从 attributes 里获取用户请求信息 reqInfo 和跟踪 ID traceId，并分别添加到 ReqInfoContext 和 MdcUtil 中。
  • 执行传入的业务逻辑 func.run()。
  • 无论业务逻辑是否执行成功，最后都要清除 ReqInfoContext 和 MdcUtil 中的信息。

综上所述，WsAnswerHelper 类整合了聊天服务和 WebSocket 消息推送功能，实现了消息的实时发送和推送，同时对请求信息和跟踪 ID 进行管理。

3.5 前端页面集成

在前端页面 paicoding-ui/src/main/resources/templates/views/chat-home/index.html中，可以使用 JavaScript 代码来连接 WebSocket 并接收消息。

3.5.1 连接 WebSocket

<script th:inline="javascript">
    // ... 其他代码 ...
    const isLogin = [[${global.isLogin}]], user = [[${global.user}]];
    let stompClient = null;

    $(function () {
        if (isLogin) {
            initWs();
        } else {
            console.log("请先登录");
        }
    });

    function initWs() {
        let protocol = window.location.protocol.replace("http", "ws");
        let host = window.location.host;
        let aiType = $('#chat-type').val();
        const session = getCookie("f-session");
        let socket = new WebSocket(`${protocol}//${host}/gpt/${session}/${aiType}`);
        stompClient = Stomp.over(socket);

        stompClient.connect({}, function (frame) {
            console.log('ws连接成功: ' + frame);
            // 其他操作...
        });

        // 关闭链接
        socket.onclose = disconnect;
    }
    // ... 其他代码 ...
</script>
  • 登录状态判断：借助 Thymeleaf 模板引擎获取后端传递的登录状态 isLogin 和用户信息 user。页面加载完成后，若用户已登录，则调用 initWs方法来初始化 WebSocket 连接；反之，在控制台输出提示信息。
  • 构建 WebSocket 地址：initWs 方法先把当前页面的协议从 http 替换成 ws，接着获取当前页面的主机名，再获取下拉框选中的 AI 类型 aiType 以及用户的会话 session，最后构建出完整的 WebSocket 连接地址。
  • 创建 WebSocket 连接：使用 new WebSocket 创建 WebSocket 连接，再用 Stomp.over 方法将其包装成基于 STOMP 协议的客户端。
  • 连接服务器：调用 stompClient.connect 方法连接服务器，连接成功后会执行回调函数，在控制台输出连接成功信息。
  • 处理关闭事件：为 WebSocket 的 onclose 事件绑定 disconnect 方法，当连接关闭时会触发该方法。

3.5.2 订阅消息

<script th:inline="javascript">
    // ... 其他代码 ...
    function initWs() {
        // ... 其他代码 ...
        stompClient.connect({}, function (frame) {
            console.log('ws连接成功: ' + frame);
            // 订阅消息
            stompClient.subscribe(`/user/chat/rsp`, function (message) {
                // 解析 JSON 字符串
                console.log("rsp:", message);
                let res = JSON.parse(message.body);
                console.log("res:", res);

                // 记录聊天次数
                $("#chatCnt").html(` ${res.usedCnt}/${res.maxCnt} `);

                const data = res.records;

                // 移除 loading 元素
                $(".home_chat-message-actions__loading").remove();

                if (data.length > 1) {
                    // 返回历史全部信息
                    chatContent.html('');
                    for (let i = data.length - 1; i >= 0; i--) {
                        if (data[i].question) {
                            addClientMsg(data[i].question, false);
                        }
                        if (i == 0) {
                            addSplit();
                        }
                        appendServerMessage(data[i]);
                    }
                } else {
                    appendServerMessage(data[0]);
                }

                // 除流式持续返回场景，恢复按钮状态
                if(data[data.length - 1].answerType != 'STREAM') {
                    sendBtn.removeAttr("disabled");
                }
            });
        });
        // ... 其他代码 ...
    }
    // ... 其他代码 ...
</script>
  • 订阅目的地：在 stompClient.connect 的回调函数里，调用 stompClient.subscribe 方法订阅 /user/chat/rsp 目的地，该目的地是服务器推送消息的目标地址。
  • 处理接收到的消息：当服务器向该目的地推送消息时，会触发回调函数。在回调函数中，先将接收到的消息体解析成 JSON 对象，然后更新页面上的聊天次数，移除加载中的提示元素，根据消息数据的长度不同，采用不同的方式将消息添加到聊天界面，最后根据消息类型恢复发送按钮的状态。

3.5.3 发送消息

<script th:inline="javascript">
    // ... 其他代码 ...
    function doSend() {
        const qa = inputField.val();
        if (qa.length > 512) {
            toastr.info("提问长度请不要超过512字符哦~");
            return;
        }
        stompClient.send("/app/chat/" + session, {'s-uid': session}, qa);
        inputField.val("");
        addClientMsg(qa.replace(/\n/g, "<br/>"), true);
        sendBtn.attr("disabled", true);
    }

    sendBtn.click(function () {
        if (stompClient == null) {
            initWs();
        } else {
            if (inputField.val() === "") {
                inputField.focus();
            } else {
                doSend();
            }
        }
    });

    inputField.keydown(function (e) {
        if (e.keyCode === 13) {
            sendBtn.click();
            e.preventDefault();
        }
    });
    // ... 其他代码 ...
</script>
  • doSend 方法：获取输入框中的内容，若内容长度超过 512 字符，则给出提示并返回；否则，调用 stompClient.send 方法将消息发送到 /app/chat/ 加上会话 ID 的地址，同时传递自定义头信息 {'s-uid': session}。发送消息后，清空输入框，在聊天界面添加用户消息，并禁用发送按钮。
  • 按钮点击事件：为发送按钮绑定点击事件，若 stompClient 为空，则调用 initWs 方法初始化连接；否则，若输入框内容为空，则将焦点聚焦到输入框，反之调用 doSend 方法发送消息。
  • 回车键事件：为输入框绑定按键事件，当按下回车键时，触发发送按钮的点击事件，并阻止回车键的默认行为。

综上所述，前端代码通过上述步骤实现了 WebSocket 的连接、消息的订阅和发送功能，从而与服务器进行实时通信。

4 小结

本文聚焦WebSocket的应用，涵盖其基础概念、Spring整合STOMP的流程图、Spring Boot应用集成WebSocket实现双向通信，以及技术派中基于WebSocket实现消息推送的全过程。

5 参考链接

  1. 技术派整合WebSocket实现消息实时推送
  2. 项目仓库（GitHub）
快递物流小程序代码实战：智能派送与全程追踪系统
s13596191285的博客
03-10 90
用户通过微信小程序可以实现寄件和收件的全流程操作，包括：快递查询与物流追踪（实时获取快递状态），在线下单预约寄件（选择寄件地址和快递公司），在线支付运费，电子签收确认，以及服务评价和反馈等。用户可输入运单号随时查询包裹当前的物流轨迹和位置 (小程序物流快递单号查询接口对接指南-腾讯云开发者社区-腾讯云在线下单时选择快递公司并预约快递员上门取件；支付环节支持微信支付等方式；当包裹送达时，收件人可以通过小程序进行电子签名确认收货，并对快递服务进行星级评价。
数据库选型粗略对比，欢迎补充！！！
qq_39904855的博客
07-22 3881
MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发，目前属于Oracle公司。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL是开源的，目前隶属于Oracle旗下产品。MySQL支持大型的数据库。可以处理拥有上千万条记录的大型数据库。MySQL使用标准的SQL数据语言形式。MySQL可以运行于多个系统上，并且支持多种语言。...
Swoole基础知识，安装，websocket应用及各种问题详解
weixin_41380972的博客
07-10 3203
1. swoole基础-概述 Swoole基础课程正式推出！零基础开始，让你循环渐进的掌握swoole。 传统的phper们大部分都是用于开发web应用程序，并且大部分都是在用类似yii\laravel\tp等框架进行开发。 但是phper们在面对比如即时通讯、长连接等问题的时候就显得力不从心了。 过去几年，Swoole完全颠覆了PHP，成为phper们必会且提升自我的一种技能。 那么问...
构建实时社交媒体应用：个人项目"connect"实战指南
weixin_35649491的博客
11-28 1025
本文还有配套的精品资源，点击获取 简介：在"personal-project-connect"个人项目中，开发者利用Web前沿技术创建了一个名为"connect"的社交媒体应用。该应用以实时聊天平台为特色，深入探讨了Socket.io、React.js、Redux、Node.js和Express等技术的集成与应用，提供了从后端服务搭建到前端界面构建的完整实践过程。开发者展示...
14万字面试题汇总整理，祝你顺利斩获大厂前端offer
热门推荐
孙叫兽的博客
07-17 1万+
Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是—种要求严格的DTD(Document Type Definition)，不允许使用任何表现层的语法， 混杂模式是—种向后兼容的解析方法。 触发标准模式或者说严格模...
[0408]基于JAVA的公务车监控智慧管理系统的设计与实现
muyu2980的专栏
08-05 594
系统将分为以下主要模块：实时监控模块（包括位置追踪与报警管理）、历史数据分析模块（行驶统计分析、违规行为监控）、车辆维护模块（维修管理、保养管理）、人员管理模块（司机管理、借用管理）、档案资料管理模块（车辆档案管理）、调度规划模块（路线规划、巡检管理、外派管理、用车申请审批）、财务管理模块（费用统计分析、燃油管理）、安全管控模块（车辆安全管理、消息通知）以及权限管理模块。综上所述，本系统旨在全面整合公务车辆管理的各项业务流程，借助先进的信息技术手段提高管理效能，降低运营成本，提升服务质量。
「查漏补缺」2020 截止9月2日 秋招前端面试经历 （已整理答案）
超逸の学习技术博客
09-02 2539
成功是一个过程，并不是一个结果。励志做一位优秀的前端博主，今天分享最近的面试记录（含答案）
JAVA_基础部分_综合篇
一点博客
09-05 1351
JVM (1) 基本概念： JVM是可运行Java代码的假想计算机 ，包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收，堆 和 一个存储方法域。JVM 是运行在操作系统之上的，它与硬件没有直接的交互。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLiFUoOZ-1630820376929)(06-JAVA面试核心知识点整理(时间较多的同学全面复习)].assets/JVM基本概念.jpg) (2) 运行过程： 我们都知道 Java 源文件，通过编译器，能够生产相应的
Golang 面试总结 MySQL 面试总结 Redis 面试总结
qq_36261130的博客
04-18 2026
相比较于其他语言, Go 有什么优势或者特点 Go 允许跨平台编译，编译出来的是二进制的可执行文件，直接部署在对应系统上即可运行 Go 在语言层面上天生支持并发编程，通过 goroutine 和 channel 实现。channel 的理论依据是 CSP 并发模型， 即所谓的通过通信来共享内存；Go 在 runtime 运行时里实现了属于自己的调度机制：GMP，降低了内核态和用户态的切换成本。 Go 是静态类型语言, 代码风格是强制性的统一，如果没有按照规定来，会编译不通过。 Golang 里的 GMP
一些可以参考的文档集合16
xuejianxinokok的专栏
02-23 979
一些不错的文档
震惊！这篇文章解读数据仓库、数据湖、数据中台等概念，竟然写了4万字！
芋艿V
07-22 754
点击上方“芋道源码”，选择“设为星标”管她前浪，还是后浪？能浪的浪，才是好浪！每天 8:55 更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2020 超神之路，很肝~中...
投票活动，有个人，团体，亲子三个菜单。 个人有A活动（1000个名额），需要填写姓名，电话； 团体有B活动（600个名额）需要填写队长姓名，队员姓名，电话； 亲子有D，E，F三个子活动（每个活动300张票），需要填写家属姓名，儿童姓名，电话 每人只能投一次，支持查看实时数据和导出 前端通过angular实现，后端通过springboot+jpa+mysql+redis实现，投票人数3万人
04-03
实时统计的话，可以用Redis的计数器，比如每个选项的票数用Hash存储，每次投票后递增，这样前端轮询或者用WebSocket推送给客户端。 导出功能的话，后端可能需要生成Excel或者PDF，用Apache POI或者iText库。权限...
笔记：Istio & 组件 基础概念学习
wifiiii的博客
02-26 4825
文章目录1. Istio是什么？1.1 读音1.2 简介1.3 服务网格是什么？1.4 为什么使用Isito？1.5 Istio 是如何诞生的?1.6 为什么我想用 ISTIO？1.7 目前Istio支持哪些部署环境？1.8 架构1.8.1 组件1.8.1.1 Envoy1.8.1.2 Pilot1.8.1.3 Citadel1.8.1.4 Galley1.8.2 设计目标2. 核心特性2.1 流量管理2.1.1 Istio 流量管理介绍2.1.2 虚拟服务2.1.2.1 为什么使用虚拟服务？2.1.2.1
在 Spring Boot 中实现 WebSockets
lssffy的博客
04-25 583
WebSockets是一种基于 TCP 的全双工通信协议，允许客户端和服务器之间建立持久的双向连接，用于实时数据交换。相较于传统的 HTTP 请求-响应模型，WebSockets 提供了低延迟、高效率的通信方式，特别适合需要实时更新的应用场景，如聊天应用、实时通知、在线游戏和股票价格更新。WebSockets 提供实时双向通信，Spring Boot 通过 STOMP 简化实现。示例展示了聊天应用及与分页、Swagger、ActiveMQ 等集成。
计算机网络核心知识点全解析（面试通关版）
最新发布
迷路的小绅士之家
04-25 495
计算机网络作为现代信息传输的基础设施，其核心知识体系围绕分层协议架构展开，涵盖从物理层到应用层的完整链路交互逻辑。分层模型以OSI 七层模型和TCP/IP 四层模型为核心，前者注重理论分层（如会话层、表示层的抽象设计），后者聚焦工程实践（合并功能至应用层），典型协议如 HTTP（应用层）、TCP/UDP（传输层）、IP（网络层）、Ethernet（链路层）通过封装与解封装实现跨层协作。传输层以TCP 可靠性机制为核心，通过三次握手（防历史连接）、四次挥手（TIME_WAIT 确保安全释放）、滑动窗口（流量控
计算机网络中科大 - 第7章 网络安全（详细解析）-以及案例
专研计算机网络，数据通信，网络安全，系统集成
04-16 1208
核心技术说明加密算法认证机制Nonce、防重放攻击、数字签名报文完整性哈希算法、MAC、数字签名密钥管理KDC、CA、证书链网络安全措施防火墙、IDS、ACL、分组过滤实践协议攻击防御窃听、重放、IP欺骗、DoS及其防范措施。
Springboot集成websocket实现消息推送
Spirit_NKlaus的专栏
04-21 306
假设有个需求需要多个用户同时在对应的消息面板实时查看相关接口的执行流程进度，此时可以可考虑使用websocket来实现结果进度推送。二、编写WebSocket服务类，用户和客户端进行交互。三、编写controller模拟接口执行进度监控。四、使用在线websocket连接工具进行测试。一、编写WebSocket配置类。
【每日八股】复习计算机网络 Day4：TCP 协议的其他相关问题
YGGP的博客
04-23 712
根据 csview 对计算机网络中 TCP 协议的相关知识进行学习。
计算机网络——常见的网络攻击手段
S_ZaiJiangHu的博客
04-19 1213
XSS 攻击，全称跨站脚本攻击（Cross-Site Scripting），这会与层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，因此有人将跨站脚本攻击缩写为XSS。它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意攻击用户的特殊目的。对于链接跳转，如 <a href=“xxx” 等，要校验内容，禁止以script开头的非法链接。不相信用户的输入，对输入进行过滤，过滤标签等，只允许合法值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值