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实现自动切换播放的经典滑动门效果
Sep 12 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
微信jssdk用法汇总
Jul 16 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
一起深入理解js中的事件对象
Feb 06 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/10/09 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js使用心得分享
2015/01/13 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
Python内建数据结构详解
2016/02/03 Python
有趣的python小程序分享
2017/12/05 Python
python实现数据写入excel表格
2018/03/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
计算机专业求职信
2014/06/02 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书