20210814_websocket前后端通讯学习笔记

1概述

代码github地址:

https://github.com/kikop/mywebsocketdemo.git

本文基于SpringBoot V2.1.4,spring-boot-starter-websocket

前面模板引擎:spring-boot-starter-thymeleaf

前端依赖js:

image-20210814221439116.png

2代码实战

2.1maven依赖

2.2配置类

package com.kikop.config;

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

/**
 * @author kikop
 * @version 1.0
 * @project Name: mywebsocketapp
 * @file Name: WebSocketConfig
 * @desc
 * @date 2021/3/30
 * @time 8:00
 * @by IDE: IntelliJ IDEA
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketStomConfig implements WebSocketMessageBrokerConfigurer {

    /**
     * 设置socket连接
     *
     * @param stompEndpointRegistry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {

        // 设置前后台通讯的端点:
        // http://localhost:8085/fbSocket
        stompEndpointRegistry.addEndpoint("/fbSocket")
                // 解决跨域问题
                .setAllowedOrigins("*")
                //解决跨域问题
//                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

    /**
     * 设置发布订阅的主题:购物信息:myorder,学习信息:myscore
     *
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/myorder", "/myscore");
    }
}

2.3业务控制类

package com.kikop.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @author kikop
 * @version 1.0
 * @project Name: mywebsocketapp
 * @file Name: WebSocketController
 * @desc
 * @date 2021/3/30
 * @time 8:00
 * @by IDE: IntelliJ IDEA
 */
@Controller
public class WebSocketController {

    // spring-messaging
    // 发送消息的模板
    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;


    /**
     * 服务端想客户端发送消息
     */
    @RequestMapping("/ssendToClient")
    @ResponseBody
    public String ssendToClient() {

        // 订阅主题，只有订阅了这个主题的连接才会接收消息
        String topic = "/myorder/userId/10010";
        // 消息内容:String
        String message = "你好呀";
        simpMessagingTemplate.convertAndSend(topic, message);
        return "调用成功！";
    }

    /**
     * 客户端向客户端发送消息
     */
    @MessageMapping("/csendToClient")
    @SendTo("/myorder/userId/10010")
    @ResponseBody
    public String csendToClient(String msg) {
        System.out.println(msg);
        return msg;
    }

    /**
     * 返回首页
     * @return
     */
    @RequestMapping("/webSocketIndex")
    public String webSocketIndex() {
        return "webSocketIndex";
    }

}

2.4测试

进入页面:http://localhost:8085/webSocketIndex

压测url地址:http://localhost:8085/ssendToClient

image-20210814221841737.png

3总结

3.1响应的数据帧heads结构

// frame.heders 数据结构
destination:/myorder/userId/10010
content-type:text/plain;charset=UTF-8
subscription:sub-0
message-id:mosbdd1i-19
content-length:9

参考

1springboot集成webSocket实现网络实时通讯

https://www.jianshu.com/p/969da26d5bea