iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用websocket概念及示例
  • 773
分享到

vue使用websocket概念及示例

2024-04-02 19:04:59 773人浏览 薄情痞子
摘要

目录概念部分:使用示例概念部分: 1,websocket 是 HTML5 提供的 tcp 连接上进行全双工通讯的协议。一次握手之后,服务器和客户端可以互相主动通信,双向传输数据。 2

概念部分:

1,websocketHTML5 提供的 tcp 连接上进行全双工通讯的协议。一次握手之后,服务器和客户端可以互相主动通信,双向传输数据。

2,浏览器想服务器发送请求,建立连接之后,可通过send()方法想服务器发送数据,并通过message事件接受服务器返回的数据。

使用示例

<script>
export default {
  mounted() {
    this.connectWEBSocket();
  },
  methods: {
    connectWebsocket() {
      let websocket;
      if (typeof WebSocket === "undefined") {
        console.log("您的浏览器不支持WebSocket");
        return;
      } else {
        let protocol = "ws";
        let url = "";
        if (window.localtion.protocol == "https:") {
          protocol = "wss";
        }
        // `${protocol}://window.location.host/echo`;
        url = `${protocol}://localhost:9998/echo`;

        // 打开一个websocket
        websocket = new WebSocket(url);
        // 建立连接
        websocket.onopen = () => {
          // 发送数据
          websocket.send("发送数据");
          console.log("websocket发送数据中");
        };
        // 客户端接收服务端返回的数据
        websocket.onmessage = evt => {
          console.log("websocket返回的数据:", evt);
        };
        // 发生错误时
        websocket.onerror = evt => {
          console.log("websocket错误:", evt);
        };
        // 关闭连接
        websocket.onclose = evt => {
          console.log("websocket关闭:", evt);
        };
      }
    }
  }
};
</script>

以上就是Vue使用websocket概念及示例的详细内容,更多关于vue使用websocket的资料请关注编程网其它相关文章!

--结束END--

本文标题: vue使用websocket概念及示例

本文链接: https://www.lsjlt.com/news/168140.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue使用websocket概念及示例
    目录概念部分:使用示例概念部分: 1,WebSocket 是 HTML5 提供的 TCP 连接上进行全双工通讯的协议。一次握手之后,服务器和客户端可以互相主动通信,双向传输数据。 2...
    99+
    2022-11-13
  • Elasticsearch mapping 概念及自动创建示例
    目录正文1.什么是Mapping2.es 自动创建mapping3. mapping 类型自动识别4. 自定义创建mapping5. mapping 属性设置analyzer 分词器...
    99+
    2022-11-13
    Elasticsearch mapping自动创建 Elasticsearch mapping
  • vue项目中 jsconfig.json概念及使用步骤
    目录vue项目中 jsconfig.json是什么概述一、使用tsconfig.json或jsconfig.json二、使用步骤1. 配置说明2. 配置 webpack 别名3. c...
    99+
    2022-11-13
  • vue中组件可重用性概念的示例分析
    这篇文章主要介绍vue中组件可重用性概念的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!为什么要使用VueVue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强...
    99+
    2023-06-14
  • AJAX概念以及使用
    AJAX (Asynchronous JavaScript and XML) 是一种用于在网页上实现异步数据交互的技术。它允许网页在...
    99+
    2023-09-23
    AJAX
  • SpringSecurity概念及整合ssm框架的示例详解
    基本概念 Spring中提供安全认证服务的框架,认证:验证用户密码是否正确的过程,授权:对用户能访问的资源进行控制 用户登录系统时我们协助 SpringSecurity 把用户对应...
    99+
    2022-12-16
    SpringSecurity整合ssm框架 SpringSecurity概念
  • golang中vue使用websocket的示例分析
    小编给大家分享一下golang中vue使用websocket的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一. 编写golang服务端导入必要的webs...
    99+
    2023-06-15
  • Vue.js下载方式及基本概念的示例分析
    小编给大家分享一下Vue.js下载方式及基本概念的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vue.js是什么?Vu...
    99+
    2022-10-19
  • ROSTF坐标变换基本概念及使用案例
    目录前言一、ROS中的TF1.监听TF变换2.广播TF变换二、TF常用组件1.tf_monitor2.tf_echo <source_frame> <target_...
    99+
    2023-01-03
    ros tf坐标变换 ros tf ros tf坐标
  • JSON Schema概念及使用场景
    目录1.什么是JSON Schema2. JSON Schema的应用场景2.1 表单数据校验2.2 接口数据校验2.3 低代码 low-code1.什么是JSON Schema 相...
    99+
    2022-11-13
  • java中IO的概念及使用
    本篇内容主要讲解“java中IO的概念及使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“java中IO的概念及使用”吧!目录一.认识IOIO的分类IO的方式IO读写的方式IO的特性二.文件操作...
    99+
    2023-06-20
  • mysql索引基数概念与用法示例
    本文实例讲述了mysql索引基数概念与用法。分享给大家供大家参考,具体如下: Cardinality(索引基数)是mysql索引很重要的一个概念 索引基数是数据列所包含的不同值的数量。例如,某个数据列包含值...
    99+
    2022-10-18
  • Java接口interface的概念及使用
    本篇内容介绍了“Java接口interface的概念及使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在抽象类中,可以包含一个或多个抽象方...
    99+
    2023-06-03
  • Java多线程的概念及使用
    本篇内容介绍了“Java多线程的概念及使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!目录线程Thread类Runnable接口创建线程T...
    99+
    2023-06-20
  • MongoDB索引概念及使用详解
    索引,使用索引可快速访问数据库表中的特定信息。索引是对数据库表中一列或多列的值进行排序的一种结构,例如 employee 表的姓名(name)列。如果要按姓查找特定职员,与必须搜索表中的所有行相比,索引会帮...
    99+
    2022-10-18
  • python imutils包基本概念及使用
    1.imutils功能简介 imutils是在OPenCV基础上的一个封装,达到更为简结的调用OPenCV接口的目的,它可以轻松的实现图像的平移,旋转,缩放,骨架化等一系列的操作。 安装方法: pip instal...
    99+
    2022-06-02
    python imutils包 python imutils包使用
  • Mycat的使用 - 01.概念, 及安装
    初识Mycat1. Mycat是什么Mycat是一款数据库中间件, 其用于分库分表, 还实现了读写分离, 故障切换等功能.2. Mycat的工作原理用一个动词来概括就是"拦截", 它拦截...
    99+
    2022-10-18
  • JavaScript类型概念及使用的方法
    这篇文章主要介绍“JavaScript类型概念及使用的方法”,在日常操作中,相信很多人在JavaScript类型概念及使用的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • 在Visual Studio 中使用git及Git概念
    目录第一部分:Git是什么?一、工作与操作流程1、Git工作流程2、Git操作过程图解3 Git中常见名词解释二、 Windows上安装Git三、SVN与Git的最主要的区别?四、理...
    99+
    2022-11-12
  • MySQL视图的相关概念及应用实例分析
    本篇内容主要讲解“MySQL视图的相关概念及应用实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“MySQL视图的相关概念及应用实例分析”吧!1.浅谈数据库对象2.什么是视图?视图一方面可以...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作