使用 RTCMultiConnection-v3 发送和接收私人聊天请求

Question

我正在使用 RTCMultiConnection-v3。我需要您的帮助来开发私人聊天应用程序的一项功能。 我想要做的是我的应用程序中有很多用户。单个用户可以一次与多个用户聊天。 但我想做下面的场景。

用户 1：向用户 2 发送私人聊天请求
用户 2：将 获取接受/拒绝用户 1 请求的弹出通知。
用户 2：如果接受私人聊天请求，则将开始一个会话 对于私人聊天，可以邀请以后的新用户。

在单个页面中，单个用户可以与多个用户进行私人聊天 我不明白如何发送聊天请求和接收来自其他用户的请求，然后接受另一个用户请求，然后开始聊天会话。

我尝试过使用 RTCMultiConnection 的 Custom+Socket+Event，但它对一个用户有效，对其他用户无效

<article>
    <section class="experiment">
        <div class="make-center">
            <input type="text" id="room-id" value="abcdef">
            <button id="open-room">Open Room</button>
            <button id="join-room">Join Room</button>
            <button id="open-or-join-room">Auto Open Or Join Room</button>

            <br><br>
            <p>
                Use this button to share custom messages (strings, numbers, objects, whatever) among all the users on this page. Remember, all the users MUST be using same URL.
                <br>
                <button id="send-custom-message" disabled>Send Custom Message</button>
                <button onclick="sendCustomMessage(10)">Send Custom Message To 10</button>
                <button onclick="sendCustomMessage(11)">Send Custom Message To 11</button>
                <button onclick="sendCustomMessage(12)">Send Custom Message To 12</button>
            </p>

            <div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
        </div>

        <div id="videos-container"></div>
    </section>

    <script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
    <script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>

    <script>
        document.getElementById('open-room').onclick = function () {
            disableInputButtons();
            connection.open(document.getElementById('room-id').value, function () {
                showRoomURL(connection.sessionid);
            });
        };

        document.getElementById('join-room').onclick = function () {
            disableInputButtons();
            connection.join(document.getElementById('room-id').value);
        };

        document.getElementById('open-or-join-room').onclick = function () {
            disableInputButtons();
            connection.openOrJoin(document.getElementById('room-id').value, function (isRoomExists, roomid) {
                if (!isRoomExists) {
                    showRoomURL(roomid);
                }
            });
        };

        var chatContainer = document.querySelector('.chat-output');

        function appendDIV(event) {
            var div = document.createElement('div');
            div.innerHTML = event.data || event;
            chatContainer.insertBefore(div, chatContainer.firstChild);
            div.tabIndex = 0;
            div.focus();

            document.getElementById('input-text-chat').focus();
        }

        function sendCustomMessage(event_id) {
            var newConnection = new RTCMultiConnection();
            newConnection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
            newConnection.socketMessageEvent = 'custom-socket-event-demo-' + event_id;
            newConnection.session = {
                audio: true,
                video: true
            };

            newConnection.sdpConstraints.mandatory = {
                OfferToReceiveAudio: true,
                OfferToReceiveVideo: true
            };
            newConnection.socketCustomEvent = 'custom-socket-event-demo-' + event_id;
            newConnection.connectSocket(function (socket) {
                // listen custom messages from server
                socket.on(newConnection.socketCustomEvent, function (message) {
                    if (message.customMessage === 1) {
                        var customMessage = prompt('Enter test message.');
                        socket.emit(newConnection.socketCustomEvent, {
                            sender: newConnection.userid,
                            customMessage: customMessage
                        });
                    }
                    if (message.customMessage === "Yes") {
                        alert("Accepted - " + newConnection.connectionDescription.remoteUserId);
                        newConnection.peers[newConnection.connectionDescription.remoteUserId].peer.close();

                    }
                });

                // send custom messages to server
                var customMessage = prompt('Enter test message.');
                socket.emit(newConnection.socketCustomEvent, {
                    sender: newConnection.userid,
                    customMessage: customMessage
                });
            });
        }
        var connection = new RTCMultiConnection();

        connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

        connection.socketMessageEvent = 'custom-socket-event-demo-<?= $_GET["id"] ?>';

        connection.session = {
            audio: true,
            video: true
        };

        connection.sdpConstraints.mandatory = {
            OfferToReceiveAudio: true,
            OfferToReceiveVideo: true
        };

        connection.videosContainer = document.getElementById('videos-container');
        connection.onstream = function (event) {
            connection.videosContainer.appendChild(event.mediaElement);
            event.mediaElement.play();
            setTimeout(function () {
                event.mediaElement.play();
            }, 5000);
        };
        connection.socketCustomEvent = 'custom-socket-event-demo-<?= $_GET["id"] ?>';

        connection.connectSocket(function (socket) {
            // listen custom messages from server
            socket.on(connection.socketCustomEvent, function (message) {
                if (message.customMessage === "1") {
                    var customMessage = prompt('Enter test message.');
                    socket.emit(connection.socketCustomEvent, {
                        sender: connection.userid,
                        customMessage: customMessage
                    });
                }
            });

            // send custom messages to server
            document.getElementById('send-custom-message').disabled = false;
            document.getElementById('send-custom-message').onclick = function () {
                var customMessage = prompt('Enter test message.');
                socket.emit(connection.socketCustomEvent, {
                    sender: connection.userid,
                    customMessage: customMessage
                });
            }
        });

        function disableInputButtons() {
            document.getElementById('open-or-join-room').disabled = true;
            document.getElementById('open-room').disabled = true;
            document.getElementById('join-room').disabled = true;
            document.getElementById('room-id').disabled = true;
        }

        function showRoomURL(roomid) {
            var roomHashURL = '#' + roomid;
            var roomQueryStringURL = '?roomid=' + roomid;

            var html = '<h2>Unique URL for your room:</h2><br>';

            html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
            html += '<br>';
            html += 'QueryString URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';

            var roomURLsDiv = document.getElementById('room-urls');
            roomURLsDiv.innerHTML = html;

            roomURLsDiv.style.display = 'block';
        }

        (function () {
            var params = {},
                    r = /([^&=]+)=?([^&]*)/g;

            function d(s) {
                return decodeURIComponent(s.replace(/\+/g, ' '));
            }
            var match, search = window.location.search;
            while (match = r.exec(search.substring(1)))
                params[d(match[1])] = d(match[2]);
            window.params = params;
        })();

        var roomid = '';
        if (localStorage.getItem(connection.socketMessageEvent)) {
            roomid = localStorage.getItem(connection.socketMessageEvent);
        } else {
            roomid = connection.token();
        }
        document.getElementById('room-id').value = roomid;
        document.getElementById('room-id').onkeyup = function () {
            localStorage.setItem(connection.socketMessageEvent, this.value);
        };

        var hashString = location.hash.replace('#', '');
        if (hashString.length && hashString.indexOf('comment-') == 0) {
            hashString = '';
        }

        var roomid = params.roomid;
        if (!roomid && hashString.length) {
            roomid = hashString;
        }

        if (roomid && roomid.length) {
            document.getElementById('room-id').value = roomid;
            localStorage.setItem(connection.socketMessageEvent, roomid);

            // auto-join-room
            (function reCheckRoomPresence() {
                connection.checkPresence(roomid, function (isRoomExists) {
                    if (isRoomExists) {
                        connection.join(roomid);
                        return;
                    }

                    setTimeout(reCheckRoomPresence, 5000);
                });
            })();

            disableInputButtons();
        }
    </script>
</article>

Answer 1

这是live demo 和its source code。

这是一个sn-p。您需要修改它以适合您自己的应用程序：

connection.socketCustomEvent = 'unique-private-group-or-romm-id'; // don't change this line
connection.connectSocket(function(socket) {
    // listen for custom messaging event
    socket.on(connection.socketCustomEvent, function(event) {
        // check if someone sent you a custom message
        if (event.messageFor === connection.userid) {
            // this custom message is for me

            // check if someone requested for video chat
            if (event.message === 'join-for-video') {
                if (window.confirm(event.fullName + ' want to start video chat with you. Do you accept?') === true) {
                    connection.join(event.userid);
                }
            }

            // check if someone requested for text chat
            if (event.message === 'join-for-textchat') {
                if (window.confirm(event.fullName + ' want to start text chat with you. Do you accept?') === true) {
                    connection.session = {
                        data: true
                    };
                    connection.join(event.userid);
                }
            }
        }
    });
});

// below button click handler makes video call request
// remote user will receive this request
// remote user need to confirm/accept this request
btnMakeVideoChatRequest.onclick = function() {
    var socket = connection.socket;
    var userid = prompt('Enter userid. You will start video chat with this userid.');
    socket.emit(connection.socketCustomEvent, {
        messageFor: userid,
        message: 'join-for-video',
        fullName: 'Hey, My Full Name is XYZ',
        userid: connection.userid
    });
};

// below button click handler makes text chat request
// remote user will receive this request
// remote user need to confirm/accept this request
btnMakeVideoChatRequest.onclick = function() {
    var socket = connection.socket;
    var userid = prompt('Enter userid. You will start text chat with this userid.');
    socket.emit(connection.socketCustomEvent, {
        messageFor: userid,
        message: 'join-for-textchat',
        fullName: 'Hey, My Full Name is XYZ',
        userid: connection.userid
    });
};

// below two lines are important
// for each and every user
connection.session.broadcast = true;
connection.open(connection.userid);