umidjons/socket.io-client-events.md

## socket.io-client-events.md

      
    Raw
  

              socket.io-client-events.md
            
          
    Socket.io Client (Manager) events example

npm i -S socket.io express jquery

File server.js:
var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.use(express.static(__dirname + '/node_modules'));

server.listen(80);

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

io.on('connection', function (socket) {
    socket.emit('news', {hello: 'world'});
});
File index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.io Client (Manager) Events</title>
</head>
<body>

<div id="log"></div>

<script src="/socket.io/socket.io.js"></script>
<script src="/jquery/dist/jquery.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        function log(eventName, message) {
            if (typeof message == 'object')
                message = JSON.stringify(message);
            var content = eventName + '>' + (message ? message : '');
            $('#log').append($('<p>').text(content));
        }

        var socket = io.connect('http://localhost');
        socket
                .on('connect', function () {
                    log('connect', 'connected');
                })
                .on('connect_error', function (err) {
                    log('connect_error', err);
                })
                .on('connect_timeout', function () {
                    log('connect_timeout');
                })
                .on('reconnect', function (attempt) {
                    log('reconnect', 'Attempt #' + attempt);
                })
                .on('reconnecting', function (attempt) {
                    log('reconnecting', 'Attempt #' + attempt);
                })
                .on('reconnect_attempt', function () {
                    log('reconnect_attempt');
                })
                .on('reconnect_error', function (err) {
                    log('reconnect_error', err);
                })
                .on('reconnect_failed', function () {
                    log('reconnect_failed');
                })
                .on('news', function (data) {
                    log('news', data);
                });
    });
</script>

</body>
</html>
Sample output:
connect>connected
news>{"hello":"world"}
reconnect_attempt>
reconnecting>Attempt #1
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #2
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #3
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #4
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #5
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #6
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #7
connect_error>{"type":"TransportError","description":0}
reconnect_error>{"type":"TransportError","description":0}
reconnect_attempt>
reconnecting>Attempt #8
reconnect>Attempt #8
connect>connected
news>{"hello":"world"}
reconnect_attempt>
reconnecting>Attempt #1
reconnect>Attempt #1
connect>connected
news>{"hello":"world"}