Nextrek

URLs

Explore

Commits

Diff Revisions 1122 vs 1123 for /socketIO/public/index.html

		@@ -2,60 +2,80 @@
2	2		<html>
3	3		<head>
4	4		<title>Socket.IO</title>
5		-	<link rel="stylesheet" href="/style/rooms.css">
6		-	<script type="text/javascript" src="/js/socket.io.dev.js"></script>
7		-	<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
8		-	<script type="text/javascript" src="/js/ui.js"></script>
9		-	<script>
10		-	socket = io();
11		-
12		-	// create user
13		-	socket.emit('CONNECTION:OPEN', {name: 'Operator ' + Date.now(), role: 'OPERATOR'});
14		-
15		-	// receive operators list updates
16		-	socket.on('OPERATORS:LIST:UPDATE', (data) => {
17		-	console.log('operators', data);
18		-	uiOperatorsList(data, (user) => {
19		-	socket.emit('ROOM:JOIN', {data: {user}});
	5	+	<link rel="stylesheet" href="/style/rooms.css">
	6	+	<script type="text/javascript" src="/js/socket.io.dev.js"></script>
	7	+	<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
	8	+	<script type="text/javascript" src="/js/ui.js"></script>
	9	+	<script>
	10	+	socket = io();
	11	+	// create user
	12	+	socket.emit('CONNECTION:OPEN', {
	13	+	name: 'Operator ' + Date.now(),
	14	+	role: 'OPERATOR'
20	15		});
21		-	});
22		-
23		-	// receive customers list updates
24		-	socket.on('CUSTOMERS:LIST:UPDATE', (data) => {
25		-	console.log('customers', data);
26		-	uiCustomersList(data, (user) => {
27		-	socket.emit('ROOM:JOIN', {data: {user}});
28		-
29		-	const $room = uiRoom(user);
30		-	$('#customers-rooms').append($room);
	16	+	// receive operators list updates
	17	+	socket.on('OPERATORS:LIST:UPDATE', (data) => {
	18	+	console.log('operators', data);
	19	+
	20	+	uiOperatorsList(data, (user) => {
	21	+	socket.emit('ROOM:JOIN', {user});
	22	+	});
31	23		});
32		-	});
33		-
34		-	// receive messages
35		-	socket.on('SEND:MESSAGE', (data) => {
36		-	uiDisplayMessage(data);
37		-	});
38		-	</script>
39		-	</head>
40		-	<body>
41		-	<h1>OPERATORS PANEL</h1>
42		-	<div id="page">
43		-	<div class="online-users">
44		-	<h2>Customers List</h2>
45		-	<ul id="customers-list">
	24	+	// receive customers list updates
	25	+	socket.on('CUSTOMERS:LIST:UPDATE', (data) => {
	26	+	console.log('customers', data);
	27	+
	28	+	uiCustomersList(data, (user) => {
	29	+
	30	+	socket.emit('ROOM:JOIN', {user});
	31	+
	32	+	const $room = uiRoom(user, ($form) => {
	33	+	$form.submit((e) => {
	34	+	e.preventDefault();
	35	+
	36	+	var $input = $form.find('input');
	37	+	var room = user.room;
	38	+
	39	+	if ($input.val().trim() !== "") {
	40	+	var msg = $input.val();
	41	+	var json = {
	42	+	content: msg,
	43	+	contentType: "text/plain",
	44	+	room
	45	+	};
	46	+
	47	+	console.log('send_message');
	48	+
	49	+	socket.emit('SEND:MESSAGE', json);
	50	+	$input.val('');
	51	+	}
	52	+	return false;
	53	+	});
	54	+	});
46	55
47		-	</ul>
48		-	</div>
49		-	<div id="rooms">
50		-	<div id="customers-rooms">
	56	+	$('#customers-rooms').append($room);
	57	+	});
	58	+	});
	59	+	// receive messages
	60	+	socket.on('SEND:MESSAGE', (data) => {
	61	+	uiDisplayMessage(data);
	62	+	});
	63	+	</script>
	64	+	</head>
	65	+	<body>
	66	+	<h1>OPERATORS PANEL</h1>
	67	+	<div id="page">
	68	+	<div class="online-users">
	69	+	<h2>Customers List</h2>
	70	+	<ul id="customers-list"></ul>
	71	+	</div>
	72	+	<div id="rooms">
	73	+	<div id="customers-rooms"></div>
	74	+	</div>
	75	+	<div class="online-users">
	76	+	<h2>Operators List</h2>
	77	+	<ul id="operators-list"></ul>
51	78		</div>
52	79		</div>
53		-	<div class="online-users">
54		-	<h2>Operators List</h2>
55		-	<ul id="operators-list">
56		-
57		-	</ul>
58		-	</div>
59		-	</div>
60		-	</body>
61		-	</html>
	80	+	</body>
	81	+	</html>

View View this file contents

History View the full history

Feeds

Commits for /socketIO/public/index.html