【TGAM-springboot入门练手项目】Springboot 整合websocket实现后端推送(前端部分)

系统管理员 2022-10-30 03:29 25阅读 0赞

# TGAM-springboot入门练手项目 #

> 此项目是个人参与工作室的一个项目，分为硬件、IOS、WEB、后端、数据分析等几大部分，具有实际商用价值。而我虽然只是在其中打杂，写的后端也不够好，但是我会努力地将这系列文章写清楚、详细，若有什么疑问，欢迎QQ：674619459和我交流。另外你的点赞、收藏便是对我最大的鼓励！！  
> GITHUB：https://github.com/lyf712/TGAM-SpringBoot-Vue-Demo>  
> 简单介绍：https://blog.csdn.net/qq\_44654974/article/details/112990344

**开发篇**  
\-----基础篇  
springboot基本使用  
篇1 Springboot学习入门之基本框架搭建和相应准备工作

springboot实现基本功能  
篇2 Springboot整合mybatis实现简单登录功能  
篇3 Springboot调用阿里云SDK短信服务  
篇4 Springboot+mybatis实现简单地增删改查-用户管理  
篇5 Springboot结合Redis实现数据分控制位上传  
篇6 Springboot 定时任务做超时检验  
[篇7 Springboot 整合websocket实现后端推送，数据同步][7 Springboot _websocket]

springboot实现安全管理  
[篇1 采用jwt实现权限管理（一）][1 _jwt]  
[篇2 采用jwt+shiro实现权限管理（二）][2 _jwt_shiro]  
篇3 采用对称和非对称算法进行数据加密传输

\-----提升篇  
篇1 websocket进行长连接传输数据  
篇2 NGINX+tomcat集群  
篇3 初识多线程并发编程  
篇4 初识netty

**部署篇**  
  
篇1 springboot部署阿里云Tomcat  
篇2 springboot+Vue部署阿里云Tomcat并使用NGINX反向代理  
[篇3 springboot+Vue部署阿里云Tomcat并使用NGINX反向代理][3 springboot_Vue_Tomcat_NGINX]

--------------------

### 文章目录 ###

*  TGAM-springboot入门练手项目
 *  前言

--------------------

# 前言 #

参考文章：

--------------------

一、数据发送页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]  
数据源配置界面：采用elementUI 的进度条和表格界面，构成，进行选择硬件配置信息，代码如下：

<el-steps :active="active" align-center >
            <el-step title="" icon="el-icon-s-platform"></el-step>
            <el-step title="" icon="el-icon-s-data"></el-step>
            <el-step title="" icon="el-icon-s-claim"></el-step>
          </el-steps>
    
          <el-row>
            <el-col span="8">
              <h4>选择数据源</h4>
              <p style="font-size: smaller">选择需要连接的数据源</p>
            </el-col>
            <el-col span="8">
              <h4>配置数据源</h4>
              <p style="font-size: smaller">填写数据源配置信息</p>
            </el-col>
            <el-col span="8">
              <h4>启用连接</h4>
              <p style="font-size: smaller">向目标设备发起连接</p>
            </el-col>
          </el-row>
    
    
          <el-table ref="filterTable" :data="tableData" height="300" style="width: 100%;" :style="{ display: displayTable}" >
    
            <el-table-column prop="id" label="ID" sortable width="180" column-key="id" :filter-method="filterHandler" >
    
            </el-table-column>
    
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
    
            <el-table-column prop="introduce" label="简介" :formatter="formatter">
            </el-table-column>
    
            <el-table-column label="选 择" width="100" filter-placement="bottom-end">
              <template slot-scope="scope">
                <el-button type="primary" @click="turnTo(scope.row.id)" :disabled="scope.row.flag" style="margin-right: 30px">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <SetDataStream :style="{ display: displaySetDataStream}"></SetDataStream>
        </el-main>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]  
数据传输界面：采用elementUI 的折叠、技术器、多选框、按钮组成。逻辑点在于按钮的点击切换（隐藏与显示）以及设置data,动态绑定计数显示。标签内的数据\{ \{\}\},标签中的数据绑定 :style="\{display: displayTable\},v-model="" ;代码如下

<el-main>
      <el-collapse>
        <el-collapse-item title="运行信息">
          <el-progress type="circle" :percentage="percent" :color="color">
          </el-progress>
          <div>
            <p>已连接时间:    {
       {connectedTime}}s</p>
            <p>缓冲区状态:    {
       {gatherData}}/{
       {bufferSize}}</p>
            <p>流持续时间:    {
       {streamTime}}s</p>
            <p>实时采样率:    {
       {rate}}HZ</p>
            <p>数据流配置:    </p>
            <p>数据流状态:    {
       { status }}</p>
          </div>
    
        </el-collapse-item>
        <el-collapse-item >
    
          <template slot="title" style="font-weight: bolder; font-size: small">
           配置数据流<i class="el-icon-info"/>
          </template>
    
          <el-row>
             <span class="demonstration" style="font-size: small; font-weight: bold"> 缓冲区大小 </span>
            <div class="block">
              <el-slider v-model="bufferSize" show-input :step="2">
              </el-slider>
            </div>
    
    
          </el-row>
    
          <el-row>
            <span class="demonstration" style="font-size: small; font-weight: bold" > 流参数 </span>
    
            <el-select v-model="val" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
    
            <span class="demonstration" style="font-size: small; font-weight: bold;margin-left: 10px" > 设置间隔 </span>
            <el-input-number size="mini" v-model="interval"></el-input-number>
    
          </el-row>
        </el-collapse-item>
    
      </el-collapse>
    
        <el-row style="margin-top: 10px">
    
          <el-button type="success" @click="handleConnect" :style="{ display: displayConnectBtn}" >开始连接</el-button>
    
          <el-button type="info" @click="handleConnectAgain" :style="{ display: displayConnectAgainBtn}">重新连接</el-button>
    
          <el-button type="info" @click="handleSuspend" :style="{ display: displaySuspendBtn}">暂停连接</el-button>
    
          <el-button type="info" @click="handleRecover" :style="{ display: displayRecoverBtn}">恢复连接</el-button>
    
          <el-button type="danger" @click="handleUnConnect" :style="{ display: displayUnConnectBtn}"> 断开连接</el-button>
    
        </el-row>
      </el-main>

二、数据接收页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 2]

三、数据交互

1.数据解析  
websocket转发过来是字符串需要解析，但是存在时间戳等格式问题，可以再后端进行处理之后发送过来。  
前端处理办法  
var json = JSON.stringfy(res)  
var datas = eval("\["+json+"\]")  
此时datas转换为JSON数组

2.关于websocket拿数据  
在onmessage中直接调用或者使用数据是不行的，因为数据域不同，因此需要使用如下办法进行处理  
在onmessage中使用 fun1(data)  
再在外部声明一个fun2 进行使用data，另外fun2需要绑定fun1

//获得消息事件
            this.socket.onmessage = function(msg) {
              console.log(msg.data);
              var json = JSON.stringify(msg.data);
              var test = eval("["+json.substring(2,msg.data.length)+"]")
              console.log(json,",",test[0]);
               fun1(test);
              //发现消息进入    开始处理前端触发逻辑
            };
    
            let fun2 = function (val) {
              for(var i = 0;i<val.length;i++){
          
                this.updateRawEEG(val[i]["raw_eeg"]);
                this.updateAttentionChart(val[i]["timestamp"],val[i]["attention"]);
                this.updateMeditationChart(val[i]["timestamp"],val[i]["mediation"]);
                setTimeout(()=>{},500)
              }
    
            }
            // 绑定
            let fun1 = fun2.bind(this);

[7 Springboot _websocket]: https://blog.csdn.net/qq_44654974/article/details/113528028
[1 _jwt]: https://blog.csdn.net/qq_44654974/article/details/113447118
[2 _jwt_shiro]: https://blog.csdn.net/qq_44654974/article/details/113479769
[3 springboot_Vue_Tomcat_NGINX]: https://blog.csdn.net/qq_44654974/article/details/112854834
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/d170a26c611a44cba2712f01a3cd4062.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/0a253e1135b6401f98f17f6f70693d4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/5c04c7c67d07491a892330ba07ac28da.png