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 相关文章推荐
html下载本地
Jun 19 Javascript
js 图片轮播(5张图片)
Dec 30 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 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
我的论坛源代码(四)
2006/10/09 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python实现图片批量压缩程序
2018/07/23 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
个人借款协议书范本
2014/11/17 职场文书
保卫工作个人总结
2015/03/03 职场文书
2016年元旦致辞
2015/08/01 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers