详解java WebSocket的实现以及Spring WebSocket

第一步：配置Spring

如果你跟我一样采用的Maven，那么只需要将下面的依赖，加入到pom.xml文件就可以了：

<!--spring websocket库-->
 <dependency>
          <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.context.version}</version>
 </dependency>

 

第二步：配置WebSocket

使用Configurer类和 Annotation来进行WebSocket配置。
首先要创建一个类，继承WebSocketMessageBrokerConfigurer，并且在类上加上annotation：@Configuration和@EnableWebSocketMessageBroker。这样，Spring就会将这个类当做配置类，并且打开WebSocket。

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;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //添加这个Endpoint，这样在网页中就可以通过websocket连接上服务了
        registry.addEndpoint("/ws").withSockJS();
    }
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        System.out.println("服务器启动成功");
        //这里设置的simple broker是指可以订阅的地址，也就是服务器可以发送的地址
        /**        
         * user 用于用户聊天
         */
        config.enableSimpleBroker("/topic","/user");
        config.setApplicationDestinationPrefixes("/app");
    }
}

 第一个方法，是registerStompEndpoints，大意就是注册消息连接点（我自己的理解），所以我们进行了连接点的注册：

registry.addEndpoint("/ws").withSockJS();

我们加了一个叫coordination的连接点，在网页上我们就可以通过这个链接来和服务器的WebSocket连接了。但是后面还有一句withSockJs，这是什么呢？SockJs是一个WebSocket的通信js库，Spring对这个js库进行了后台的自动支持，也就是说，我们如果使用SockJs，那么我们就不需要对后台进行更多的配置，只需要加上这一句就可以了。

第二个方法，configureMessageBroker，大意是设置消息代理，也就是页面上用js来订阅的地址，也是我们服务器往WebSocket端接收js端发送消息的地址。

config.enableSimpleBroker("/user");
config.setApplicationDestinationPrefixes("/app");

首先，定义了一个连接点叫user，从名字可以看的出，最后我会做一个聊天的例子。然后，设置了一个应用程序访问地址的前缀，目的估计是为了和其他的普通请求区分开吧。也就是说，网页上要发送消息到服务器上的地址是/app/user。

 

后端实现类：

 

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;


@Api(tags = "WebSocket控制器")
@ApiSupport(author = "abc", order = 10)
@RestController
public class WebSocketController {

    @Resource
    private SimpMessagingTemplate template;
    @Resource
    private AuthService authService;
    @Resource
    private CommonCacheOperator commonCacheOperator;
    public static final String WS_CACHE_ALL_KEY = "ws:";

    /**
     * 发送信息
     *
     * @author abc
     * @date 2024年10月10日10:36:00
     **/
    @ApiOperationSupport(order = 1)
    @ApiOperation("发送信息")
    @GetMapping("/app/send")
    public CommonResult<String> send(@ApiParam(value="用户Id", required = true) @RequestParam String userId,
            @ApiParam(value="发送消息message:(0='取消确认，1='扫码成功，2=小程序确认登录')", required = true) @RequestParam String message) {
        String qrCodeLink =CommonCryptogramUtil.doSm4CbcDecrypt(userId);
        Object obj=commonCacheOperator.get(WS_CACHE_ALL_KEY+userId);
        if(ObjectUtil.isEmpty(obj)) {
            return CommonResult.error("二维码已失效");
        }
        if(message.trim().equals("0")) {
            template.convertAndSendToUser(userId, "/token", CommonResult.data(false));
        } else if(message.trim().equals("1")) {
            template.convertAndSendToUser(userId, "/token", CommonResult.data(true));
        } else if(message.trim().equals("2")) {
            String token= authService.doLoginById(StpLoginUserUtil.getLoginUser().getId(), AuthDeviceTypeEnum.PC.getValue(), SaClientTypeEnum.B.getValue());
            template.convertAndSendToUser(userId, "/token", CommonResult.data(token));
            commonCacheOperator.remove(WS_CACHE_ALL_KEY+userId);
        }
        return CommonResult.ok();
    }

    /**
     * 订阅信息
     *
     * @author abc
     * @date 2024年10月10日10:36:12
     **/
    @ApiOperationSupport(order = 2)
    @ApiOperation("订阅信息")
    @GetMapping("/user/{userId}/token")
    public CommonResult<String> user(@PathVariable String userId) {
        return CommonResult.ok();
    }
    
    /**
     * 获取二维码
     *
     * @author abc
     * @date 2024年10月10日10:36:12
     **/
    @ApiOperationSupport(order = 3)
    @ApiOperation("获取二维码")
    @CommonNoRepeat
    @GetMapping("/app/getQRCode")
    public CommonResult<Map<String,String>> getQRCode(@ApiParam(value="时间戳", required = true) @RequestParam String tiem) {
        Map<String,String> map=new HashMap<String, String>();
        String randomString = RandomUtil.randomString(11);
        String qrCodeLink =CommonCryptogramUtil.doSm4CbcEncrypt(randomString);
        map.put("str", qrCodeLink);
        // 二维码宽度
        int qrCodeWidth = 190;
        // 二维码高度
        int qrCodeHeight = 190;
        try {
            commonCacheOperator.put(WS_CACHE_ALL_KEY+qrCodeLink, qrCodeLink, 5 * 60);
            BufferedImage qrCodeImage = QRCodeUtil.getQrCodeImage(qrCodeLink, qrCodeWidth, qrCodeHeight);
            String base64QrCode = QRCodeUtil.convertImageToBase64(qrCodeImage);
            map.put("img", base64QrCode);
        } catch (WriterException e) {
            e.printStackTrace();
        }
        return CommonResult.data(map);
    }

    @MessageMapping("/send") // 映射客户端发送的消息
    public void greeting(String message) throws Exception {
        System.out.println(message);
        //template.convertAndSendToUser("1", "/token", message);
        commonCacheOperator.put(WS_CACHE_ALL_KEY+message, message, 5 * 60);
    }
}

template.convertAndSendToUser(username, destination, message)  API。
它接受一个字符串用户名（客户端即前端创建随机码UUID），这意味着如果我们以某种方式为每个连接设置唯一的用户名，我们应该能够发送消息给订阅主题的特定用户。

 

第三步：配置Web端

首先我们要使用两个js库，一个是之前说过的SockJs，一个是stomp，这是一种通信协议，暂时不介绍它，只需要知道是一种更方便更安全的发送消息的库就行了。

需要连接服务端的WebSocket：

var socket = new SockJS('/ws');
var stompClient = Stomp.over(socket);
stompClient.connect('', '', function (frame) {});

没错，就只需要两句话。有了这三句话，我们就已经可以连接上了服务器。

 

使用SockJs还有一个好处，那就是对浏览器进行兼容，如果是IE11以下等对WebSocket支持不好的浏览器，SockJs会自动的将WebSocket降级到轮询（这个不知道的可以去百度一下），之前也说了，Spring对SockJs也进行了支持，也就是说，如果之前加了withSockJs那句代码，那么服务器也会自动的降级为轮询。（怎么样，是不是很兴奋，Spring这个特性太让人舒服了）

Vue3 源码：

<template>
  <div class="loginmain">
    <div class="loginbox relative">
      <div
        class="absolute top-13 right-2 w-15 h-15 bg-cyan-100 QRCode"
        v-if="isShowQRCode"
        @click="handleSwitch"
      ></div>
      <div
        class="absolute top-13 right-2 w-15 h-15 bg-cyan-100 password"
        v-else
        @click="handleSwitch"
      ></div>
      <span class="logo"><img src="@/assets/images/logo.png" style="height: 35px" /></span>
      <h2 style="margin-bottom: 0"><b>平台</b> </h2>
      <LoginForm v-if="isShowQRCode" />
      <div class="QRCodeCon" v-else>
        <div>
          <div
            class="w-full h-65.8 bg-light-50 flex justify-center items-center"
            v-if="showStatus == 1"
          >
            <!-- <img src="/static/images/组5196.png" class="w-50 h-50" /> -->
            <QrCode
              :value="qrCodeUrl"
              class="enter-x flex justify-center xl:justify-start"
              :width="240"
            />
            <div
              class="w-full h-50% z-100 bg-light-50/50 absolute flex justify-center items-center"
              v-if="timeoutStatus"
            >
              <RedoOutlined
                style="color: #000; font-size: 50px; font-weight: 1000; cursor: pointer"
                @click="handleRefresh"
              />
            </div>
          </div>
          <div
            class="w-full h-65.8 bg-light-50 flex flex-col items-center justify-center"
            v-if="showStatus == 2"
          >
            <div class="mb-2">
              <CheckCircleOutlined :style="{ fontSize: '50px', color: '#1890ff' }" />
            </div>
            <div class="text-[22px] mb-1">扫描成功！</div>
            <div class="text-[#9d9da7] text-[16px]">请在手机上根据提示确认登录！</div>
          </div>
          <div
            class="w-full h-65.8 bg-light-50 flex flex-col items-center justify-center"
            v-if="showStatus == 3"
          >
            <div class="mb-2">
              <CheckCircleOutlined :style="{ fontSize: '50px', color: '#9eba20' }" />
            </div>
            <div class="text-[22px] mb-1">登录成功！</div>
          </div>
          <div
            class="w-full h-65.8 bg-light-50 flex flex-col items-center justify-center"
            v-if="showStatus == 4"
          >
            <div class="mb-2">
              <CloseCircleOutlined :style="{ fontSize: '50px', color: '#f80000' }" />
            </div>
            <div class="text-[22px] mb-1">手机已拒绝登录！</div>
          </div>
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
    <div class="bottom" style="position: fixed; bottom: 0; width: 100%; height: 80px">
      <div class="main-bottom-wrapper">
        <a
          style="color: rgb(160 160 160); text-decoration: none"
          href="https://beian.miit.gov.cn"
          target="_blank"
        >
          XXXXXXXXXXXXXXXXXXXXX</a
        >
        <br />
        <img src="/static/images/gtimg.png" class="home-icon" />
        <a
          style="color: rgb(160 160 160); text-decoration: none"
          href="https://beian.mps.gov.cn/#/query/webSearch?code=0000"
          rel="noreferrer"
          target="_blank"
          >XXXXXXXXXXXXXXXXX</a
        >
      </div>
    </div>
  </div>
  <!-- <div class="bottom" style="height: 60px; text-align: center">
    <div class="container">
      <a
        href="https://beian.miit.gov.cn/"
        target="_blank"
        style="text-decoration: none; color: #49e"
        >xxxxxx</a
      >
    </div>
  </div> -->
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, computed } from 'vue';
  import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '@/components/Application';
  import LoginForm from './LoginForm.vue';
  import ForgetPasswordForm from './ForgetPasswordForm.vue';
  import RegisterForm from './RegisterForm.vue';
  import MobileForm from './MobileForm.vue';
  import QrCodeForm from './QrCodeForm.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useLocaleStore } from '@/store/modules/locale';
  import { CheckCircleOutlined, CloseCircleOutlined, RedoOutlined } from '@ant-design/icons-vue';
  import moment from 'moment';
  import { QrCode } from '@/components/Qrcode';

  import SockJS from 'sockjs-client/dist/sockjs.min.js';
  import Stomp from 'stompjs';

  import { useUserStore } from '@/store/modules/user';
  import { router } from '@/router';

  const userStore = useUserStore();

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });

  const globSetting = useGlobSetting();
  const { prefixCls } = useDesign('login');
  const { t } = useI18n();
  const localeStore = useLocaleStore();
  const showLocale = localeStore.getShowPicker;
  const title = computed(() => globSetting?.title ?? '');

  const isShowQRCode = ref(true);
  const handleSwitch = () => {
    isShowQRCode.value = !isShowQRCode.value;
    if (!isShowQRCode.value) {
      handleShowCode();
      countdown(countdownNum.value);
    }
    showStatus.value = 1;
  };
  const qrCodeUrl = ref('');
  const handleShowCode = () => {
    const generateRandomString = () => {
      const characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let randomString = '';
      for (let i = 0; i < 10; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        randomString += characters.charAt(randomIndex);
      }
      return randomString;
    };
    qrCodeUrl.value = generateRandomString();
    webSocketJS();
  };
  const stompClient = ref(null);
  const showStatus = ref(1);
  const webSocketJS = () => {
    let socket = new SockJS('/api/ws');
    stompClient.value = Stomp.over(socket);
    stompClient.value.heartbeat.outgoing = 10000;
    stompClient.value.heartbeat.incoming = 0;
    //去掉debug打印
    // stompClient.value.debug = null;
    //开始连接
    stompClient.value.connect(
      {},
      (frame) => {
        console.log('Connected:' + frame);
        console.info('[WebSocket] 连接请求发送成功!');
        //进行订阅服务
        //***连接
        stompClient.value.subscribe(`/user/${qrCodeUrl.value}/token`, (message) => {
          const { body } = message;
          if (body) {
            const _body = JSON.parse(body);
            const { data } = _body;
            if (data.toString() == 'true') {
              showStatus.value = 2;
            }
            if (data.toString().length > 10) {
              showStatus.value = 3;
              userStore.setToken(data);
              router.push('/index/index');
            }
          }
        });
        stompClient.value.send('/app/send', {}, qrCodeUrl.value, (res) => {
          console.log(res);
        });
      },
      () => {
        // 断开连接
        console.log('连接请求发送失败');
        //一连接请求发送失败就关闭
        // this.buttonStatus = true;
      },
    );
  };
  const timeoutStatus = ref(false);
  const intervalId = ref(null);
  const countdown = (durationInSeconds) => {
    let remainingTime = durationInSeconds;
    intervalId.value = setInterval(() => {
      const minutes = Math.floor(remainingTime / 60);
      const seconds = remainingTime % 60;

      console.log(`${minutes}:${seconds < 10 ? '0' : ''}${seconds}`);

      if (remainingTime === 0) {
        clearInterval(intervalId.value);
        timeoutStatus.value = true;
      } else {
        remainingTime--;
      }
    }, 1000);
  };
  const handleRefresh = () => {
    timeoutStatus.value = false;
    countdown(countdownNum.value);
    handleShowCode();
    clearInterval(intervalId.value);
  };
  const countdownNum = ref(60);
  onUnmounted(() => {
    stompClient.value.disconnect();
    clearInterval(intervalId.value);
  });
</script>
<style lang="less">
  @import 'login';
</style>
<style lang="less" scoped>
  .main-bottom-wrapper {
    bottom: 0;
    width: 370px;
    height: 40px;
    margin: 0 auto;
    margin-top: 15px;
    padding-bottom: 15px;
    text-align: center;
  }

  .home-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
  }

  .QRCode {
    background: url('/static/images/组5196.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .password {
    background: url('/static/images/组5197.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .loginbox {
    border-radius: 0;
  }
</style>