vue发送websocket请求和http post请求的实例代码


Posted in Javascript onJuly 11, 2019

先给大家介绍下vue发送websocket请求和http post请求

直接上代码:

pdf.vue

<script>
  import SockJS from 'sockjs-client';
  import Stomp from 'stompjs';
  import qs from "qs"

  export default {
    name: "pdf",
    data() {
      return {
        newsData: [],
        tagGuid_mx: "",
        tagGuid_4AA_Ia: "",
        tagGuid_4AA_P: "",
        tagGuid_4AA_Q: "", 49         tagGuid_1AA_6_Ib: "",
        tagGuid_1AA_6_Ic: "",
        tagGuid_pdfwd: "",
        tagGuid_pdfsd: "",
        stompClient: '',
        timer: '',
        visibilityHeZha: "hidden",
        visibilityFenZha: "hidden",
        hezhaData:[]
      }
    },
    methods: {
      initWebSocket() {
        this.connection();
        let that = this;
        // 断开重连机制,尝试发送消息,捕获异常发生时重连
        this.timer = setInterval(() => {
          try {
            that.stompClient.send("test");
          } catch(err) {
            console.log("断线了: " + err);
            that.connection();
          }
        }, 5000);
      },
      connection() {
        // 建立连接对象
        let socket = new SockJS('http://XXX.XX.XX.XXX:8081/energy-system-websocket');
        // 获取STOMP子协议的客户端对象
        this.stompClient = Stomp.over(socket);
        // 定义客户端的认证信息,按需求配置
        let headers = {
          access_token: "92c31bd5-ae43-4f25-9aad-c4eb1a92d61d"
          //          Authorization: ''
        }
        // 向服务器发起websocket连接
        this.stompClient.connect(headers, () => {
          this.stompClient.subscribe('/user/topic/data', (msg) => { // 订阅服务端提供的某个topic
              console.log('广播成功')
              //            console.log(msg); // msg.body存放的是服务端发送给我们的信息
              console.log(msg.body);
              this.newsData = JSON.parse(msg.body);

            }, headers),
            this.stompClient.subscribe('/user/topic/alarm', (msg) => { // 订阅服务端提供的某个topic
              console.log('广播告警成功')
              //console.log(msg); // msg.body存放的是服务端发送给我们的信息
              console.log(msg.body);
              this.newsData = JSON.parse(msg.body);

            }, headers);
          this.stompClient.subscribe('/user/topic/cmd_ack', (msg) => { // 订阅服务端提供的某个topic
            console.log('下控指令应答成功')
            //console.log(msg); // msg.body存放的是服务端发送给我们的信息
            console.log(msg.body);
            this.newsData = JSON.parse(msg.body);

          }, headers);

          this.stompClient.subscribe('/user/topic/response', (msg) => { //指令的应答(仅表示服务端接收成功或者失败)
            console.log('SEND指令的应答成功')
            //console.log(msg); // msg.body存放的是服务端发送给我们的信息
            console.log(msg.body);
            this.newsData = JSON.parse(msg.body);
            this.newsData = this.newsData.data;
            console.log(this.newsData);
            for(var i = 0; i < this.newsData.length; i++) { 
              //母线uab
              if(this.newsData[i].tagGuid == "a3a95bf3-fef8-454e-9175-19a466e40c3d") {


                this.tagGuid_mx = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : ""
              }
              //电容柜4AA_Ia
              if(this.newsData[i].tagGuid == "4cf6e256-6c3a-4853-a087-dfd263916dab") {



                this.tagGuid_4AA_Ia = this.newsData[i].value 
              }
              //电容柜4AA_P
              if(this.newsData[i].tagGuid == "52e8265a-0a20-4e3b-a670-14a8df373bf7") {



                this.tagGuid_4AA_P = this.newsData[i].value 
              }
              //电容柜4AA_Q
              if(this.newsData[i].tagGuid == "ef369a17-0bbd-4295-8ac7-816c23fcb065") {



                this.tagGuid_4AA_Q = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : 0 
              }276               //配电房温度
              if(this.newsData[i].tagGuid == "ead49446-07f9-43b7-a4ce-cd974d53728e") {



                this.tagGuid_pdfwd = this.newsData[i].value 
              }
              //配电房湿度
              if(this.newsData[i].tagGuid == "baaf1733-124e-46fd-9d58-c069b747317a") {



                this.tagGuid_pdfsd = this.newsData[i].value 
              }

            }
          }, headers);
          this.stompClient.send("/app/monitor/subTagGuid", // # 订阅需要监控的测点ID
            headers,

            JSON.stringify({
              "stationCode": "00013",
              "tagGuids": [
                "a3a95bf3-fef8-454e-9175-19a466e40c3d", //
                "4cf6e256-6c3a-4853-a087-dfd263916dab", //
                "52e8265a-0a20-4e3b-a670-14a8df373bf7", //
                "ef369a17-0bbd-4295-8ac7-816c23fcb065", //334                 "baaf1733-124e-46fd-9d58-c069b747317a"
              ]
            })
          ) //用户加入接口
        }, (err) => {
          // 连接发生错误时的处理函数
          console.log('失败')
          console.log(err);
        });
      }, //连接 后台
      disconnect() {
        if(this.stompClient) {
          this.stompClient.disconnect();
        }
      }, // 断开连接
      changeColor(evt) {
        this.rect.setAttributeNS(null, "fill", "blue")
      },
      shl3aa4() {
        this.visibilityHeZha = this.visibilityHeZha == "visibility" ? "hidden" : "visibility";
        this.visibilityFenZha = this.visibilityFenZha == "visibility" ? "hidden" : "visibility";
      },
      shl3aa42() {
        setTimeout(() => {
          this.visibilityHeZha = "hidden";
          this.visibilityFenZha = "hidden";
        }, 1200)
      },
      hezha() {
        //3#楼3AA-4_合闸
        this.$axios.post("/energy-system/auth/monitor/ykcmd", {
            checkUser: "admin",
            checkPass: "123456",
            stationCode:"00013",
            tagGuid: "89d1d312-17be-4d20-8471-baa08ba734e0",
            value: 1
          })
          .then(res => {
            this.hezhaData=JSON.parse(res.config.data)
            if(this.hezhaData.tagGuid=="89d1d312-17be-4d20-8471-baa08ba734e0" && this.hezhaData.value==1){
              alert("合闸成功!");
            }else{
              alert("合闸失败!请联系管理员");
            }379           })
          .catch(error => {
            console.log(error)
          })
      },
      fenzha() {
        alert("分闸"); //3#楼3AA-4_分闸
      }
    },
    mounted() {
      this.initWebSocket();
    },
    beforeDestroy: function() { // 页面离开时断开连接,清除定时器
      this.disconnect();
      clearInterval(this.timer);
    },
    created() {

    }
  }
</script>

在main.js设置全局http地址:

Axios.defaults.baseURL = 'http://XXX.XXX.XX.XXX:9001';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

在main.js中设置header中token值:

// 添加请求拦截器
Axios.interceptors.request.use(function(config) {
  config.headers.access_token = "add7c097-f12b-40fe-8e48-6fe1f2120fa5";
  //  config.headers.Authorization = localStorage.token; //将token设置成请求头
  console.log("请求============" + config);
  // 在发送请求之前做些什么
  return config;
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

vue发送websocket请求和http post请求的实例代码

数据刷起来!

ps:下面给大家介绍下vue websocket 请求

首先写一个公共方法

socket.js

function getSocket(url, params, callback) {
  let socket;
  if (typeof (WebSocket) === 'undefined') {
    console.log('您的浏览器不支持WebSocket');
  } else {
    console.log('您的浏览器支持WebSocket');
    // 初始化 WebSocket 对象,指定要连接的服务器地址与端口建立连接
    socket = new WebSocket(url);
    // 打开事件
    socket.onopen = function() {
      console.log('Socket 已打开');
      socket.send(params);
    };
    // 获得消息事件
    socket.onmessage = function(msg) {
      // 发现消息进入, 开始处理前端触发逻辑
      callback(msg, socket);
    };
    // 关闭事件
    socket.onclose = function() {
      console.log('Socket 已关闭');
    };
    // 发生了错误事件
    socket.onerror = function() {
      console.log('Socket 发生了错误,请刷新页面');
      // 此时可以尝试刷新页面
    };
  }
}
export {
  getSocket
};

使用

test.vue

<script>
import {getSocket} from '@/utils/socket.js';
export default {
  data() {
    return {
      wsData: {}, // 保存 websocket 数据对象
      form: { // 表单
        name: '',
        age: ''
      }
    }
  },
  beforeDestroy() {
    this.wsData.close(); // 关闭 websocket
  },
  created() {
    this.getSocketData();
  },
  methods: {
    // 获取数据
    getSocketData() {
      let params = this.form;
      getSocket(
        `ws://path`,
        JSON.stringify(params),
        (data, ws) => {
          console.log(data, ws);
          // 保存数据对象, 以便发送消息
          this.wsData = ws;
        }
      );
    },
    // 发送数据
    sendSocketData() {
      let params = this.form;
      params.name = 'xx';
      params.age= '18';
      this.wsData.send(JSON.stringify(params));
    }
  }
}
</script>

总结

以上所述是小编给大家介绍的vue发送websocket请求和http post请求的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
javascript 闭包详解
Jul 02 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 #Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
vue项目中实现缓存的最佳方案详解
Jul 11 #Javascript
浅入深出Vue之组件使用
Jul 11 #Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 #Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 #Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
django中静态文件配置static的方法
2018/05/20 Python
Python编程中类与类的关系详解
2019/08/08 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Django权限设置及验证方式
2020/05/13 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
球队口号
2014/06/18 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
2015年医德考评自我评价
2015/03/03 职场文书