上代码:

create:function(){

this.initWebpack()

}

methods:{  

initWebpack(){//初始化websocket
          let user = JSON.parse(localStorage.getItem('user')) 
          let userId = user.user.userId
          const wsuri = "ws://xxx.xxx.xxx.xxx:8086/webSocket?id="+userId+"&code=1";      //连接数据获取不到数据配合后端加个参数试试
          this.websock = new WebSocket(wsuri);
          this.websock.onopen = this.websocketopen;
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onclose = this.websocketclose;
          this.websock.onerror = this.websocketerror;
        },
        websocketopen(){//打开
          console.log("WebSocket连接成功")
        },
        websocketonmessage(e){ //数据接收
          consolo.log(e)
        },
        websocketclose(){  //关闭
          console.log("WebSocket关闭");
        },
        websocketerror(){  //失败
          console.log("WebSocket连接失败");
        },
        websocketsend(date){
          this.websock.send(date)
        },
}

vue使用websoket(非封装)的更多相关文章

  1. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  2. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  3. vue中的axios封装

    import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000;axios ...

  4. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  5. vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...

  6. vue中动画的封装

    <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacit ...

  7. Vue兄弟组件(非父子组件)状态共享与传值

      前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~  内容里的<br> ...

  8. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  9. 简述vue props和非props的2个特性

    props的2个特性 ①:父组件通过属性的方式传值(比如下面截图中的content)给子组件,content不会显示在DOM节点中                       ②:父组件向子组件传递值 ...

  10. Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...

随机推荐

  1. springboot mybatis 多数据源整合

    1.在application.properties中配置两个数据库: # db01 database spring.datasource.db01.jdbc-url=jdbc:oracle:thin: ...

  2. Spring Cloud相关组件说明

    1.Spring Cloud版本 现有Spring Cloud有两代实现,分为Spring Cloud Netflix和Spring Cloud Alibaba,由于SpringCloud Netfl ...

  3. Circle Loss:从统一的相似性对的优化角度进行深度特征学习 | CVPR 2020 Oral

    论文提出了Circle loss,不仅能够对类内优化和类间优化进行单独地处理,还能根据不同的相似度值调整对应的梯度.总体而言,Circle loss更灵活,而且优化目标更明确,在多个实验上都有较好的表 ...

  4. 基于rk3588----i2c驱动框架学习(2)-总线驱动 algorithm 分析

    rk3588 i2c algorithm 分析 来了来了,上次分析完i2c的驱动框架 今天我们就看看i2c的algorithm是如何实现的 static const struct i2c_algori ...

  5. #Kruskal重构树,Dijkstra,倍增#洛谷 4768 [NOI2018]归程

    题目传送门 分析 首先Dijkstra是必需的(关于SPFA,它死了233) 无向图,所以先求出1号节点到所有点的距离,然后肯定希望起点能驾驶到离一号点最短的汽车可到的地方 但是怎么办,考虑海拔大的边 ...

  6. #主席树,dsu on tree,树上倍增#洛谷 3302 [SDOI2013]森林

    题目 分析 第\(k\)大的问题可以用主席树解决, 下标为节点离散化后的权值, 连边操作考虑合并两棵树, 如果暴力合并那肯定会T飞,考虑启发式合并 同时维护子树内的lca,方便主席树的查询 代码 #i ...

  7. OpenHarmony技术日探讨教育发展,聚焦开源人才培养

    4 月 25 日,OpenAtom OpenHarmony (以下简称"OpenHarmony")技术日在深圳成功举办.作为 OpenHarmony 开源项目的年度盛会,大会以&q ...

  8. ArkUI中的线程和看门狗机制

    一.前言 本文主要分析ArkUI中涉及的线程和看门狗机制. 二.ArkUI中的线程 应用Ability首次创建界面的流程大致如下: 说明: • AceContainer是一个容器类,由前端.任务执行器 ...

  9. 重磅官宣,OpenHarmony技术峰会来了

      技术构筑万物智联 创新使能行业发展 2月25日 第一届开放原子开源基金会OpenHarmony技术峰会即将启幕 众多行业大咖齐聚深圳 开启一场"技术硬核"探索盛宴 亮点拉满,我 ...

  10. Go 语言输出文本函数详解

    Go语言拥有三个用于输出文本的函数: Print() Println() Printf() Print() 函数以其默认格式打印其参数. 示例 打印 i 和 j 的值: package main im ...