Heim  >  Artikel  >  Backend-Entwicklung  >  So verwenden Sie die WebSockets-API in PHP für Live-Video- und Audio-Chat

So verwenden Sie die WebSockets-API in PHP für Live-Video- und Audio-Chat

王林
王林Original
2023-06-17 14:37:411487Durchsuche

Die WebSockets-API ist ein wichtiger Bestandteil bei der Realisierung von Echtzeit-Video- und Audio-Chat. Sie bietet eine Kommunikationsmethode, die auf einem ereignisgesteuerten Mechanismus basiert und eine bidirektionale Kommunikation ermöglichen kann, wodurch die Kommunikation zwischen Browser und Server einfacher, schneller und sicherer wird . In diesem Artikel wird erläutert, wie Sie die WebSockets-API in PHP für Echtzeit-Video- und Audio-Chat verwenden.

  1. WebSocket-Server installieren

Um die WebSockets-API in PHP zu verwenden, müssen Sie zunächst den WebSocket-Server installieren. Es wird empfohlen, Rachet zu verwenden, den beliebtesten WebSocket-Server in PHP. Es kann mit Composer installiert werden:

composer require cboden/ratchet
  1. Erstellen Sie einen WebSocket-Server

Das Erstellen eines WebSocket-Servers mit Rachet ist sehr einfach und erfordert nur ein paar Codezeilen:

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();

Dieser Server akzeptiert alle Verbindungen und sendet Nachrichten, sobald sie eingehen . Es verwendet Grad-Stream-Objekte, um alle Verbindungen zu speichern.

  1. Frontend-Anwendungen erstellen

Mit der WebSockets-API können Frontend-Anwendungen plattform- und browserübergreifend erstellt werden. So erstellen Sie eine Front-End-Anwendung mit 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>

Mit Socket.io zum Herstellen einer Verbindung empfängt und sendet die Anwendung Nachrichten.

  1. Video- und Audio-Chat implementieren

Über die Ratchet- und WebSockets-API kann ein bidirektionaler Video- und Audio-Chat in Echtzeit erreicht werden, was die Verwendung einiger zusätzlicher Bibliotheken und Tools erfordert. Es wird empfohlen, WebRTC zu verwenden, einen modernen Standard für Echtzeitkommunikation, der eine Peer-to-Peer-Kommunikation zwischen Browsern ermöglicht.

Mit dem WebSocket-Server und WebRTC DSP in PHP können Sie eine bidirektionale Echtzeit-Video- und Audio-Chat-Anwendung erstellen. Dies erfordert etwas zusätzlichen JavaScript-Code und kann mit SimpleWebRTC implementiert werden:

<!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>

SimpleWebRTC wird hier verwendet, um Video- und Audio-Chat zu implementieren. Der Code enthält Client- und Servercode. Wenn ein Benutzer die Seite besucht, versucht der Client, eine Verbindung zum WebSocket-Server herzustellen und dem Raum beizutreten. Der Server übermittelt WebSocket-Ereignisse an SimpleWebRTC.

Zusammenfassung

Mithilfe der Rachet- und WebSockets-API kann ein bidirektionaler Echtzeit-Video- und Audio-Chat erreicht werden. Mit SimpleWebRTC können Anwendungen problemlos erweitert werden, um Echtzeit-Audio- und Video-Chat zu unterstützen. WebRTC ist eine leistungsstarke Technologie, die in einer Vielzahl von Anwendungen eingesetzt werden kann, darunter Online-Bildungssysteme, Kollaborationsanwendungen und Online-Spiele. Mithilfe der WebSockets-API und WebRTC in PHP können Sie leistungsstarke Echtzeitanwendungen erstellen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die WebSockets-API in PHP für Live-Video- und Audio-Chat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn