Bonjour,

Ma boucle de jeu côté client attend un event "message" envoyé par le serveur. Je n'ai pas mis le détail ici, mais cette fonction reçoit des données pour générer et dessiner des canvas, en gros. Fonction assez gourmande donc, on peut optimiser au maximum mais dessiner, ça commence des ressources.

Ma problématique est que lorsque le client reçoit ces messages, le framerate baisse drastiquement, puisque le traitement de cette fonction est long. Mais je suis surpris, parce que socket.on est sensé être asynchrone ? A voir la chute de FPS à chaque réception de message, j'ai vraiment l'impression que socket.on bloque requestAnimationFrame. Voici un code simplifié :

server.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
 
app.get('/', (req, res) => // fol
{
    res.sendFile('/var/www/html/Alborz/public/test.html');
});
 
// server intiialization 
http.listen(5000, () => 
{ 
    console.log('started.');
 
    io.on('connection', (socket) => // fol
    {
        console.log('jey!');
 
        socket.on('sendMeMessage', function() // fol
        {
            socket.emit('message', {});
        });
 
    });
})
index.js
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
 
        <link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css" type="text/css">
        <script src="https://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
 
    </head>
 
    <body>
 
        <script src="/socket.io/socket.io.js"></script> 
 
        <script>
            
            let world = // fold
            { 
                _socket:undefined,
                _frames : 0,
                _now : undefined,
                _before : new Date(),
 
                update:function() {
                    
                    // do some things
                    
                    world._now = new Date();
                    
                    if (world._now - world._before > 1000) {
                        $$("framerate").define("value", world._frames);
                        $$("framerate").refresh();
                        world._before = world._now;
                        world._frames = 0;
                    } else {
                        world._frames++;
                    }
                    
                },
 
                loop:function() {
                    
                    world.update();
                    
                    requestAnimationFrame(world.loop);
                },
            };
            
            webix.ready(function() {
                
                world._socket = io();
                
                // windows avec text en haut à droite
                webix.ui( // fold
                {
                    view:"window",
                    head:false,
                    autofit:true,
                    zIndex:2000,
                    body:{
                        id:'framerate',
                        view:"text", 
                        value:"", 
                        readonly:true,
                        labelWidth:0,  
                        width:100,
                        tooltip:'FPS',
                    },
                    css:{
                        'background-color': 'transparent !important',
                        'box-shadow': 'none !important'
                    },
                    borderless:true,
                    
                }).show({ x:window.innerWidth-108, y:7 });
        
                world.loop();
                
                    // ok
                    world._socket.on('message', function() // fol
                    {
                        for (let i=0; i<1000000000; i++) {
                            let a = i * 5;
                            a = a % 3;
                        }
                        console.log('done');
                    });
                    
                document.addEventListener("keydown", function() {
                    world._socket.emit('sendMeMessage', {});
                }, false);
 
            });
 
        </script>
    </body>
</html>