VUE+SpringBoot+Websocket实现前后端通信案例分享

PS→无奈：不为模糊不清的未来担忧，只为清清楚楚的现在努力。

版权声明：本文为博主原创文章，未经博主允许不得转载。

 醒来无事就把先前做过的一个websocket实现扫码登录的案例记录一下，以免以后再次用到而毫无头绪。

一.在接到这个需求的时候，我们首先应该做的就是好好缕清自己的思路，并且如果之前对websocket没有了解过的朋友们可以先自行了解一下，不用了解的很深刻，大致了解它的使用方法以及使用途径。并且根据你自身的业务，在脑子里或者在草稿纸上绘画一张流程图，这样可以更清楚直观的知道每一步的逻辑目的。

二.我使用websocket就是为了使用app实现扫二维码成功登陆网页版的需求。我的思路是这样的：
1).首先在浏览器输入网页版项目路径的时候跳转至网页版登陆页面，此时使用websocket与后台进行连接。
2).登陆页的登录选项卡我们项目默认的是账号密码登陆选项卡，在点击扫码登录选项卡的时候触发一个函数跳转至后台生成一个跳转至app端验证的url二维码图片和一个唯一标识并且返回给前端。
3).用户用已经登录好的app扫描该二维码，跳转至app验证确认登录页面，app点击确认之后回调我们后端扫码登录的接口，是否成功，返回相应code给app端。

三.然而使用的过程中碰到很多坑，时间过了很久，大致的也往的差不多了，有连接始终连接不上的问题（后台项目使用shiro拦截掉了websocket的链接请求），也有消息发送失败的问题（后台无法获取到socket里面的Session），还有最后很搞的一个bug，就是多个电脑同时在登录页使用二维码登陆的话，用app扫描其中任何一个二维码，两个网页版项目都会登录。——O(∩_∩)O哈哈~（这个问题是因为后台发送消息的时候没有指定向哪个前端发送消息，而是广播式的发送消息给所有前端浏览器），这是三个大的问题，其余的也碰到一些小的问题，此处就不做详细的描述了。

直接上我们的主角（代码）上台表演吧！！！（相信大家最期待的就是这段表演了~~~~O(∩_∩)O哈哈~ 我也一样）
vue前端效果图及代码：效果图不咋的，因为我们公司没有前端所有前端都是我们后端自己搞的~~~尴尬(*^▽^*)

<el-col id="login-box" :xs="{span: 22,offset: 1}" :sm="{span: 20,offset: 2}" :md="{span: 7, offset: 1}">
          <el-menu :default-active="activeIndex" v-model="menuIndex" class="el-menu-demo" mode="horizontal"
                   @select="handleSelect" active-text-color="#FECE00">
            <el-menu-item index="1" @click="saoma" class="menu-item">扫码登录</el-menu-item>
            <el-menu-item index="2" class="menu-item">蘑菇丁账号登录</el-menu-item>
          </el-menu>
          <div id="login-box-context">
            <el-form id="login-form" ref="loginForm" :model="form" v-show="menuIndex==2" :rules="rules">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" @keyup.enter.native="doLogin" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-row :gutter="20">
                  <el-col :span="14">
                    <el-input v-model="form.captcha" placeholder="请输入验证码" @keyup.enter.native="doLogin">
                    </el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                    <img :src="captchaPath" @click="getCaptcha()" alt="">
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button @click="onSubmit" type="primary"  :disabled="config.disabled" style="background-color: #FECE00;border-color: #FECE00;">
                  登录
                </el-button>
              </el-form-item>
            </el-form>
            <div id="qc-login" v-show="menuIndex==1">
              <div id="qrcode">
                <img alt="" src=""  id="pic"/>
                <div id="gone" style="display: none;position: absolute;height: 200px;
                                                    width: 200px;color: rgb(255, 255, 255); z-index: 1;
                                                    line-height: 54px;overflow: hidden;bottom: 80px;
                                                    background: rgba(0, 0, 0, 0.7) none repeat scroll 0% 0%;">
                  <span style="font-size: 20px; font-weight: bolder;
                                margin-left: 40px;position: absolute;top: 50px;">二维码已失效</span><br/>
                  <button id="shua" @click="shuaxin" style="background-color: #f9c616;
                                 width: 90px;height: 35px; font-size: 17px;font-family: 黑体;
                                 margin-left: 55px;position: relative;top: 50px;line-height: 1;
                                  border: 1px solid rgb(220, 223, 230);">
                    刷新
                  </button>
                </div>
              </div>
              <!--<p style="font-size: 75px;color: white; text-align: center;margin: 0;padding: 0;">敬请期待</p>-->
              <p>请使用<a href="#/appDownLoad">蘑菇丁</a>扫描二维码登录</p>
            </div>
            <a id="register" href="/Register" target="_blank">企业注册</a>
          </div>
        </el-col>

websocket相关js代码：

import header from '../../components/Header.vue'
  import footer from '../../components/Footer.vue'
  import 'element-ui/lib/theme-chalk/display.css'
  import jQuery from 'jquery'
  import { getUUID } from '@/utils'
  import LocalStorageUtil from '@/utils/LocalStorageUtil'
  import md5 from 'js-md5'
  import AuthService from  '@/service/AuthService'

  export default {
    components: {
      "v-header": header,
      "v-footer": footer
    },
    data() {
      return {
        config: {
          disabled: false
        },
        captchaPath: '',
        menuIndex: "2",
        activeIndex: "2",
        code: null,
        websocket:null,
        uuid:null,
        token :null,