webscoket在vue中的使用

项目场景:

提示:项目相关背景:

什么是webscoket?:

WebSocket是一种计算机通信协议,通过单个TCP连接提供全双工通信信道。实现了web客户端和服务器之间的实时通信,与传统的HTTP连接相比,允许以更低的延迟和开销进行双向数据交换。
WebSocket技术通常用于需要实时数据传输的网络应用程序,如聊天应用程序、在线游戏和金融交易平台。使用WebSocket,web应用程序可以在浏览器和服务器之间建立和维护持久的连接,从而实现对web内容的即时更新,而无需不断的HTTP请求。

项目场景:

用户在移动端发布的信息,需要实时在PC端进行实时弹窗提示,这里需要用到webscoket协议。


如何使用

如果你是http协议,使用ws,如果是https协议,使用wss协议,我这里是wss

直接在methods定义一个init方法

1 首先在created或mounted钩子调用方法

    this.init()

首先判断浏览器是否支持WebSocket协议

  //判断浏览器是否支持WebSocket
  if(typeof(WebSocket) === "undefined"){
     alert("您的浏览器不支持socket")
  }

2 init方法

    init () {
       //如果你是http协议,使用ws,如果是https协议,使用wss协议,我这里是wss
      this.ws = new WebSocket('wss://127.0.0.1/server/web-socket')

      // 监听是否连接成功
      this.ws.onopen = () => {
        console.log('ws连接状态成功:' + this.ws.readyState)
        // 连接成功则发送一个数据
        // this.ws.send('连接成功')
      }

      // 接听服务器发回的信息并处理展示
      this.ws.onmessage = (data) => {
        console.log('接收到来自服务器的消息:')
        const wsData = JSON.parse(data.data)
        const message = {
          title: '货主发布',
          desc: `起始地:${wsData.fromWhere}<br/>目的地:${wsData.toWhere}<br/>货物类型:${wsData.goodsType}`,
          duration: 3
        }
        this.$Notice.info(message)
      }

      // 监听连接关闭事件
      this.ws.onclose = () => {
        // 监听整个过程中websocket的状态
        console.log('ws连接状态关闭:' + this.ws.readyState)
      }

      // 监听并处理error事件
      this.ws.onerror = function (error) {
        console.log(error)
      }
    },

3 销毁前关闭WebSocket

 destroyed () {
        // 销毁监听
        this.ws.close()
    }

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/88703.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android JNI系列详解之CMake编译工具的使用

一、CMake工具的介绍 如图所示&#xff0c;CMake工具的主要作用是&#xff0c;将C/C编写的native源文件编译打包生成库文件&#xff08;包含动态库或者静态库文件&#xff09;&#xff0c;集成到Android中使用。 二、CMake编译工具的使用 使用主要是配置两个文件&#xff1a;CM…

HelpLook 免费版与商业版的比较,帮助您快速选择!

HelpLook 是一款零代码、开箱即用的帮助中心及博客网站搭建工具&#xff0c;只需简单几步&#xff0c;即可帮助企业、机构、个人发布在线品牌内容站点。 HelpLook 提供多个版本方案供不同需求的用户选择&#xff0c;今天想着重跟大家分享免费版和商业版&#xff0c;将从三个方面…

7、Spring_AOP

一、Spring AOP 简介 1.概述 对于spring来说&#xff0c;有三大组件&#xff0c;IOC&#xff0c;ID&#xff0c;AOP aop概述&#xff1a;AOP(Aspect Oriented Programming)面向切面编程。 作用&#xff1a;不改变原有代码设计的基础上实现功能增强 例子 传统打印日志 使用…

华为云CodeArts Snap 智能编程助手PyCharm实验手册. 插件安装与使用指南

作为一款自主创新的AI代码辅助编程工具&#xff0c;华为云智能编程助手CodeArts Snap目标打造现代化开发新范式。通过将自然语言转化为规范可阅读、无开源漏洞的安全编程语言&#xff0c;提升开发者编程效率&#xff0c;助力企业快速响应市场需求。华为云CodeArts Snap现进入邀…

vue(element ui安装)

目录 一&#xff0c;element ui安装二&#xff0c;main.js三&#xff0c;使用element ui最后 一&#xff0c;element ui安装 先在盘服中找到你创建的node的位置 如有不懂根据可以看看上一章安装node 然后在终端找到 进入这个位置之后就可以安装了 输入npm i element-ui -S这个…

【BASH】回顾与知识点梳理(三十八)

【BASH】回顾与知识点梳理 三十八 三十八. 源码概念及简单编译38.1 开放源码的软件安装与升级简介什么是开放源码、编译程序与可执行文件什么是函式库什么是 make 与 configure什么是 Tarball 的软件如何安装与升级软件 38.2 使用传统程序语言进行编译的简单范例单一程序&#…

《Linux从练气到飞升》No.17 进程创建

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

Spring MVC详解

文章目录 一、SpringMVC1.1 引言1.2 MVC架构1.2.1 概念1.2.2 好处 二、开发流程2.1 导入依赖2.2 配置核心(前端)控制器2.3 后端控制器2.4 配置文件2.5 访问 三、接收请求参数3.1 基本类型参数3.2 实体收参【重点】3.3 数组收参3.4 集合收参 【了解】3.5 路径参数3.6 中文乱码 四…

JDK JRE JVM 三者之间的详解

JDK : Java Development Kit JRE: Java Runtime Environment JVM : JAVA Virtual Machine JDK : Java Development Kit JDK : Java Development Kit【 Java开发者工具】&#xff0c;可以从上图可以看出&#xff0c;JDK包含JRE&#xff1b;java自己的一些开发工具中&#…

容灾设备系统组成,容灾备份系统组成包括哪些

随着信息技术的快速发展&#xff0c;企业对数据的需求越来越大&#xff0c;数据已经成为企业的核心财产。但是&#xff0c;数据安全性和完整性面临巨大挑战。在这种环境下&#xff0c;容灾备份系统应运而生&#xff0c;成为保证企业数据安全的关键因素。下面我们就详细介绍容灾…

Vue3项目实战

目录 一、项目准备 二、基础语法应用 2.1、mixin应用 2.2、网络请求 2.3、显示与隐藏 2.4、编程式路由跳转 2.5、下载资料 2.6、调用方法 2.7、监听路由变化 2.8、pinia应用 (1)存储token(user.js) (2)全选全不选案例(car.js) 一、项目准备 下载&#xff1a; cnp…

Bigemap在地质工程勘察行业中的应用

1.选择Bigemap的原因&#xff1a; 师兄在测绘局工作&#xff0c;买过全能版&#xff0c;帮我下载过高程数据&#xff0c;我觉得效果可以&#xff0c;于是联系到软件公司进行试用、咨询 2.使用场景&#xff1a; 影像、等高线、地形等资料下载&#xff0c;下载完放进arcgis 软件&…

通俗理解拉格朗日乘数法

再理解拉格朗日乘数法 笔记来源&#xff1a;Understanding Lagrange Multipliers Visually 本人相关博客&#xff1a; 1.方向导数和梯度向量 2.最小二乘和回归线、拉格朗日乘数、二元泰勒多项式、带约束变量的偏导数 函数&#xff1a; z f ( x , y ) zf(x,y) zf(x,y)&#x…

LinkedList的顶级理解

目录 1.LinkedList的介绍 LinkedList的结构 2.LinkedList的模拟实现 2.1创建双链表 2.2头插法 2.3尾插法 2.4任意位置插入 2.5查找关键字 2.6链表长度 2.7遍历链表 2.8删除第一次出现关键字为key的节点 2.9删除所有值为key的节点 2.10清空链表 2.11完整代码 3.…

蓝蓝设计ui设计公司作品--泛亚高科-光伏电站控制系统界面设计

泛亚高科(北京)科技有限公司&#xff08;以下简称“泛亚高科”&#xff09;&#xff0c;一个以实时监控、高精度数值计算为基础的科技公司&#xff0c; 自成立以来&#xff0c;组成了以博士、硕士为核心的技术团队&#xff0c;整合了华北电力大学等高校资源&#xff0c;凭借在电…

运算放大器发展史

在内部集成了一个补偿电容 MPS公司OP07推出后&#xff0c;大受欢迎。各家厂商都推出了自己的 这4款都是可以替换的

Linux搭建SSLVpn

安装http、ssl服务 编辑http配置文件 修改http的136行&#xff0c;276行以及990行 1、136行将监听端口注释 2、276行和990行修改为自己的域名和要访问的端口 修改http文档最后那部分 新添ssl配置信息&#xff0c;将端口修改为443&#xff08;截图错了server.key应该放在/etc/…

告别gazebo开启长时间等待 设置gazebo打开不再联网找模型

学过ros的对gazebo仿真软件应该都不会陌生&#xff0c;但是有时启动真的很烦人&#xff0c;经常卡在这个地方很长时间&#xff0c;查阅资料 gazebo软件开启的时候会自动从国外官网下载模型&#xff0c;因此这个过程比较漫长&#xff0c;原因是网站在国外&#xff0c;下载不顺畅…

GaussDB数据库SQL系列:DROP TRUNCATE DELETE

目录 一、前言 二、GaussDB的 DROP & TRUNCATE & DELETE 简述 1、命令简述 2、命令比对 三、GaussDB的DROP TABLE命令及示例 1、功能描述 2、语法 3、示例 四、GaussDB的TRUNCATE命令及示例 1、功能描述 2、语法 3、示例 4、示例 五、GaussDB的DELETE命令…

【AWS】安装配置适用于 Eclipse 的 AWS 工具包

目录 0.环境 1.步骤 1&#xff09;安装Eclipse 2&#xff09;安装AWS工具包 ① 在这个路径下点开安装软件的界面 ② 点击【Add】打开添加窗口 ③ 输入aws的工具包地址 ④ 勾选需要的工具&#xff0c;点击【Next】 ⑤ 将要安装的工具&#xff0c;点击【Next】 ⑥ 选择接受…