socket-io-chat/index.html at master · hacksu/socket-io-chat · 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
<!DOCTYPE html>
<html>
<head>
  <title>Messaging</title>
</head>
<body>

  <h1>Messages</h1>

  <!-- Our list of messages -->
  <ul id="list">
    <!-- This is what an indiviudal message looks like: -->
    <!-- <li>[name] message</li> -->
  </ul>

  <!-- A form to send new messages -->
  <form>
    <input type="text" placeholder="Message" id="message">
    <button id="send">Send</button>
  </form>

  <!-- Include jQuery and socket.io. -->
  <!-- The socket.io server also serves the client library at localhost:8888/socket.io/socket.io.js,
  but we'll use the CDN to load this so it will still work for people that aren't running the server -->
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
  <script>
    // Connect to our socket.io server
    var socket = io.connect('http://localhost:8888');

    // Runs when we click the send button
    $('#send').click(function (event) {
      // Prevent it from submitting the form and refreshing the page
      event.preventDefault();

      // Get the input text
      var text = $('#message').val();

      // Emit a message, sending it to our server
      socket.emit('message', {
        name: 'paul', // put your name here
        text: text    // the text of the message
      });

      // Reset the textbox
      $('#message').val('');
    });

    // This will run when we receive a message
    socket.on('message', function (message) {

      // Put a new <li> at the top of our message list
      $('#list').prepend('<li>['+message.name+'] '+message.text+'</li>');

    });
  </script>
</body>
</html>