Nextrek
Subversion Repository Public Repository

Nextrek

URLs

Copy to Clipboard
Explore
Commits
@ 1129

Nextrek / socketIO / public / customer.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

<!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: 'Customer ' + Date.now(), role: 'CUSTOMER'});

            // room created
            socket.on('ROOM:CREATED', (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);
            });


            $(document).ready(() => {
                $('#leave').click(() => {
                    socket.emit('ROOM:LEAVE');
                });
            });
        </script>
    </head>
    <body>
        <h1>CUSTOMER</h1>
        <button id="leave">Leave</button>
        <div id="customers-rooms">
        </div>
    </body>
</html>

Commits for Nextrek/socketIO/public/customer.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
1120 GGentile picture GGentile Tue 04 Dec, 2018 10:31:37 +0000

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

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