WebRTC Cookbook

In this recipe, we will cover the process of implementing private, peer-to-peer web chat using signaling server as the middle point. Peers will send chat messages via the signaling server. In the schema represented in the following diagram, you can see the flow:

How to do it…

To implement the chat feature via the signaling server, we need to add some methods to the client code with the following steps:

We need to add appropriate code to the function that processes the messages from the signaling server:

function processSignalingMessage(message) {
        var msg = JSON.parse(message);
        if (msg.type === 'CHATMSG') {
            onChatMsgReceived(msg.value);
        } else if (msg.type === 'offer') {
            pc.setRemoteDescription(new RTCSessionDescription(msg));
            doAnswer();
        } else if (msg.type === 'answer') {
            pc.setRemoteDescription(new RTCSessionDescription(msg));
        } else if (msg.type === 'candidate') {
            var candidate = new RTCIceCandidate({sdpMLineIndex:msg.label, candidate:msg.candidate});
            pc.addIceCandidate(candidate);
        } else if (msg.type === 'GETROOM') {
            room = msg.value;
            onRoomReceived(room);
        } else if (msg.type === 'WRONGROOM') {
            window.location.href = "/";
        }
};

We will check whether the received message is of the CHATMSG type and if so, we will call the onChatMsgReceived method to process it:
```
function onChatMsgReceived(txt) {
    var chatArea = document.getElementById("chat_div");
    chatArea.innerHTML = chatArea.innerHTML + txt;
    chatArea.scrollTop = chatArea.scrollHeight;
};
```
Here, we will get the chat_div element by its ID and alter its content by adding the chat message received from the remote peer via the signaling server.
To send a chat message, we should implement a method like the following:
```
function chatSendMessage(msg) {
        if (!channelReady) return;
        sendMessage({"type" : "CHATMSG", "value" : msg});
};
```
This function checks whether the WebSocket channel is up and sends a chat message to the signaling server using the channel. To use this function, we can use the HTML input tag with the submit button and call it on the submit event.

How it works…

The basic principle of this solution is pretty simple:

One peer sends a text message to the signaling server, marking it as the CHATMSG type
The signaling server retransmits the message to another peer
Another peer gets the message from the signaling server, checks whether it is of the CHATMSG type and if so, shows it to the user

Tip

To distinguish chat messages from WebRTC messages, you can use any word to mark the message type. It can be CHATMSG or whatever you prefer.

There's more…

This way of implementing web chat is usually not secure because the data will go via the signaling server and not directly through the peers. Nevertheless, it is suitable for public chat rooms where there can be several people at a time. For private peer-to-peer chats, it is usually better to use WebRTC data channels, and that way it is more secure.

WebRTC Cookbook

By : Andrii Sergiienko

WebRTC Cookbook

By: Andrii Sergiienko

Overview of this book

Related Content you might be interested in

Current Title:

WebRTC Cookbook

Implementing a chat using a signaling server

How to do it…

How it works…

Tip

There's more…

See also