实时通信Socket io的使用示例详解

 更新时间:2022年11月13日 16:52:29   作者:故友  
这篇文章主要为大家介绍了实时通信Socket io的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

最近在工作中,遇到了一个需求,需要和后台服务实时通信,获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个库,前端这边配合也只能使用这个,它的使用方式跟websocket很类似,为此简单记录一下socket.io的使用,希望帮助到有需要的人。

1、什么是socket.io

Socket.IO 是一个库,可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信。

它建立在 WebSocket 协议之上,并提供额外的保证,例如回退到 HTTP 长轮询或自动重新连接。

2、socket.io的使用

1、安装引入

npm install socket.io-client
import { io } from "socket.io-client";

2、初始化

const socket = io("https://server-domain.com");

3、使用

socket链接成功以后,我们继续接下来的操作,了解各个事件的使用。

    socket.on("connect", () => {
        //监听连接是否成功
        console.log("链接成功");
      });
      socket.on("disconnect", (reason) => {
        //监听连接异常中断
        console.log("中断", reason);
      });
      socket.on("message_event", (data) => {
      console.log("接收到的消息", data);
      })
     // 此处需要注意的是on是一个监听事件,监听的message_event是和后台约定好的事件名。
     前端主动断开链接
     socket.close()或者 socket.disconnect()

4、消息的发送

    // 发送消息
    sendMessage(msgType, msgContent) {
      var jsonObject = { msgType: msgType, msgContent: msgContent };
      socket.emit("send_event", jsonObject);
    },
    //前端这边通过emit发送消息,这里的send_event也是跟后端人员约定好的事件。

3、客户端自带事件

除了上面介绍的几个主要事件外、还有一些其他事件

  • connect:连接成功
  • connecting:正在连接
  • disconnect:断开连接
  • connect_failed:连接失败
  • error:错误发生,并且无法被其他事件类型所处理
  • reconnect_failed:重连失败
  • reconnect:成功重连
  • reconnecting:正在重连

4、版本问题

socket.io分为客户端和服务器端,在选择使用的时候,一定要注意相关版本的选择要对应,要不然就会出现各种奇怪的问题,我当时做的时候没注意这一块,就耽误了一些时间。。。

相关版本兼容性如下表所示!

以上就是实时通信Socket io的使用示例详解的详细内容,更多关于Socket io实时通信的资料请关注脚本之家其它相关文章!

相关文章

  • vue前端页面数据加载添加loading效果的实现

    vue前端页面数据加载添加loading效果的实现

    这篇文章主要介绍了vue前端页面数据加载添加loading效果的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • VUE3自定义指令防止重复点击多次提交的实现方法

    VUE3自定义指令防止重复点击多次提交的实现方法

    vue3项目,新增弹框连续点击确定按钮防止多次提交,在按钮上添加自定义指令,这篇文章主要介绍了VUE3自定义指令防止重复点击多次提交的实现方法,需要的朋友可以参考下
    2024-08-08
  • Vue对象的深层劫持详细讲解

    Vue对象的深层劫持详细讲解

    这篇文章主要介绍了vue2.x对象深层劫持的原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 对vue中v-if的常见使用方法详解

    对vue中v-if的常见使用方法详解

    今天小编就为大家分享一篇对vue中v-if的常见使用方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue自定义加载指令v-loading占位图指令v-showimg

    vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 如何使用 Vuex的入门教程

    如何使用 Vuex的入门教程

    在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,本文主要介绍了如何使用 Vuex的入门教程,具有一定的参考价值,感兴趣的可以了解一下
    2022-02-02
  • vue-virtual-scroll-list虚拟组件实现思路详解

    vue-virtual-scroll-list虚拟组件实现思路详解

    这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • vue 使用monaco实现代码高亮

    vue 使用monaco实现代码高亮

    这篇文章主要介绍了vue 使用monaco实现代码高亮的方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue项目实现登陆注册效果

    vue项目实现登陆注册效果

    这篇文章主要为大家详细介绍了vue项目实现登陆注册效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue项目中chunk-vendors.js提示报错的查看方法(最新推荐)

    vue项目中chunk-vendors.js提示报错的查看方法(最新推荐)

    在vue项目中,chunk-vendors.js报出的错误提示经常会导致开发者困惑,正确查看错误的方法是从错误提示的详细信息中找到报错原因,下面给大家分享vue项目中chunk-vendors.js提示报错的查看方法,感兴趣的朋友一起看看吧
    2024-12-12

最新评论