脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue socket服务端通信

vue使用socket与服务端进行通信的代码详解

 更新时间：2023年09月24日 10:35:10   作者：谨言的鼠猫  
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下

1、定义socket

var ws = new WebSocket('wss://地址');

2、进行连接，同时每5秒钟发送心跳一次

ws.onopen = () => {
  console.log('@open');
  // params为与服务端定义好的参数
  ws.send(JSON.stringify(params));
  this.sendTimmer = setInterval(function () {
    ws.send('Hi Server!');
  }, 5000);
};

3、获取服务端发送来的信息，进行处理

ws.onmessage = (event) => {
  console.log('@message:', event);
  try {
      const data = JSON.parse(event.data);
      if (data.end) {
        //约定的单条消息传递结束
      } else {
          // 进行数据处理
      }
  } catch (err) {
      // 数据错误处理
      ws.close();
      console.error(err);
  }
  if (event.data == '[DONE]') {
      // 消息传递结束
      this.sendTimmer && clearInterval(this.sendTimmer);
      ws.close();
  }
};

4、关闭socket

ws.onclose = (event) => {
  console.log('@close:', event);
  this.sendTimmer && clearInterval(this.sendTimmer);
  ws.close();
};

5、判断socket发送错误

ws.onerror = (event) => {
  console.error('error:', event);
  // 进行错误类型判断，展示不同信息
  ws.close();
};

到此这篇关于vue使用socket与服务端进行通信的代码详解的文章就介绍到这了,更多相关vue socket服务端通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 深入了解Vue中双向数据绑定原理

    深入了解Vue中双向数据绑定原理

    vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。本文将通过示例详解其中原理，需要的可以参考一下
    2022-05-05
  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下
    2022-01-01
  • Vue 如何使用props、emit实现自定义双向绑定的实现

    Vue 如何使用props、emit实现自定义双向绑定的实现

    这篇文章主要介绍了Vue 如何使用props、emit实现自定义双向绑定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vuecli3配置代理及遇到的问题解决

    Vuecli3配置代理及遇到的问题解决

    这篇文章主要为大家介绍了Vuecli3配置代理及遇到的问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 利用Vue.js指令实现全选功能

    利用Vue.js指令实现全选功能

    最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
    2016-09-09
  • Vue初始化中的选项合并之initInternalComponent详解

    Vue初始化中的选项合并之initInternalComponent详解

    这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Vue打包后页面出现空白解决办法

    Vue打包后页面出现空白解决办法

    本文主要介绍了Vue打包后页面出现空白解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue项目中路由懒加载的三种方式(简洁易懂)

    vue项目中路由懒加载的三种方式(简洁易懂)

    本文主要介绍了vue项目中路由懒加载的三种方式,主要包括vue异步组件,组件懒加载,webpack的require.ensure(),具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue-model实现简易计算器

    vue-model实现简易计算器

    这篇文章主要为大家详细介绍了vue-model实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 微信小程序地图导航功能实现完整源代码附效果图（推荐）

    微信小程序地图导航功能实现完整源代码附效果图（推荐）

    这篇文章主要介绍了微信小程序地图导航功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论