上代码:

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. 《Go程序设计语言》学习笔记之defer

    <Go程序设计语言>学习笔记之defer 一. 环境 Centos8.5, go1.17.5 linux/amd64 二. 概念 语法上,一个 defer 语句就是一个普通的函数或方法调用 ...

  2. 开发必会系列:《深入理解JVM(第二版)》读书笔记

    一  开始前 HotSpot:http://xiaomogui.iteye.com/blog/857821 http://blog.csdn.net/u011521890/article/detail ...

  3. Light-Head R-CNN : 旷世提出用于加速two-stage detector的通用结构,速度达102fps

    论文提出Light-Head R-CNN,一个精简的two-stage目标检测器设计准则,在表达能力很强的精简特征图上使用轻量级的R-CNN子网,不仅大量减少推理耗时,还提高了准确率,结合Xcepti ...

  4. 【直播回顾】参与ArkUI,共建OpenHarmony繁荣生态

    5月31日晚上19点,战"码"先锋第三期直播 <参与ArkUI,共建OpenHarmony繁荣生态> ,在OpenHarmony社群内成功举行.   本期课程,由华为终 ...

  5. [UAC]C++判断某进程是否有管理员权限

    BOOL IsAdminProcess(UINT PID) { if (PID <= 0) PID = GetCurrentProcessId(); HANDLE hProcess = Open ...

  6. CSP-S2021江西自评分数(10-26)

    娱乐性质,不负责任 在机房大佬的努力下,评测完了 总表 姓名 编号 总分 airport bracket palin traffic JX-00001 JX-00001 0 0 0 0 0 JX-00 ...

  7. 深入了解 Python MongoDB 操作:排序、删除、更新、结果限制全面解析

    Python MongoDB 排序 对结果进行排序 使用 sort() 方法对结果进行升序或降序排序. sort() 方法接受一个参数用于"字段名",一个参数用于"方向& ...

  8. 空间音频技术与生态发展高峰论坛成功举办,业界首个Audio Vivid创作工具花瓣三维声亮相

    11月26日至27日,UWA世界超高清视频产业联盟(以下简称"UWA联盟").上海交通大学-南加州大学文化创意产业学院.华为联合举办了"互联智慧,共赢未来" 超 ...

  9. Kalman滤波器的原理与实现

    Kalman滤波器的原理与实现 卡尔曼滤波器(Kalman Filter)是一个十分强大滤波器,虽然叫做滤波器,卡尔曼滤波器其实可以起到到两个作用,即预测与更新,这与我们在其运行时所关注的环节有关.当 ...

  10. Android 开发入门(4)

    0x06 中级控件 (1)图形绘制 a. 图形 Drawable Drawable 类型包括图片.色块.画板.背景 drawable 目录一般保存描述性 XML 文件,具有具体分辨率的 drawabl ...