specificUser/index.html at master · generalhenry/specificUser · 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
<!DOCTYPE html>
<meta charset=utf-8>
<title>chat</title>
<script src=//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>
<script src=/socket.io/socket.io.js></script>
<script>

  $(function () {
    var socket = io.connect();

    var $users = $('#users ul');
    var $chatOutput = $('#chat div');
    var $chatInput = $('#chat input');
    var $messagesOutput = $('#messages div');
    var $messagesInput = $('#messages input');
    var target = 0;

    socket.on('hello', function (data) {
      console.log('hello:', data.hello);
    });
    socket.on('listing', function (data) {
      console.log('listing:', data);
      window.users = data;
      target = 0;
      $users.empty();
      $.each(data, function (index, user) {
        console.log(arguments);
        $users.append('<li>' + user);
      });
      $users.find('li:first').addClass('selected');
    });
    socket.on('chat', function (message) {
       console.log('chat:', message);
       $chatOutput.append('<div>' + message);
    });
    socket.on('message', function (message) {
       console.log('message', message);
       $messagesOutput.append('<div>' + message);
    });

    function chat (message) {
      socket.emit('chat', message);
    }
    function message (user, message) {
      socket.emit('message', {
        user: user,
        message: message
      });
    }

    $('#chat form').submit(function (event) {
      event.preventDefault();
      chat($chatInput.val());
      $chatInput.val('');
    });

    $('#messages form').submit(function (event) {
      event.preventDefault();
      message(users[target], $messagesInput.val());
      $messagesInput.val('');
    });

    $users.on('click', 'li', function (event) {
      var $user = $(this);
      target = $user.index();
      $users.find('li').removeClass('selected');
      $user.addClass('selected');

    });
  });

</script>
<style>
  .selected {
    color: blue;
  }
</style>
<section id='users'>
  <h1>Users:</h1>
  <ul></ul>
</section>
<section id='chat'>
  <h1>Chat:</h1>
  <div></div>
  <form>
    <input>
    <button>submit</buttom>
  </form>
</section>
<section id='messages'>
  <h1>Messages:</h1>
  <div></div>
  <form>
    <input>
    <button>submit</buttom>
  </form>
</section>