前端使用socket.io

.伊泽瑞尔

已于 2023-12-04 17:26:32 修改

阅读量874

点赞数 5

分类专栏：前端文章标签：前端

于 2023-12-04 17:23:25 首次发布

本文链接：https://blog.csdn.net/qq_35517283/article/details/134789263

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

@前端使用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对象）。