Creating the main HTML page of the application
First, create an HTML index.html
page. In the following code, you can find its content. Note that the less important and obvious parts might be skipped here.
Include our JavaScript library that is in a separate file:
Include Google's WebRTC JavaScript adapter:
Create a div
tag where we will put information regarding the connection:
Create a div
tag where the received messages from a remote peer will be placed:
Create a form with an input element and a button to send messages to the remote peer:
Create a connection to the signaling server and initialize the WebRTC stack. The following function is declared in the JavaScript library, which we will consider further in the recipe:
Note that the domain name and port might be different in your case; they should be the same as declared in the source codes of the signaling sever. By default, the signaling server is listening on local host and on port 30001.
The following function sends a message to the remote peer using the sendDataMessage
function—we will write it as part of the JavaScript library:
We will also declare a callback function for a catching event when a new virtual room is created:
Create a link to share with the remote peer, put the link in the div
status.
To show the messages received from the remote peer, we will declare an appropriate callback function. This function gets the message and puts it in the appropriate place on the HTML page:
Save the HTML file. This will be the main page of the applications.
Creating the JavaScript helper library
Now, create an empty myrtclib.js
file and put the following content into it. Note that many parts of the following code might be used in the next chapters, so they should be well-known to you already. Such obvious parts of the code might be skipped in further.
The following variable will be used for handling the data channel object:
Until now, the code is very similar to what we used in a typical WebRTC example application. Although, now we will add something new. We will set up a handler for the ondatachannel
event of the PeerConnection
object. This callback function will be called when the peer asks us to create a data channel and establish a data connection:
The handler function is pretty simple. We will store the reference in the data channel and initialize it:
By initializing the data channel, I mean setting up a channel's event handlers:
In the following function, we need to create a new data channel—not when the remote peer is asking us, but when we're the initiator of the peer connection and want to create a new data channel. After we have created a new data channel, we should ask the remote peer to do the same:
When we create a new data channel, we can set up a name of the channel. In the following piece of code, we will use the number of the virtual room to name the channel:
When we are playing the role of the connection initiator (caller), we create a new data channel. Then, during the connection establishment, the remote peer will be asked to do the same and the data channel connection will be established:
To send text messages via the data channel, we need to implement the appropriate function. As you can see in the following code, sending data to the data channel is pretty easy:
The following handler is necessary to print the state of the data channel when it is changed:
When the remote peer sends us a message via the data channel, we will parse it and call the appropriate function to show the message on the web page:
Save the JavaScript file.
Now, start the signaling server and open the HTML file in a web browser—you should see an input field and a button on the page. At the top of the page, you should see a URL to be shared with the remote peer.
On another browser's window, open the sharing link. In the web browser's console, you should see the Data channel state is open message. Now, enter something in the input box and click on the Submit query button. You should see the message printed on another browser's window.