上代码:

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. KingbaseES V8R6集群运维案例之---同一主机节点部署多个集群

    案例说明: 在同一主机环境,由于生产需要,需要部署两个集群:本案例详细描述了两个集群的部署过程. 注意:同一主机部署多个集群需要先部署securecmdd服务,节点之间通过securecmdd服务通讯 ...

  2. Java实现两种队列(数组和链表)

    package algorithm; /** @author Administrator @date 2022-09-13 17:50 */ public class QueueLinked{ pri ...

  3. Linux下Bochs,NASM安装和使用

    安装环境 以Ubuntu为例,先更新一下: sudo apt-get update sudo apt-get upgrade 然后安装Bochs环境: sudo apt-get install bui ...

  4. 5W1H聊开源之What——开源是什么?

    美国政治传播学家拉斯韦尔提出了5W传播模式,经过后人的不断运用和发展总结,形成了一套逐渐成熟的"5W1H"体系,即:对选定的项目.工序或操作,都要从原因(何因Why).对象(何事W ...

  5. 15 CSS总结

    15 CSS总结 到此,css的知识就结束了,掌握这些知识,搞爬虫足够了.如果朋友还有兴趣可以去css其他学习网站去看看其他的一些属性用法,(菜鸟教程 https://www.runoob.com/c ...

  6. 使用8086汇编驱动SHT11传感器

    前言:使用Proteus 7.8仿真软件实现8086接入SHT11温湿度传感器(实现读取温度数据部分功能),并学习如何在没有集成硬件控制下串行总线的驱动方式,汇编的精髓就是寄存器的操作.各种寻址方式. ...

  7. Jetty的http2模块

    启用http2模块,执行如下命令: java -jar $JETTY_HOME/start.jar --add-modules=http2 命令的输出,如下: INFO : http2 initial ...

  8. 分布式数据对象:超级终端的"全局变量"

    3月底发布的OpenAtom OpenHarmony(以下简称"OpenHarmony")3.1 Release版本中,新增了分布式数据对象特性.什么是分布式数据对象呢?本期就让我 ...

  9. 网络组件axios可以在OpenHarmony上使用了

    什么是axios 上古浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好.并且我们只是需要修改页面的部分数据,但是从服务器端发送的却是整个页面 ...

  10. API 参考与帮助内容:一站式开发与使用者支援

    API 文档 API 文档是旨在了解 API 详细信息的综合指南.通常,它们包括端点.请求示例.响应类别和示例以及错误代码等信息.API 文档可帮助开发人员了解 API 端点的具体细节,并了解如何将 ...