Vue中使用websocket(开箱即用)

淩亂°似流年 2022-12-03 11:30 144阅读 0赞

<template>
      <div class="test">
      </div>
    </template>
    
    <script>
    export default { 
      name: 'test',
      data() { 
        return { 
          websocket: null,
        }
      },
      created() { 
     	 // 初始化
        this.initWebSocket()
      },
      destroyed() { 
      	// 关闭链接
        this.websocket.close()
      },
      methods: { 
        initWebSocket() { 
          const uri = 'ws://127.0.0.1:5000/ws/message'
          this.websocket = new WebSocket(uri)
          this.websocket.onmessage = this.websocketOnMessage
          this.websocket.onopen = this.websocketOnOpen
          this.websocket.onerror = this.websocketOnError
          this.websocket.onclose = this.websocketClose
        },
        websocketOnOpen() { 
          console.log('建立连接')
        },
        websocketOnError() {  // 连接建立失败重连
          this.initWebSocket()
        },
        websocketOnMessage(e) {  // 数据接收
          console.log(e.data)
          this.percent = Number(e.data)
        },
        websocketSend(data) {  // 数据发送
          this.websocket.send(data)
        },
        websocketClose(e) {  // 关闭
          console.log('断开连接', e)
        },
      },
    }
    </script>
    
    <style>
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关开箱即用的物联网平台-IoTLink

物联网平台是物联网生态系统的重要组成部分，也是一个快速增长的市场，物联网平台为企业提供了巨大的价值，使他们能够降低开发成本、加速启动和简化流程。一个完整的物联网系统需要硬件

柔光的暖阳◎/ 2024年03月27日 10:26/ 0 赞/ 61 阅读

相关 Kubernetes — Kubespray 开箱即用的部署工具

目录文章目录目录 Kubespray 部署 Kubernetes Cluster（不含 CNI）资源配置软件版本

- 日理万妓/ 2023年10月04日 16:08/ 0 赞/ 17 阅读

相关 react + sass 模板【开箱即用】

react + sass 模板前言：在框架中使用sass可以提高前端编写代码的效率，目前市场中常用且热门的框架:Vue和react，之前已经把vue2和vue3使

﹏ヽ暗。殇╰゛Y/ 2023年10月02日 15:22/ 0 赞/ 13 阅读

相关 Spring Boot 开箱即用，内藏玄机

![format_png][] > Spring Boot 提供了很多开箱即用的依赖模块，那么，Spring Boot 如何巧妙的做到开箱即用，自动配置的呢？开箱即用，

客官°小女子只卖身不卖艺/ 2023年09月23日 15:27/ 0 赞/ 95 阅读

相关开箱即用的SpringBoot模板

开箱即用的SpringBoot模板前言如果你从事的开发岗位是独立开发一个完整的项目的时候，我们需要前期做很多的开发准备，特别是使用比较多的技术栈的时候，我们前期

梦里梦外;/ 2022年12月14日 13:40/ 0 赞/ 280 阅读

相关开箱即用的Dubbo模版

开箱即用的Dubbo模版前言近期做的项目是一个采用`Dubbo`架构的微服务项目，由于之前虽然学习过`Dubbo`架构但是一直没有机会独自搭建过，于是趁着这个机

客官°小女子只卖身不卖艺/ 2022年12月06日 15:14/ 0 赞/ 145 阅读

相关 Vue中使用websocket(开箱即用)

<template> <div class="test"> </div> </template> <script>

淩亂°似流年/ 2022年12月03日 11:30/ 0 赞/ 145 阅读

相关开箱即用，超实用的 Vue 自定义指令合集

![91c773b74460828a3da18e5756e55d88.png][] 作者：Huup\_We juejin.cn/post/69638404018997

比眉伴天荒/ 2022年10月14日 13:54/ 0 赞/ 353 阅读

相关开箱即用 vue-cli4 uniapp Webpack4 移动端框架方案

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdXIgaG9tZQ_size_20_colo

梦里梦外;/ 2022年09月10日 01:19/ 0 赞/ 272 阅读

相关 go语言开箱即用

一、安装并配置环境 Windows 下可以使用 .msi 后缀(在下载列表中可以找到该文件，如go1.4.2.windows-amd64.msi)的安装包来安装。默认情况下

傷城~/ 2022年02月13日 11:47/ 0 赞/ 263 阅读