前端使用socket.io

@前端使用socket.io

前言

  • socket.IO 是一个库,可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信。
  • 使用socket.IO要确保客户端和服务端都是socket.IO构建的。socket.IO内部封装了很多现成的api,比如心跳监测,断开重来等,虽然现在浏 览器以及基本都支持原生的websocket但是socket.IO依旧很有生命力。
  • 如果想在java端实现socketIO,需要借助netty-socketio netty-socketio,同时前端注意和后端的版本差异不要太大,目前netty-socketio版本是version 2.0.6 released

使用

		import io from 'socket.io-client'socket = io.connect(`${url}?number=${number}`,{transports: ['websocket'],reconnection: false});// 生命周期钩子函数socket.on('connect', function(data_res) {console.log('connect', new Date())});socket.on('connected', function(data){console.log('connected', new Date())});socket.on('connect_error', function(data){console.log('connect_error', new Date())retrySocket(socket)});socket.on('connect_timeout', function(data){console.log('connect_timeout', new Date());});socket.on('error', function(data){console.log(' - error', new Date());});socket.on('disconnect', function(data){console.log(' - disconnect', new Date());retrySocket(socket)});socket.on('reconnect', function(data){console.log(' - reconnect', new Date());statusButton.showTip('reconnect',1);});socket.on('reconnect_attempt', function(data){console.log(' - reconnect_attempt', new Date());});socket.on('reconnecting', function(data){console.log(' - reconnecting', new Date());});socket.on('reconnect_error', function(data){console.log(' - reconnect_error', new Date());});socket.on('reconnect_failed', function(data){console.log(' - reconnect_failed', new Date());});// 重连function retrySocket(socket) {if(socket){console.log(socket)socket.close()// socket.removeAllListeners('connect')}socket = io.connect(`${url}?number=${number}`,{transports: ['websocket'],reconnection: false});}

常见api:
url (字符串)
options (对象)
path (字符串) 命名路径,用来捕获服务器端的服务,默认为http://socket.io
reconnection (布尔型)是否自动重新建立连接,默认为true
reconnectionAttempts (Number) 尝试重连的次数,默认为无限次
reconnectionDelay (数值型) 重寻创建连接的延迟时长,默认为1000毫秒,受randomizationFactor正负加减的影响。比如默认的初始化延迟将在500至1500毫秒之间。
reconnectionDelayMax (数值型)最大的重连等待时间,默认为5000毫秒。每一次尝试都会以两倍的增量增加重连的时间。
randomizationFactor (数值型)默认为0.5,最小为0,最大为1.
timeout (数值型) connect_error和connect_timeout事件触发前的延迟时间,默认为20000毫秒。
autoConnect (布尔型) 如果设置为fasle,你不得不手动调用manage.open函数。
query (对象):当连接到一个命名空间,额外的查询参数将被发送(随后可以到服务器端查找socket.handshake.query对象)。

文档

socketIO官方网站

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024黑龙江省职业院校技能大赛信息安全管理与评估赛项规程

2024黑龙江省职业院校技能大赛暨国赛选拔赛 “GZ032信息安全管理与评估”赛项规程 极安云科专注技能竞赛,包含网络建设与运维和信息安全管理与评估两大赛项,及各大CTF,基于两大赛项提供全面的系统性培训,拥有完整的培训体系。团队…

【Qt开发流程】之元对象系统

描述 Qt的元对象系统(Meta-Object System)是Qt框架的核心机制之一,它提供了运行时类型信息(RTTI)和信号与槽(Signals and Slots)机制的支持。元对象系统在Qt中扮演了很重要的角色,它…

适合炎热天气的最佳葡萄酒有哪些?

每年的夏天,白葡萄酒和玫瑰红葡萄酒总会是葡萄酒爱好者的首选,这是为什么呢?随着春天的逝去,夏天悄悄地到来,空气变得炎热和沉重,树木变得越来越郁郁葱葱,白天的时间更长而晴朗了。多雨的五月变…

12.7作业

1. #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//***********窗口相关设置***********//设置窗体大小this->resize(540,410);this->setFixedSize(540,410);//取消菜单栏this->setWindowFlag(Qt::FramelessWindowHint);/…

SuperMap iObject.NET三维场景拖拽框选实现详解及完整源代码(一)——环境准备及项目配置

作者:超图研究院技术支持中心-于丁1 SuperMap iObject.NET三维场景拖拽框选实现详解及完整源代码(一)——环境准备及项目配置   三维场景框选是一种在三维空间中进行选择和操作的功能,它可以让使用者通过鼠标拖动来创建一个矩形…

Verilog学习 | 用initial语句写出固定的波形

initial beginia 0;ib 1;clk 0;#10ia 1; #20ib 0;#20ia 0; endalways #5 clk ~clk; 或者 initial clk 0;initial beginia 0;#10ia 1; #40ia 0; endinitial beginib 1;#30 ib 0; endalways #5 clk ~clk;

新书推荐——《Copilot和ChatGPT编程体验:挑战24个正则表达式难题》

《Copilot和ChatGPT编程体验:挑战24个正则表达式难题》呈现了两方竞争的格局。一方是专业程序员David Q. Mertz,是网络上最受欢迎的正则表达式教程的作者。另一方则是强大的AI编程工具OpenAI ChatGPT和GitHub Copilot。 比赛规则如下:David编…

基于jsp+servlet的在线考试系统

基于jspservlet的在线考试系统, 演示地址:英语在线考试系统考生测试账号:用户名:stu,密码:stu,管理员测试账号用户名:admin,密码:admin (源码里包含数据库文件) 本系统分为两个角色,一个时考生,一个是管理员,考生可…

架构师一1.功能权限

1. RBAC 权限模型 系统采用 RBAC 权限模型&#xff0c;全称是 Role-Based Access Control 基于角色的访问控制。 简单来说&#xff0c;每个用户拥有多个角色&#xff0c;每个角色拥有多个菜单&#xff0c;菜单中存在菜单权限、按钮权限。这样&#xff0c;就形成了 “用户<-…

JAVA设计模式(二)-简单工厂

JAVA设计模式(二)-简单工厂 本篇文章主要讲下java 创建型设计模式中的简单工厂模式. 简单工厂模式又叫 静态工厂方法模式&#xff08;Static FactoryMethod Pattern&#xff09;,是通过专门定义一个类来负责创建其他类的实例&#xff0c;被创建的实例通常都具有共同的父类。 …

StringBoot常用注解(不断添加)

Configuration 定义配置类&#xff0c;之前的Spring配置都是写在xml配置文件里面的。在新的Spring版本里&#xff0c;建议首要选择把配置写道配置类中。 ComponeneScan 定义扫描路径。 Bean 默认方法名讲就是bean的id&#xff0c;返回类型就是方法返回的类型。也可以Bean("…

第二十一章网络通信总结博客

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmissio…

Linux 环境变量 与 命令行参数

什么是环境变量 从结构上来看&#xff0c;环境变量就是操作系统维护的一组&#xff1a;key-value 的键值对。 不知道你是否有一个疑问&#xff1a;为什么我们写代码编译链接 形成的可执行程序要运行起来需要带路径呢&#xff1f;Linux 内置的命令也是可执行程序&#xff0c;为…

Builder设计模式

我们往往不想一下子从构造方法里面把参数传递过去&#xff0c;而是一个个参数构造。此时就用到Builder设计模式。 比如&#xff1a;属性计算中&#xff0c;我们构造各个方法。

11.AUTOSAR 诊断栈分析(四)--FIM和DCM

目录 1.Event Debounce策略 2.Function Inhibition Manager 3.DCM 4.小结 前面我们用了大概三篇的篇幅描述了诊断栈的基本概念,分别如下: 8.AUTOSAR 诊断栈分析(一)-CSDN博客 9.AUTOSAR 诊断栈分析(二)-CSDN博客

html刷题笔记

1 em 12 pt 16 px 100% source元素为audio、video、picture元素指定多个媒体文件 margin是用来隔开元素与元素的间距&#xff1b;padding是用来隔开元素与内容的间隔。 margin用于布局分开元素使元素与元素互不相干&#xff1b;padding用于元素与内容之间的间隔&#xff0c;…

【前端架构】清洁前端架构

探索前端架构&#xff1a;概述与干净的前端架构相关的一些原则&#xff08;SOLID、KISS、DRY、DDD等&#xff09;。 在我之前的一篇帖子中&#xff0c;我谈到了Signals和仍然缺少的内容[1]。现在&#xff0c;我想谈谈一个更通用的主题&#xff0c;即Clean Frontend Architectu…

Mysql综合案例练习<1>

MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九 题目一 创建数据库test01_library 创建表 books&#xff0c;表结构如下&#xff1a; CREATE DATABASE …

【js】连续相同请求时,如何中断还未返回的请求

需求 前端页面&#xff0c;用户连续翻页&#xff0c;或是连续筛选这样的连续请求&#xff0c;如果保证发起一次请求时&#xff0c;去中断掉上一次还未返回的请求&#xff1f; 代码 使用axios实现 import axios from axios; import requistDuplicateBlacklist from ./requis…