M3

Erweiterung Chat um Räume

Das bestehende System soll nun ausgebaut werden, um Räume zu unterstützen. Damit sind mehrere Verbindungen gemeint, welche parallel geführt werden können. Die fertige Anwendung ist hier abrufbar.

Bevor Nachrichten gesendet werden können, muss zuerst ein Raum ausgewählt werden. Pro Raum sind nur zwei Teilnehmer zulässig. Ein dritter Teilnehmer erhält eine Warnung, dass der gewählte Raum schon voll ist.

Teile des Programmcodes stammen von der WebRTC-Demo-Applikation von Lukas Toggenburger.

Programm-Code

Serverseitig

var counts = {};

io.on('connection', function(socket) {

	socket.on('disconnect', function() {
		if (typeof socket.session != "undefined") {
			socket.broadcast.to(socket.session).emit('message', {
				type : 'leave',
				session : socket.session
			});
			counts[socket.session] = 0;
		}
	});

	socket.on('join', function(session) {
		if (typeof counts[session] == "undefined") {
			console.log("DEBUG: session = " + session
					+ " used for the first time");
			counts[session] = 0;
		}

		var numClients = counts[session];

		if (numClients === 0) {
			socket.join(session);
			socket.session = session;
			socket.emit('caller', session);
			counts[session]++;
		} else if (numClients === 1) {
			socket.join(session);
			socket.session = session;
			socket.emit('callee', session);
			counts[session]++;
			socket.broadcast.to(session).emit('calleeHasJoined', session);
		} else {
			socket.emit('full', session);
		}

		console.log("DEBUG: counts = " + JSON.stringify(counts));
	});

	socket.on('chat message', function(msg) {
		console.log('message: msg = ' + JSON.stringify(msg));
		console.log("onmessage: counts = " + JSON.stringify(counts));
		socket.broadcast.to(socket.session).emit('chat message', msg);
	});

});

Clientseitig

<ul id="messages"></ul>

<form action="" id="formJoin">
	<input type="text" id="room" size="24" maxlength="24"
		value="Kanalnummer"
		onblur="if (this.value == '') {this.value = 'Kanalnummer';}"
		onfocus="if (this.value == 'Kanalnummer') {this.value = '';}" />
	<button id="connectButton">Verbinden</button>
</form>

<form action="" id="formSend">
	<input id="m" autocomplete="off" disabled="disabled" />
	<button id="sendMessage" disabled="disabled">Senden</button>
</form>

<script>
	var isRoomJoined = false;
	var socket = io.connect('https://pbx.prbox.biz:3001');
		$('#formSend').submit(function() {
		socket.emit('chat message', $('#m').val());
		$('#m').val('');
		return false;
	});
		$('#formJoin').submit(function() {
		joinRoom();
		return false;
	});
		socket.on('chat message', function(msg) {
		$('#messages').append($('<li>').text(msg));
	});
	socket.on('full', function(msg) {
		window.alert("Room is already full!");
		isRoomJoined = false;
		document.getElementById('m').disabled = 'disabled';
		document.getElementById('sendMessage').disabled = 'disabled';
	});
		function joinRoom() {
		if (isRoomJoined == false) {
			console.log("Raum wird beigetreten...");
			isRoomJoined = true;
			document.getElementById('m').disabled = false;
			document.getElementById('sendMessage').disabled = false;
			document.getElementById('room').disabled = 'disabled';
			document.getElementById('connectButton').disabled = 'disabled';
			socket.emit('join',
			document.getElementById('room').value);
		}
	}
</script>