前端使用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

使用

javascript 复制代码
		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官方网站

相关推荐
新中地GIS开发老师26 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang33 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_38 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含42 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端43 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack