chirp-server/socketio-example.html at master · pnavarrc/chirp-server · GitHub

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>

  <head>
    <title>Socket.IO Example</title>

    <link rel="stylesheet" href="assets/css/bootstrap.css">

    <!-- Socket.IO serves the client-side library  -->
    <script src="http://localhost:7000/socket.io/socket.io.js"></script>
    <script src="assets/js/d3.js" charset="utf8"></script>
  </head>

  <body>

    <style>
      .client {
        color: #3465a4;
        font-style: italic;
      }
      .server {
        color: #73d216;
        font-style: italic;
      }
    </style>


    <div class="container">

      <h1>Socket.IO Example</h1>

        <!-- Input element to send messages -->
        <form role="form" class="form-horizontal" id="msg-form">
            <div class="form-group">
                <label for="msgToServer" class="col-sm-1">Message</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control input-sm" id="msgToServer" placeholder="Send a message to the server.">
                </div>
                <button type="submit" class="btn btn-default btn-sm">Send</button>
            </div>
        </form>

        <!-- List with messages -->
        <ul id='msg-list' class='list-unstyled'>
        </ul>

    </div>


  <script>

    // Open a connection with the Socket.IO server
    var socket = io('http://localhost:7000');

    // Declare variables for the message list and the time formatter
    var messages = [],
        dateFmt = d3.time.format('[%H:%M:%S]');

    // Update the message list
    function updateMessages() {

        // Sort the messages, most recent first
        messages.sort(function(a, b) {
            return b.date - a.date;
        });


        var li = d3.select('#msg-list')
            .selectAll('li').data(messages);

        // Append the list elements on enter
        li.enter().append('li');

        // Update the list class and content.
        li
            .attr('class', function(d) { return d.from; })
            .html(function(d) {
              return [dateFmt(d.date), d.from, ':', d.msg].join(' ');
            });
    }

    d3.select('#msg-form').on('submit', function() {

        var inputElement = d3.select('#message').node(),
            message = inputElement.value.trim();

        // Check that the message is not empty
        if (message) {
            // Sends the message to the server
            socket.emit('client-message', {msg: message});

            // Append the message to the message list
            messages.push({from: 'client', date: new Date(), msg: message});

            // Update the list of messages (DOM)
            updateMessages();

            // Resets the form, clearing the input element
            this.reset();
        }

        d3.event.preventDefault();
    });

    socket.on('server-message', function(data) {
      messages.push({from: 'server', date: new Date(), msg: data.msg});
      updateMessages();
    });

    // The callback will be invoked when the connection establishes
    socket.on('connect', function() {
        console.log('Successful connection to the server.');
    });

  </script>

  </body>
</html>