java中集成sockjs、stomp前端pc（vue）、h5和微信小程序连接

后端代码

import cn.hutool.core.util.ObjectUtil;
import cn.hutool.core.util.StrUtil;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.Message;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.messaging.simp.stomp.StompCommand;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.messaging.support.ChannelInterceptor;
import org.springframework.messaging.support.MessageHeaderAccessor;
import org.springframework.scheduling.concurrent.ThreadPoolTaskScheduler;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.oauth2.provider.OAuth2Authentication;
import org.springframework.security.oauth2.provider.token.RemoteTokenServices;
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 
 * <p>
 * WebSocket配置类
 */
@Slf4j
@Configuration
@AllArgsConstructor
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    private RemoteTokenServices tokenService;

    public static final String USER_DESTINATION_PREFIX = "/other/";


    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        log.info("WebSocket服务器注册");
        //配置两个入口，原因是因为小程序不支持sockjs
        registry.addEndpoint("/ws")
                .setAllowedOrigins("*")
                .withSockJS();
        registry.addEndpoint("/wsapp")
                .setAllowedOrigins("*");
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        log.info("WebSocket服务器启动");
        //心跳检测
        ThreadPoolTaskScheduler tpts = new ThreadPoolTaskScheduler();
        tpts.setPoolSize(1);
        tpts.setThreadNamePrefix("wss-heartbeat-thread-");
        tpts.initialize();

        ///信息接收头
        registry.enableSimpleBroker("/topic", "/user").setHeartbeatValue(new long[]{10000,10000}).setTaskScheduler(tpts); ;
        //接收前缀
        registry.setApplicationDestinationPrefixes("/app");
        //请求前缀
        registry.setUserDestinationPrefix(USER_DESTINATION_PREFIX);
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(new ChannelInterceptor() {
            @Override
            public Message<?> preSend(Message<?> message, MessageChannel channel) {
                StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
                // 判断是否首次连接请求
                if (StompCommand.CONNECT.equals(accessor.getCommand())) {
                    String tokens = accessor.getFirstNativeHeader("Authorization");
                    log.info("webSocket token is {}", tokens);
                    if (StrUtil.isBlank(tokens)) {
                        return null;
                    }
                    // 验证令牌信息
                    OAuth2Authentication auth2Authentication = tokenService.loadAuthentication(tokens.split(" ")[1]);
                    if (ObjectUtil.isNotNull(auth2Authentication)) {
                        SecurityContextHolder.getContext().setAuthentication(auth2Authentication);
                        accessor.setUser(() -> auth2Authentication.getName());
                        return message;
                    } else {
                        return null;
                    }
                }
                //不是首次连接，已经成功登陆
                return message;
            }
        });
    }
}

    @SubscribeMapping("/topic/pc")
    public R subPc() {
        return R.ok("订阅广播成功,当前时间："+new Date());
    }

前端代码

vue连接
先npm sockjs-client和stompjs
之后在页面引用
import SockJS from ‘sockjs-client’;
import Stomp from ‘stompjs’;

connection() {
        let headers = {
           Authorization: 'Bearer ' + "4cf7d2df-f4a2-4295-b267-03dca1910459"
        };
        // 建立连接对象，这里配置了代理
        this.socket = new SockJS('/other/ws', null, {
          timeout: 10000
        }); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
        // 获取STOMP子协议的客户端对象
        this.stompClient = Stomp.over(this.socket);

        // 向服务器发起websocket连接
this.stompClient.connect(
          headers,
          () => {

            this.stompClient.subscribe('/app/topic/pc', function(greeting) {
              console.log(greeting, 668);
            });
          },
          err => {
            console.log("订阅失败")
            
          }
        );
     

这样pc端就连接成功了

之后使用uni-app生成h5和微信小程序

先npm sockjs-client和stompjs
之后去node——mode_modules把sockjs和stompjs都都复制出来

找个地方放起来

之后在页面上引用

import webScoket from '../../static/js/socket'
	let stompClient = ''
	import {
		Stomp
	} from '../../static/js/stomp.js';
	import 
		SockJS
	 from '../../static/js/sockjs.min.js';

生命周期，利用uni-app的选择编码对微信小程序和h5做区分

onShow() {
			// #ifdef MP-WEIXIN
		    const that = this
			var headers = {
				Authorization: 'Bearer ' + "4cf7d2df-f4a2-4295-b267-03dca1910459"
			};
		    Promise.all([webScoket.init(), webScoket.client()]).then(result => {
		      stompClient = result[1]
		      stompClient.connect(headers, () => {
		          stompClient.subscribe('/app/topic/pc', response => {
		            that.oj=response;
					console.log('收到订阅消息')
		            if (response.body) {
		              const res = JSON.parse(response.body)
		    
		              // 业务逻辑
		            }
		          })
		        })
		    })
			// #endif
		},
		
		onHide() {
			// #ifdef MP-WEIXIN
		    app.globalData.isReConnect = false
		    stompClient.disconnect()
			// #endif
		},
		
		onUnload() {
			// #ifdef MP-WEIXIN
		    app.globalData.isReConnect = false
		    stompClient.disconnect()
			// #endif
		},
		onLoad() {
			// #ifdef H5
			var info = uni.getSystemInfoSync();
			console.log('platform:: ' + info.platform);
			if (info.platform == 'other' && typeof window === 'object') {
				window.WebSocket = uni.webSocketBackup;
			}
			this.say();
			// #endif
		},

		say() {
			
			var that = this;
			var headers = {
				Authorization: 'Bearer ' + "4cf7d2df-f4a2-4295-b267-03dca1910459"
			};
			 var socket = new SockJS('http://10.10.10.110/other/ws');
			
			var stompClient = Stomp.over(socket);
    stompClient.connect(
      headers,
      () => {

        stompClient.subscribe('/app/topic/pc', function(greeting) {
          console.log(greeting, 668);
        });

      },
      err => {
		 
        console.log("订阅失败")
       

      }
    );
		},

socket.js

const appData = getApp()
const webScoket = {
  // 创建基于STOMP协议的WebSocket
  client: function () {
    const Stomp = require('./stomp.min.js').Stomp
    // setInterval是用来发心跳包的，而小程序没有window对象，所以要重新定义
    Stomp.setInterval = (interval, f) => {
      return setInterval(f, interval)
    }
    Stomp.clearInterval = (interval, f) => {
      return clearInterval(id)
    }
    return new Promise((resolve, reject) => {
      try {
        const stompClient = Stomp.over(appData.globalData.ws)
        resolve(stompClient)
      } catch (e) {
        reject(e)
      }
    })
  },
  // 初始化
  init: function (url = '') {
    // 增加全局webscoket配置
    appData.globalData.isConnected = false
    appData.globalData.isReConnect = true // 允许断线重连
    appData.globalData.reConnectLimit = -1 // 断线重连次数，-1不限次数
    appData.globalData.msgQueue = []
    appData.globalData.wsUrl = url || 'ws://10.10.10.110/other/wsapp'//这里对应ws地址（不带.withSockJS();的入口）
    appData.globalData.ws = {
      send: this.sendMsg,
      close: this.disConnect,
      onopen: null,
      onclose: null,
      onmessage: null
    }
    const that = this
    return new Promise((resolve, reject) => {
      //连接
      this.connect({
        success(msg) {
          that.onOpen() // 打开连接
          that.onMsg() //接收数据
          that.onError() //监听连接错误
          that.onClose() // 监听连接是否关闭
          resolve(msg)
        },
        fail(err) {
          reject(err)
        }
      })
    })
  },
  // 创建一个WebSocket连接，params:{url:'String',success:'successCallback',fail:'failCallback'}
  connect: function (params = {}) {
    console.log('connect')
    wx.connectSocket({
      url: appData.globalData.wsUrl,
	  header:{
	  	Authorization: 'Bearer ' + "4cf7d2df-f4a2-4295-b267-03dca1910459"
	  },
      success: (msg) => {
        if (params.hasOwnProperty('success')) {
          params.success(msg)
        }
      },
      fail: (err) => {
        if (params.hasOwnProperty('fail')) {
          params.fail(err)
        }
      }
    })
  },
  // 监听WebSocket连接打开事件
  onOpen: function () {
    console.log('onopen')
    wx.onSocketOpen((res) => {
      console.log('WebSocket连接已打开')
      appData.globalData.isConnected = true
      // 执行队列里未发送的任务
      appData.globalData.msgQueue.forEach(item => {
        this.sendMsg(item)
      })
      appData.globalData.msgQueue = []
      appData.globalData.ws.onopen && appData.globalData.ws.onopen()
    })
  },
  // 发送消息
  sendMsg: function (msg) {
    console.log('sendmsg')
    // 如果WebSocket已连接则发送消息
    if (appData.globalData.isConnected) {
      wx.sendSocketMessage({
        data: msg
      })
    } else {
      // WebSocket没有连接将消息放入队列中
      appData.globalData.msgQueue.push(msg)
    }
  },
  // 监听WebSocket接受到服务器的消息事件
  onMsg: function () {
    console.log('onmsg')
    wx.onSocketMessage((res) => {
      console.log('WebSocket收到消息事件：', res)
      appData.globalData.ws.onmessage && appData.globalData.ws.onmessage(res)
    })
  },
  // 监听WebSocket连接错误事件
  onError: (res) => {
    console.log('onerror')
    wx.onSocketError((res) => {
      console.log("WebSocket错误事件：", res)
    })
  },
  // 关闭WebSocket连接
  disConnect: function () {
    console.log('disconnect')
    wx.closeSocket()
  },
  // 监听WebSocket连接关闭事件
  onClose: function () {
    console.log('onclose')
    wx.onSocketClose((res) => {
      console.log('WebSocket连接关闭：', res)
      appData.globalData.ws.onclose && appData.globalData.ws.onclose(res)
      appData.globalData.isConnected = false
      // 断线重连
      if (appData.globalData.isReConnect) {
        // 调整重连的次数
        if (!appData.globalData.hasOwnProperty('reConnectLimit') || appData.globalData.reConnectLimit === 0) {
          appData.globalData.isReConnect = false
        } else {
          if (appData.globalData.reConnectLimit > 0) {
            appData.globalData.reConnectLimit--
          }
          console.log('剩余重连次数：', appData.globalData.reConnectLimit)
          this.connect({
            fail(err) {
              console.log('重新连接失败：', err)
            }
          })
        }
      }
    })
  }
}

export default webScoket

之后可以通过发行微信将uni-app转换成微信小程序代码