上代码:

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. vivado的非嵌入ILA的使用

    vivado非嵌入ILA的使用 1.实验原理 前面在vivado中联合vitis设计时接触过ila,那个时候采用的方法是直接调用IP核在原理图中连接.这个方法简单直接,可以将自己所需的测量信号转移到I ...

  2. KingbaseESV8R6延迟提交参数

    前言 队列理论在我们生活中的应用随处可见,例如我们去食堂打饭需要排队,我们生活中随处可见排队的场景. 在计算机领域中,性能诊断等地方使用队列理论的案例也很多.服务器硬件分为动态设备和静态设备.CPU和 ...

  3. urllib+BeautifulSoup爬取并解析2345天气王历史天气数据

    urllib+BeautifulSoup爬取并解析2345天气王历史天气数据 网址:东城历史天气查询_历史天气预报查询_2345天气预报 1.代码 import json import logging ...

  4. #模型转换,动态规划#洛谷 1758 [NOI2009] 管道取珠

    题目 分析 考虑每种情况的方案数平方之和,可以被转换成有两个人同时独立进行该游戏,问最后情况相同的方案数. 那么设 \(dp[i][j][k][o]\) 表示第一个人在上管道拿了 \(i\) 个,下管 ...

  5. #树状数组,CDQ分治#洛谷 4390 [BOI2007]Mokia 摩基亚

    题目 分析 考虑离线处理,那么询问区间和就可以转换为四个询问, CDQ分治按横坐标处理询问,树状数组维护前缀和就可以了 代码 #include <cstdio> #include < ...

  6. #树状数组,离散#C 波动序列

    分析 设\(dp[i][j][0/1/2/3]\)表示前\(i\)个位置当前选的数为\(j\), 且选择的是第一行/第二行/第三行不下降/第三行不上升, 状态转移方程显然,用线段树或者树状数组维护一下 ...

  7. OpenHarmony社区运营报告(2023年4月)

      本月快讯 • 2023年4月9日,OpenAtom OpenHarmony(以下简称"OpenHarmony")3.2 Release新版本发布.相比一年前的OpenHarmo ...

  8. Git 分支管理:优化版本控制与应急处理的关键策略

    使用 Git 分支:轻松管理不同版本和应对紧急情况的最佳实践 使用 Git 分支 在 Git 中,分支是主仓库的新/独立版本. 假设你有一个大型项目,需要对其进行设计更新. 没有使用 Git 时: 复 ...

  9. Linux 配置Git

    前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 一.用git --version命令检查是否已经安装 二.下载git源码并解压 wget https://github.com/git/ ...

  10. 第十四篇:JavaScript基础

    一.CSS内容补充之position 10.position:fixed:固定div在页面的一个位置: top:0; right:0; left:0; position:absolute + rela ...