Nextrek
Subversion Repository Public Repository

Nextrek

URLs

Copy to Clipboard
Explore
Commits
@ 1129

Nextrek / socketIO / public / index.html 

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
119
120
121
122
123

<!doctype html>
<html>
    <head>
        <title>Socket.IO</title>
        <link rel="stylesheet" href="/style/rooms.css">
            <script type="text/javascript" src="/js/socket.io.dev.js"></script>
            <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
            <script type="text/javascript" src="/js/ui.js"></script>
            <script>
                socket = io();
                // create user
                socket.emit('CONNECTION:OPEN', {
                    name: 'Operator ' + Date.now(),
                    role: 'OPERATOR'
                });
                // receive operators list updates
                socket.on('OPERATORS:LIST:UPDATE', (data) => {
                    console.log('operators', data);

                    uiOperatorsList(data, (user) => {
                        socket.emit('ROOM:JOIN', {user});
                    });
                });
                // receive customers list updates
                socket.on('CUSTOMERS:LIST:UPDATE', (data) => {
                    console.log('customers', data);

                    uiCustomersList(data, (user) => {

                        socket.emit('ROOM:JOIN', {user});

                        const $room = uiRoom(user, 
                            $form => {
                                $form.submit(e => {
                                    e.preventDefault();

                                    const $input = $form.find('input');
                                    const room = user.room;

                                    if ($input.val().trim() !== "") {
                                        const msg = $input.val();
                                        const json = {
                                            content: msg,
                                            contentType: 'TEXT',
                                            room
                                        };

                                        console.log('send_message');

                                        socket.emit('SEND:MESSAGE', json);
                                        $input.val('');
                                    }
                                    return false;
                                });
                            }, 
                            $formImg => {
                                $formImg.submit(e => {
                                    e.preventDefault();

                                    const $input = $formImg.find('input');
                                    const room = user.room;

                                    const filesSelected = $input[0].files;
                                    if (filesSelected.length > 0) {
                                        const fileToLoad = filesSelected[0];
                                
                                        const fileReader = new FileReader();
                                
                                        fileReader.onload = (fileLoadedEvent) => {
                                            const json = {
                                                content: fileLoadedEvent.target.result,
                                                contentType: 'IMAGE',
                                                room
                                            };
                                            console.log('send_image');

                                            socket.emit('SEND:MESSAGE', json);
                                            $input.val('');
                                        };
                                
                                        fileReader.readAsDataURL(fileToLoad);
                                    }
                                })
                            }
                        );

                        $('#customers-rooms').append($room);
                    });
                });
                // receive messages
                socket.on('SEND:MESSAGE', (data) => {
                    uiDisplayMessage(data);
                });

                // user left
                socket.on('ROOM:LEAVE', (user) => {
                    const content = {
                        content: user.name + ' left the room.',
                        contentType: 'TEXT',
                        room: user.room,
                        from: user
                    }
                    uiDisplayMessage(content);
                });
            </script>
        </head>
        <body>
            <h1>OPERATORS PANEL</h1>
            <div id="page">
                <div class="online-users">
                    <h2>Customers List</h2>
                    <ul id="customers-list"></ul>
                </div>
                <div id="rooms">
                    <div id="customers-rooms"></div>
                </div>
                <div class="online-users">
                    <h2>Operators List</h2>
                    <ul id="operators-list"></ul>
                </div>
            </div>
        </body>
    </html>

Commits for Nextrek/socketIO/public/index.html

Diff revisions: vs.
Revision Author Commited Message
1129 Diff Diff GGentile picture GGentile Wed 23 Jan, 2019 23:23:52 +0000

room leave and notify guests
1127 Diff Diff GGentile picture GGentile Wed 09 Jan, 2019 13:47:30 +0000

send image
1123 Diff Diff GGentile picture GGentile Fri 04 Jan, 2019 00:19:22 +0000
1120 Diff Diff GGentile picture GGentile Tue 04 Dec, 2018 10:31:37 +0000
1119 Diff Diff GGentile picture GGentile Mon 03 Dec, 2018 23:13:28 +0000
1116 MOliva picture MOliva Tue 25 Sep, 2018 14:16:19 +0000

History View complete history Commits RSS feed for /socketIO/public/index.html

Need assistance?   Get in touch, or head to our documentation site.