Comment utiliser l'API WebSockets en PHP pour le chat vidéo et audio en direct-tutoriel php-php.cn

Comment utiliser l'API WebSockets en PHP pour le chat vidéo et audio en direct

王林

Libérer： 2023-06-17 14:38:01

original

1604 Les gens l'ont consulté

WebSockets L'API est un élément important de la réalisation de discussions vidéo et audio en temps réel. Elle fournit une méthode de communication basée sur un mécanisme piloté par les événements, qui peut réaliser une communication bidirectionnelle, rendant la communication entre le navigateur et le serveur plus simple et plus rapide. et la sécurité. Cet article explique comment utiliser l'API WebSockets en PHP pour le chat vidéo et audio en temps réel.

Installer le serveur WebSocket

Pour utiliser l'API WebSockets en PHP, vous devez d'abord installer le serveur WebSocket. Il est recommandé d'utiliser Rachet, qui est le serveur WebSocket le plus populaire en PHP. Il peut être installé à l'aide de Composer :

composer require cboden/ratchet

Copier après la connexion

Create WebSocket Server

Créer un serveur WebSocket à l'aide de Rachet est très simple et ne nécessite que quelques lignes de code : # 🎜🎜#

require dirname(__DIR__) . '/vendor/autoload.php';

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;

class Chat implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})
";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        broadcast($msg);
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo "Connection {$conn->resourceId} has disconnected
";
    }

    public function onError(ConnectionInterface $conn, Exception $e) {
        echo "An error has occurred: {$e->getMessage()}
";
        $conn->close();
    }

    public function broadcast($msg) {
        foreach ($this->clients as $client) {
            $client->send($msg);
        }
    }
}

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);

echo "Server started!
";

$server->run();

Copier après la connexion

Ce serveur accepte toutes les connexions et diffuse les messages au fur et à mesure de leur arrivée. Il utilise des objets de flux Grad pour stocker toutes les connexions.

Grâce à l'API WebSockets, la création d'applications frontales peut être effectuée sur plusieurs plates-formes et sur plusieurs navigateurs. Voici comment créer une application front-end à l'aide de JavaScript :

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Chat</title>
    <meta name="description" content="Chat">
    <meta name="author" content="Chat">

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>

    <style>
        #log {
            height: 200px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id="log"></div>
    <input type="text" id="message">
    <button id="send">Send</button>
    <script>
        var socket = io('http://localhost:8080');

        socket.on('message', function (data) {
            $('#log').append('<p>' + data + '</p>');
        });

        $('#send').click(function() {
            var message = $('#message').val();
            socket.emit('message', message);
        });
    </script>
</body>
</html>

Copier après la connexion

En utilisant Socket.io pour se connecter, l'application reçoit et envoie des messages.

Grâce aux API Ratchet et WebSockets, un chat vidéo et audio bidirectionnel en temps réel peut être réalisé, ce qui nécessite l’utilisation de certaines bibliothèques et outils supplémentaires. Il est recommandé d'utiliser WebRTC, qui est une norme moderne de communication en temps réel qui permet une communication peer-to-peer entre les navigateurs.

En utilisant un serveur WebSocket et WebRTC DSP en PHP, vous pouvez créer une application de chat vidéo et audio bidirectionnel en temps réel. Cela nécessite du code JavaScript supplémentaire et peut être implémenté à l'aide de SimpleWebRTC :

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Chat</title>
    <meta name="description" content="Chat">
    <meta name="author" content="Chat">

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
    <script src="//simplewebrtc.com/latest-v3.js"></script>

    <style>
        #log {
            height: 200px;
            overflow: auto;
        }

        #localVideo {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
        }

        #remoteVideos video {
            width: 400px;
            height: 300px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="log"></div>
    <div id="localVideo"></div>
    <div id="remoteVideos"></div>
    <script>
        var server = {
            url: 'http://localhost:8080',
            options: {},
            // Use media servers for production
            signalingServerUrl: 'https://localhost:8888'
        };

        var webrtc = new SimpleWebRTC({
            localVideoEl: 'localVideo',
            remoteVideosEl: 'remoteVideos',
            autoRequestMedia: true,
            url: server.url,
            socketio: {'force new connection': true},
            debug: false,
            detectSpeakingEvents: true,
            autoAdjustMic: false,
            peerConnectionConfig: {
                iceServers: [
                    {url: 'stun:stun.l.google.com:19302'},
                    {url:'stun:stun1.l.google.com:19302'},
                    {url:'stun:stun2.l.google.com:19302'}
                ]
            },
            receiveMedia: {
                mandatory: {
                    OfferToReceiveAudio: true,
                    OfferToReceiveVideo: true
                }
            }
        });

        webrtc.on('readyToCall', function () {
            console.log('readyToCall');
            webrtc.joinRoom('chat');
        });

        webrtc.on('localStream', function (stream) {
            console.log('localStream');
            $('#localVideo').show();
        });

        webrtc.on('videoAdded', function (video, peer) {
            console.log('videoAdded');
            $('#remoteVideos').append('<video id="' + peer.id + '" autoplay></video>');
            webrtc.attachMediaStream($('#' + peer.id), video);
        });

        webrtc.on('videoRemoved', function (video, peer) {
            console.log('videoRemoved');
            $('#' + peer.id).remove();
        });

        webrtc.on('channelMessage', function (peer, label, message) {
            console.log('channelMessage');
            console.log('peer: ' + peer);
            console.log('label: ' + label);
            console.log('message: ' + message);
        });
    </script>
</body>
</html>

Copier après la connexion

SimpleWebRTC est utilisé ici pour implémenter le chat vidéo et audio. Le code contient le code client et serveur, lorsqu'un utilisateur visite la page, le client tente de se connecter au serveur WebSocket et de rejoindre la salle. Le serveur transmet les événements WebSocket à SimpleWebRTC.

Summary

Grâce aux API Rachet et WebSockets, un chat vidéo et audio bidirectionnel en temps réel peut être réalisé. Les applications peuvent être facilement étendues pour prendre en charge le chat audio et vidéo en temps réel à l'aide de SimpleWebRTC. WebRTC est une technologie puissante qui peut être utilisée dans diverses applications, notamment les systèmes éducatifs en ligne, les applications de collaboration et les jeux en ligne. En utilisant l'API WebSockets et WebRTC en PHP, vous pouvez créer de puissantes applications en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!