Sweshi's Tutorials

Beginner Friendly WEB RTC Tutorial

Creating a Signalling Server

Webrtc connections require a signalling server to be created. This is a server that will be responsible for facilitating communication between peers, exchanging session information and negotiation of messages. Signalling does not handle the actual data transfer but is responsible for the peer discovery that allows them to setup a connection. To do this, we need node.js installed and websocket. You can download and install node.js on your computer from this link Download | Node.js (nodejs.org) . After installation open the command prompt. Run the following commands

mkdir webrtc-signaling-server cd webrtc-signaling-server npm init -y WebRTC creating the signalling server

The command “mkdir webrtc-signaling-server” creates a new folder that will be used for the server. We then enter the folder using the “cd webrtc-signaling-server” command. The last command “npm init -y” creates a basic node.js project in your user directory with some default values as shown in the figure below.

WebRTC creating the signalling server Folder

We can then install the dependencies “express” and “ws” by running the following command. "npm install express ws"

WebRTC installing express and web socket using node.js

Inside the webrtc-signaling-server folder, create a new file and name it as “server.js”. This will be the script for the signalling server itself. It should look like the image below.

WebRTC server.js creation

server.js File

Open the server.js file for editing and we will begin by adding the following code.

WebRTC server.js code

  • Line 2 makes sure we use strict version of JavaScript to catch common errors and error prone features.
  • Line 4 Imports the express module we just installed which lets us create a basic web server.
  • Line 5 Lets us import the http module to create an HTTP server.
  • Line 6 Then imports the “ws” module that will be used to for “web sockets.”
  • Line 8 Creates an instance of the express application.
  • Line 9 Creates an HTTP server using the express application.
  • Line 10 Then creates an instance of WebSocket which is attached to the HTTP server allowing for WebSocket and HTTP to use the same port for traffic.
  • Line 13 We can then store connected clients using a set().

Continuation of the server.js file

WebRTC server.js continuation

  • Line 15 up to 28 is about handling WebSocket connections. When a new connection is established, a number of things need to happen. Line 15 creates the connection and creates a function.
  • Line 16 logs to the console that a client is connected.
  • Line 17 then adds the connected client to the set. Notice that it is actually the socket that is added as a client. This represents the peer connected to the server.
  • Line 19 listens to incoming messages from the client that has connected to the server. When a message is received, it is then logged to the console and then broadcasts it to all other connected clients.
  • Line 24 is when a client closes the connection. We create a function that logs the closure and then in Line 26 we delete that client (WebSocket) from the client list.

Continuation of server.js file.

WebRTC broadcasting to all clients

The broadcast function iterates through all connected clients and sends the provided message to each client except the sender, ensuring that the message is only sent to other clients.

Continuation of server.js file

WebRTC port number and environment variables

  • Line 38 sets a default port number of 3000 to be used for traffic if there is no default environment port configured on the operating system.
  • Line 39 then starts the server and this server listens on the port number sent in the previous line.
  • Line 40 logs to the console that the server is listening.

The full server script should look as shown below.

// server.js 'use strict'; const express = require('express'); const http = require('http'); const WebSocket = require('ws'); const app = express(); const server = http.createServer(app); const wss = new WebSocket.Server({ server }); // Store connected clients const clients = new Set(); wss.on('connection', (ws) => { console.log('Client connected'); clients.add(ws); ws.on('message', (message) => { console.log(`Received message: ${message}`); broadcast(message, ws); }); ws.on('close', () => { console.log('Client disconnected'); clients.delete(ws); }); }); function broadcast(message, sender) { clients.forEach((client) => { if (client !== sender && client.readyState === WebSocket.OPEN) { client.send(message); } }); } const PORT = process.env.PORT || 3000; server.listen(PORT, () => { console.log(`Server is listening on port ${PORT}`); });

Starting the webRTC Signalling Server



Now that we have a basic signalling server, we can try running the server by running the following command. Make sure your terminal is working from the directory created earlier i.e. "webrtc-signaling-server." If not in the directory, run "cd webrtc-signaling-server"

node server.js

This will start the server. The firewall on your machine might require permission to use this server on your network as shown below.

allowing the WebRTC signalling server through the windows firewall