Intercettare gli eventi in Socket.io

Mattepuffo's logo
Intercettare gli eventi in Socket.io

Intercettare gli eventi in Socket.io

Programmazione, Javascript - AJAX

Con Socket.io è possibile intercettare / emettere eventi, ed agire di conseguenza.

Ne vediamo tre esempi.

Il primo riguarda l'evento message, che è un evento built-in del framework:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

io.on('connection', function (socket) {
    console.log('A user connected');

    setTimeout(function () {
        socket.send("Messaggio dopo 3 secondi");
    }, 3000);

    socket.on('disconnect', function () {
        console.log('A user disconnected');
    });

});

http.listen(3000, function () {
    console.log('listening on *:3000');
});

Questo il file HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Socket.io</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io();
            socket.on('message', function (data) {
                document.write(data);
            });
        </script>
    </head>
    <body>
        <div>Qui arriverà il messaggio</div>
    </body>
</html>

Avviate il programma, e navigate col browser sulla pagina; dopo tre secondi comparirà il messaggio sulla pagina.

Possiamo anche crearci noi degli eventi:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

io.on('connection', function (socket) {
    console.log('A user connected');

    setTimeout(function () {
        socket.emit('evento_test', {description: 'Questo è un evento di test!'});
    }, 5000);

    socket.on('disconnect', function () {
        console.log('A user disconnected');
    });

});

http.listen(3000, function () {
    console.log('listening on *:3000');
});

La pagina verrà modificata così:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Socket.io</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io();
            socket.on('evento_test', function (data) {
                document.write(data.description);
            });
        </script>
    </head>
    <body>
        <div>Qui arriverà il messaggio</div>
    </body>
</html>

Infine, possiamo anche mandare degli eventi dal client; anche qui usiamo un evento built-in (clientEvent):

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

io.on('connection', function (socket) {
    console.log('A user connected');

    socket.on('clientEvent', function (data) {
        console.log(data);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected');
    });

});

http.listen(3000, function () {
    console.log('listening on *:3000');
});

Questa la pagina:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Socket.io</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io();
            socket.emit('clientEvent', 'Sent an event from the client!');
        </script>
    </head>
    <body>
        <div>Qui arriverà il messaggio</div>
    </body>
</html>

Controllate in console.

Ovviamente è possibile combinare questi eventi.

Enjoy!

Condividi

Commentami!