本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > JavaScript >

收藏
分享到

实时通信Socket io的使用介绍

JavaScript 来源：互联网 作者：佚名 发布时间：2022-11-15 16:32:38 人浏览
摘要

最近在工作中，遇到了一个需求，需要和后台服务实时通信，获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个库，前端这边配合也只能使用这个，它的使用

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

1、什么是socket.io

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

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

2、socket.io的使用

1、安装引入

1

2

npm install socket.io-client

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

2、初始化

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

3、使用

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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、消息的发送

1

2

3

4

5

6

// 发送消息

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

相关版本兼容性如下表所示！
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://juejin.cn/post/7161983096256987172
相关文章
  • 在web worker中使用fetch实例介绍
    1.Web Worker意义 由于 JS 是单线程的，费时的 JS 操作将会导致整个页面的阻塞。Web Worker 提供了创建多线程的方法，将一些耗时且 UI 无关的工

  • 实时通信Socket io的使用介绍

    实时通信Socket io的使用介绍
    最近在工作中，遇到了一个需求，需要和后台服务实时通信，获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个
  • js中如何对url进行编码和解码
    js 对url进行编码和解码 三种编码和解码函数 encodeURI和 decodeURI 它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中
  • React RenderProps模式超详细介绍
    render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。 如果一个组件有一个render属性，并且这个

  • Vue中ref、reactive、toRef、toRefs、$refs的基本用法总

    Vue中ref、reactive、toRef、toRefs、$refs的基本用法总
    一、ref reactive 1.1.为什么需要ref、reactive ??? setup函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想让变量变

  • Javascript如何实现对象扁平化实例介绍

    Javascript如何实现对象扁平化实例介绍
    数组扁平化相信大家已经耳熟能详了，在被面试官问到如何实现数组扁平化你就偷着乐吧，但是相信有不少大佬在面试一些国内顶尖的大厂

  • Immer功能最佳实践示例教程

    Immer功能最佳实践示例教程
    一、前言 Immer 是mobx的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体
  • Ant Design 的Bug修复示例
    我在工作中大量使用Ant Design，它为我省去了很多重复劳动，所以有空的时候，我也会为Ant Design做一些微小的贡献。 本文详细描述了我处理
  • AntDesignPro使用electron构建桌面应用示例
    注意事项声明 所有node包必须使用npm安装不可使用cnpm, 使用cnpm安装的node包会导致打包时间无限可能 具体区别查看使用npm和cnpm安装的包结构

  • vue el-switch初始值(默认值)不能正确显示状态问题

    vue el-switch初始值(默认值)不能正确显示状态问题
    el-switch 初始值（默认值）不能正确显示状态 先去检查一下接口返回格式 如果是字符串 不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计