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