Sweshi's Tutorials

Series Links

• Installation
• Video Page
• Creating the Client Script
• Event Handlers, Methods and Propertis
• Creating the HTML buttons
• Creating the Event Listeners
• Creating a Signalling Server
• Creating a Texting App 1
• Creating a Texting App 2
• Creating a Data Transfer App Part 1 (Advanced)
• Creating a Data Transfer App Part 2 (Advanced)

Beginner Friendly WEB RTC Tutorial

Creating a Real Time Texting Application Part 1 - The HTML Page

Assuming that the signalling server is setup and running as shown in the previous section, we can then go on a create a real-time texting application allowing users to connect to the server and sending messages to each other. If the signalling server is not running, just make sure to start it. In the folder where we have been creating the HTML and JavaScript Files, create a new HTML named texting.php i.e., C:/xampp/htdocs/webrtc/texting.php. Inside this file create add the following code.

• Line 22 - There is an invisible div that will be showing the messages that we send and receive.
• Lines 23 and 24 - This will create an HTML page that has a text box with a button for sending a message.
• Line 25 – I have opened the script that will contain the source code for sending and receiving the messages. Make sure to open and close the script tag

We can then continue to add some code to the script as shown below. Make sure to put this code in between the tags. View the complete code below to see how this fits in with the rest of the document.