0

我正在使用 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>
4

1 回答 1

0

这是一个现场演示及其源代码。

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

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);
于 2017-10-10T18:25:00.260 回答