p2p/examples/list.html at develop · js-platform/p2p · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
	<div id="list">
	</div>
</body>
<script src="http://wrtcb.jit.su/socket.io/socket.io.js"></script>
<script>
	var brokerUrl = 'https://mdsw.ch:8080';
	if(window.location.search) {
	  var params = window.location.search.substring(1).split('&');
	  for(var i = 0; i < params.length; ++ i) {
	    if(params[i].match('^webrtc-broker')) {
	      brokerUrl = params[i].split('=')[1];
	    }
	  }
	}

	console.log(brokerUrl);

	var hosts = {};
	var filter = {
		'metadata': {
			'name': '.*'
		}
	};

	var socket = io.connect(brokerUrl + '/list');
	socket.on('connect', function() {
		socket.emit('list', filter);
	});
	socket.on('error', function(error) {
		console.error(error);
	});
	socket.on('truncate', function(list) {
		clear();
		append(list);
	});
	socket.on('append', function(host) {
		append([host]);
	});
	socket.on('update', function(host) {
		update([host]);
	});
	socket.on('remove', function(route) {
		remove([route]);
	});

	function setQuery(url, item) {
		var urlParts = url.split('?');
		if(urlParts.length < 2) {
			urlParts[1] = item;
		} else {
			var query = urlParts[1].split('&');
			query.push(item);
			urlParts[1] = query.join('&');
		}
		return urlParts.join('?');
	};

	function clear() {
		hosts = {};
		var div = document.getElementById('list');
		var parent = div.parentNode;
		parent.removeChild(div);
		div = document.createElement('div');
		div.id = 'list';
		parent.appendChild(div);
	};

	function append(list) {
		list = list || [];
		list.forEach(function(host) {
			hosts[host['route']] = host;
			var div = document.getElementById('list');
			var element = document.createElement('div');
			host.element = element;
			var name = host['metadata']['name'] || '';
			var url = setQuery(host['url'], 'webrtc-session=' + host['route']);
			element.innerHTML = new Date(host['ctime']).toString() + ' | ' + name  + ' | ' + '<a href="' + url + '">join</a>';
			div.appendChild(element);
		});
	};

	function update(list) {
		list = list || [];
		list.forEach(function(host) {
			if(hosts[host['route']]) {
				var element = hosts[host['route']].element;
				var name = host['metadata']['name'] || '';
				var url = setQuery(host['url'], 'webrtc-session=' + host['route']);
				element.innerHTML = new Date(host['ctime']).toString() + ' | ' + name  + ' | ' + '<a href="' + url + '">join</a>';
				host.element = element;
				hosts[host['route']] = host;
			}
		});
	};

	function remove(list) {
		list = list || [];
		list.forEach(function(route) {
			var host = hosts[route];
			var element = host.element;
			element.parentNode.removeChild(element);
			delete hosts[route];
		});
	};
</script>
</html>