off -> removeListener, add example

t-mullen · Jul 13, 2019 · 54e77e6 · 54e77e6
1 parent 6c71419
commit 54e77e6
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 3 deletions.
diff --git a/client/package.json b/client/package.json
@@ -15,7 +15,7 @@
   "scripts": {
     "build": "browserify src/index.js -s SimpleSignalClient | minify >  ../dist/simple-signal-client.min.js",
     "build-dev": "browserify src/index.js -s SimpleSignalClient -o ../dist/simple-signal-client.js",
-    "test": "standard && npm run test-node",
+    "test": "standard && node support/server.js > /dev/null | npm run test-node",
     "test-browser": "airtap -- test/*.js",
     "test-browser-local": "airtap --local -- test/*.js",
     "test-node": "WRTC=wrtc tape test/*.js"

diff --git a/client/src/index.js b/client/src/index.js
@@ -150,8 +150,8 @@ SimpleSignalClient.prototype._onSafeConnect = function (peer, callback) {
         })
       }, 0)
     }, 0)
-    peer.off('stream', streamHandler)
-    peer.off('track', trackHandler)
+    peer.removeListener('stream', streamHandler)
+    peer.removeListener('track', trackHandler)
     callback(peer)
   })
 }

diff --git a/examples/lobbys/README.md b/examples/lobbys/README.md
@@ -0,0 +1,5 @@
+# lobbys example
+
+Allows peers to join a "lobby" from a list. A lobby is a collection of peers that are all connected to each other.
+
+To run: `npm install` and `npm run lobbys` Then go to `http://locahost:8000` in one or more browser tabs.
diff --git a/examples/lobbys/index.html b/examples/lobbys/index.html
@@ -0,0 +1,122 @@
+<html>
+	<head>
+		<style>
+			#list > .el {
+				border: 1px solid black;
+				text-align: center;
+				font-size: 20px;
+				padding: 15px;
+				margin: 5px;
+			}
+			video {
+				display: inline;
+				width: 300px;
+			}
+		</style>
+	</head>
+	<body>
+			<p>Select a lobby to join!</p>
+			<div id="list"></div>
+			<div id="localVideo"></div>
+			<div id="remoteVideos"></div>
+	</body>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
+	<script src="../simple-signal-client.min.js"></script>
+	<script>
+		const roomContainer = document.getElementById('list')
+		const localVideoContainer = document.getElementById('localVideo')
+		const remoteVideoContainer = document.getElementById('remoteVideos')
+
+		// creates a DOM element to allow the user to see/join rooms
+		function createRoomElement (id) {
+			const element = document.createElement('div')
+			element.className = 'el'
+			element.id = id
+			element.innerHTML = id
+			roomContainer.appendChild(element)
+			return element;
+		}
+
+		// creates a video element, sets a mediastream as it's source, and appends it to the DOM
+		function createVideoElement(container, mediaStream) {
+			const videoElement = document.createElement('video')
+			videoElement.autoplay = true
+			videoElement.srcObject = mediaStream
+			container.appendChild(videoElement)
+			return videoElement
+		}
+
+		const socket = io('localhost:3000')       // setup the socket.io socket
+		const signalClient = new SimpleSignalClient(socket) // construct the signal client
+		var currentRoom = null 	 // keeps track of current room
+
+		function onPeer (peer, localStream) {
+			peer.addStream(localStream)
+			peer.on('stream', (remoteStream) => {
+				const videoElement = createVideoElement(remoteVideoContainer, remoteStream)
+				peer.on('close', () => {
+					remoteVideoContainer.removeChild(videoElement)
+				})
+			})
+		}
+
+		// connects to a peer and handles media streams
+		async function connectToPeer(peerID, localStream) {
+			console.log('connecting to peer', peerID)
+			const { peer } = await signalClient.connect(peerID, currentRoom) // connect to the peer
+			console.log('connected to peer', peerID)
+			onPeer(peer, localStream)
+		}
+
+		function joinRoom (roomID, localStream) {
+			console.log('join', roomID)
+			// disconnect from all peers in old room
+			if (currentRoom) {
+				if (currentRoom !== roomID) {
+					signalClient.peers().forEach(peer => {
+						peer.destroy()
+					})
+				} else {
+					return;
+				}
+				currentRoomElement.style.backgroundColor = ''
+			}
+			currentRoom = roomID // update current room
+			currentRoomElement = document.getElementById(roomID)
+			currentRoomElement.style.backgroundColor = 'lime'
+			console.log('requesting to join', roomID)
+			signalClient.discover(roomID)
+
+			// get the peers in this room
+			function onRoomPeers (discoveryData) {
+				if (discoveryData.roomResponse == roomID) {
+					console.log(discoveryData)
+					signalClient.removeListener('discover', onRoomPeers)
+					discoveryData.peers.forEach(peerID => connectToPeer(peerID, localStream)) // connect to all peers in new room
+				}
+			}
+			signalClient.addListener('discover', onRoomPeers)
+		}
+
+		// request local webcam
+		navigator.getUserMedia({ audio: true, video: true }, (localStream) => {
+			const videoElement = createVideoElement(localVideoContainer, localStream) // display local video
+			signalClient.discover(null)  // begin discovering rooms
+
+			signalClient.on('request', async (request) => {
+				const { peer } = await request.accept()
+				onPeer(peer, localStream)
+			})
+
+			// listen for discovery's completion
+			signalClient.once('discover', (discoveryData) => {
+				// discovery provides a list of rooms, show them to the user
+				console.log(discoveryData)
+				discoveryData.rooms.forEach(roomID => {
+					const roomElement = createRoomElement(roomID) // create a DOM element for each room
+					roomElement.addEventListener('click', () => joinRoom(roomID, localStream)) // register a click handler to join room
+				})
+			})
+		}, () => alert('No webcam access!'))
+	</script>
+</html>
diff --git a/examples/lobbys/server.js b/examples/lobbys/server.js
@@ -0,0 +1,38 @@
+const io = require('socket.io')() // create a socket.io server
+var SimpleSignalServer = require('./../../server/src/index') // require('simple-signal-server')
+var signal = new SimpleSignalServer(io)
+
+// here we hardcode some fixed rooms, but you could easily create them dynamically
+const rooms = {
+	'Room One' : new Set(),
+	'Room Two' : new Set(),
+	'Room Three' : new Set()
+}
+
+// when a peer starts, it will request a list of rooms
+// after that, it will request peers in a specific room
+signal.on('discover', (request) => {
+	if (!request.discoveryData) { // return list of rooms
+		request.discover(request.socket.id, {
+			rooms: Object.keys(rooms)
+		})
+	} else { // return peers in a room
+		const roomID = request.discoveryData
+		request.discover(request.socket.id, {
+			roomResponse: roomID, // return the roomID so client can correlate discovery data
+			peers: Array.from(rooms[roomID])
+		})
+		if (request.socket.roomID) { // if peer was already in a room
+			console.log(request.socket.id, 'left room', request.socket.roomID)
+			rooms[request.socket.roomID].delete(request.socket.id) // remove peer from that room
+		}
+		if (request.socket.roomID !== roomID) { // if peer is joining a new room
+			request.socket.roomID = roomID // track the current room in the persistent socket object
+			console.log(request.socket.id, 'joined room', roomID)
+			rooms[roomID].add(request.socket.id) // add peer to new room
+		}
+	}
+})
+
+console.log('Running lobbys demo!')
+io.listen(3000)
diff --git a/examples/lobbys/simple-signal-client.min.js b/examples/lobbys/simple-signal-client.min.js
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "examples",
+  "version": "1.0.0",
+  "description": "",
+  "main": "simple-signal-client.min.js",
+  "scripts": {
+    "lobbys": "simplehttpserver lobbys > /dev/null | node lobbys/server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "simplehttpserver": "^0.3.0",
+    "socket.io": "^2.2.0"
+  }
+}
diff --git a/examples/simple-signal-client.min.js b/examples/simple-signal-client.min.js