上代码:

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. Ubuntu系统部署springcloud+nacos遇到的问题。

    1,部署上的jar包运行正常,但是通过浏览器不能访问,telnet +IP+端口连接不通.小皮面板访问后台接口也是不通但是小皮面板可以通过浏览器访问.具体问题暂未解决. 2,改用docker部署,将j ...

  2. Python爬虫爬取京东某商品评论信息存入mysql数据库

    1 """ 2 https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_com ...

  3. #原根,BSGS,扩欧,矩阵乘法#CF1106F Lunar New Year and a Recursive Sequence

    题目 已知数列 \(f\) 满足 \(f_{1\sim k-1}=1\) 且 \(f_n=m\), 并且知道 \(f_i=(\prod_{j=1}^kf_{i-j}b_j)\bmod{99824435 ...

  4. AtCoder Regular Contest 115(without F)

    ARC115 A - Two Choices 题目传送门 分析 可以发现正确答案数量相同当且仅当 \(S_i\) xor \(S_j\) 所含有的 1 的数量为偶数. 再将这个简化一下,正确答案相同当 ...

  5. OpenHarmony创新赛|赋能直播第五期

     OpenHarmony创新赛赋能直播课程即将再次与大家见面!本期基于之前的青蛙影院的UI界面设计的课程,介绍综合性APP的需求介绍和技术栈整合等内容.此外,课程同步赋能OpenHarmony创新赛, ...

  6. SQL 日期处理和视图创建:常见数据类型、示例查询和防范 SQL 注入方法

    SQL处理日期 在数据库操作中,处理日期是一个关键的方面.确保插入的日期格式与数据库中日期列的格式匹配至关重要.以下是一些常见的SQL日期数据类型和处理方法. SQL日期数据类型 MySQL日期数据类 ...

  7. Python 集合(Sets)2

    访问项 您无法通过引用索引或键来访问集合中的项.但是,您可以使用for循环遍历集合项,或者使用in关键字检查集合中是否存在指定的值. 示例,遍历集合并打印值: thisset = {"app ...

  8. Linux系统 g++ 链接 libopencv_world.a 静态库编译程序

    编译opencv,我是直接编译成 libopencv_world.a  一个文件 正常链接编译,容易报错:main: hidden symbol `opj_read_header' isn't def ...

  9. HarmonyOS实现表单页面的输入,必填校验和提交

    一. 样例介绍 本篇Codelab基于input组件.label组件和dialog组件,实现表单页面的输入.必填校验和提交: 1.  为input组件设置不同类型(如:text,email,date等 ...

  10. 在centOS上配置web服务器

    centos,web服务,apache,ftp服务器,mysql,makefile (1). 检查系统是否正常 # more /var/log/messages //检查有无系统内核级错误信息 # d ...