zoukankan      html  css  js  c++  java
  • vue中开发webSocket

    先安装 sockjs-client 和 stompjs

    npm install sockjs-client
    npm install stompjs

    <template>
    <div>
    <el-row :gutter="5">

    <div class="head">WebSocket接收后端数据</div>

    <div class="block">
    {{content.age}}
    </div>
    <el-button type="primary">提交</el-button>


    </el-row>

    </div>
    </template>

    <script>
    import FloorDashboard from './FloorAndArea'
    import Stomp from "stompjs"
    import SockJS from "sockjs-client"

    export default {
    name: "Index",
    data() {
    return {
    content: ""
    }
    },
    mounted() {
    this.connect();
    },
    methods: {
    connect() {
    //连接SockJS的endpoint名称为"endpointOyzc"
    let socket = new SockJS('http://test.jd.com:8082/endpointOyzc');
    //使用STMOP子协议的WebSocket客户端
    let stompClient = Stomp.over(socket);

    //连接WebSocket服务端
    stompClient.connect({}, () => {
    //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
    // stompClient.subscribe('/topic/getResponse', function (response) { //广播监听数据
    stompClient.subscribe('/user/1/message', (response) => {
    let dataType = typeof response.body;
    switch (dataType) {
    case "string":
    this.content = JSON.parse(response.body);
    console.log("type is string");
    console.log(this.content);
    break;
    case "object":
    console.log(this.content);
    console.log("type is string");
    this.content = response.body;
    }
    });
    });
    }
    }
    }
    </script>

    <style scoped>

    </style>


  • 相关阅读:
    HDU 1013 Digital Roots
    HDU 1290 献给杭电五十周年校庆的礼物
    几何分割问题
    HDU 1222 Wolf and Rabbit
    HDU 1997 汉诺塔VII
    HDU 1443 Joseph
    HTML的标题样式
    HDU 1568 Fibonacci
    Hope
    HDU 1071 The area
  • 原文地址:https://www.cnblogs.com/leigepython/p/10622476.html
Copyright © 2011-2022 走看看