PHP वेब सॉकेट्स का उपयोग करके एक लाइव अकाउंट विजेट बनाना

वेब सॉकेट के कार्यान्वयन से वेब एप्लिकेशन लंबे समय के मतदान जैसे हैक्स का सहारा लिए बिना वास्तविक समय में डेटा को संसाधित करने की अनुमति देता है।
एक आवेदन का एक उदाहरण एक खेल मैच के परिणामों का प्रदर्शन है। अब भी, कई साइटें जो इस डेटा को दिखाती हैं, फ्लैश एप्लिकेशन का उपयोग करती हैं, जैसा कि एक्शन स्क्रिप्ट आपको सॉकेट कनेक्शन के माध्यम से सर्वर के साथ संवाद करने की अनुमति देता है। हालाँकि, लहर सॉकेट आपको केवल HTML और जावास्क्रिप्ट का उपयोग करने की अनुमति देते हैं। यह, हम इस गाइड में php सर्वर का उपयोग करने की कोशिश करेंगे।

स्थापना और सेटअप

हम शाफ़्ट लाइब्रेरी का उपयोग करेंगे, जो PHP को वेब सॉकेट का उपयोग करने की अनुमति देता है।
निम्नलिखित कंपोज़र बनाएँ। जो इस कोड के लिए निर्भरता और ऑटोलॉड दोनों को स्थापित करता है जिसे हम आगे लिखेंगे:

{ "require": { "cboden/Ratchet": "0.2.*" }, "autoload": { "psr-0": { "LiveScores": "src" } } } 

अब निम्नलिखित निर्देशिका संरचना बनाएँ:

 [root] bin src LiveScores public assets css vendor js vendor vendor 

आप रिपॉजिटरी से सब कुछ लेना चाह सकते हैं, जिसमें कई आवश्यक सीएसएस, जेएस और छवियां शामिल हैं, साथ ही साथ इस गाइड के सभी कोड भी हैं। यदि आप स्क्रैच से सब कुछ लिखना चाहते हैं, तो मैनुअल के समानांतर, तो केवल सार्वजनिक / संपत्ति / * / विक्रेता की प्रतिलिपि बनाएँ।
स्वाभाविक रूप से, php कंपोज़र को अपडेट करना न भूलें। अपडेट अपडेट करें । यदि आपके पास कंपोज़र स्थापित नहीं है, तो इसे curl -sS getcomposer.org/installer चलाकर इंस्टॉल करें php ।
हम एक वर्ग बनाकर शुरू करेंगे जो कनेक्शन स्वीकार करेगा और संदेश भेजेगा। बाद में, हम इसका उपयोग चल रहे गेम के डेटा को अपडेट करने के लिए करेंगे। यह संदेश दलाल कैसे काम करता है यह दिखाने के लिए वर्ग का आधार है:

 // src/LiveScores/Scores.php <?php namespace LiveScores; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; class Scores implements MessageComponentInterface { private $clients; public function __construct() { $this->clients = new \SplObjectStorage; } public function onOpen(ConnectionInterface $conn) { $this->clients->attach($conn); } public function onMessage(ConnectionInterface $from, $msg) { foreach ($this->clients as $client) { if ($from !== $client) { // The sender is not the receiver, send to each client connected $client->send($msg); } } } public function onClose(ConnectionInterface $conn) { $this->clients->detach($conn); } public function onError(ConnectionInterface $conn, \Exception $e) { $conn->close(); } } 

यह नोट करना महत्वपूर्ण है:

• संदेश ब्रोकर के रूप में कार्य करने के लिए वर्ग को MessageComponentInterface को लागू करना चाहिए
• हम एक संग्रह के रूप में सभी जुड़े हुए ग्राहकों की एक सूची रखते हैं।
• जब एक क्लाइंट जोड़ा जाता है, तो ऑनऑन ईवेंट को निकाल दिया जाता है और क्लाइंट को संग्रह में जोड़ा जाता है
• OnClose विधि विपरीत करती है
• इंटरफ़ेस में हमें एक त्रुटि हैंडलर बनाने की भी आवश्यकता होती है।

अगला कदम एक ऐसा डेमॉन बनाना है जो हमारी कक्षा को तुरंत प्रेरित करेगा, आने वाले कनेक्शनों के लिए सुनो। एक फ़ाइल बनाएँ:

 // bin/server.php <?php use Ratchet\Server\IoServer; use Ratchet\WebSocket\WsServer; use LiveScores\Scores; require dirname(__DIR__) . '/vendor/autoload.php'; $server = IoServer::factory( new WsServer( new Scores() ) , 8080 ); $server->run(); 

यह सब स्पष्टीकरण की जरूरत है। WsServer - अधिक सामान्य वर्ग IoServer का कार्यान्वयन है, जो एक वेब सॉकेट के माध्यम से डेटा प्रसारित करता है। हम 8080 को पोर्ट करेंगे। आप किसी भी पोर्ट को चुन सकते हैं, मुख्य बात यह जांचना है कि यह ब्रांडमॉयर द्वारा अवरुद्ध नहीं है।

राज्य बनाए रखना

हम खेल की वर्तमान स्थिति को ट्रैक करेंगे, डेटा को बचाने की कोई आवश्यकता नहीं है। हर बार गेम में खाते में बदलाव होंगे, हम सर्वर पर डेटा को अपडेट करेंगे और सभी कनेक्टेड क्लाइंट्स को भेजेंगे।
सबसे पहले, हमें जुड़नार उत्पन्न करने की आवश्यकता है (उदाहरण के लिए, खेलों की सूची)। सादगी के लिए, हम इसे बेतरतीब ढंग से करेंगे, और डेमॉन की अवधि के लिए निर्धारित स्थिरता को छोड़ देंगे:

 // src/LiveScores/Fixtures.php <?php namespace LiveScores; class Fixtures { public static function random() { $teams = array("Arsenal", "Aston Villa", "Cardiff", "Chelsea", "Crystal Palace", "Everton", "Fulham", "Hull", "Liverpool", "Man City", "Man Utd", "Newcastle", "Norwich", "Southampton", "Stoke", "Sunderland", "Swansea", "Tottenham", "West Brom", "West Ham"); shuffle($teams); for ($i = 0; $i <= count($teams); $i++) { $id = uniqid(); $games[$id] = array( 'id' => $id, 'home' => array( 'team' => array_pop($teams), 'score' => 0, ), 'away' => array( 'team' => array_pop($teams), 'score' => 0, ), ); } return $games; } } 

कृपया ध्यान दें कि हम प्रत्येक गेम के लिए एक अद्वितीय आईडी प्रदान करते हैं, जिसका उपयोग हम इस बात का संकेत देने के लिए करेंगे कि किस खेल में घटना हुई है। वापस हमारे स्कोर वर्ग के लिए:

 // src/LiveScores/Scores.php public function __construct() { // Create a collection of clients $this->clients = new \SplObjectStorage; $this->games = Fixtures::random(); } 

चूंकि ग्राहक खेल के दौरान किसी भी समय हमारे विजेट को कनेक्ट कर सकता है, हमारे लिए यह महत्वपूर्ण है कि वह एक वास्तविक खाता प्राप्त करे। ऐसा करने का एक तरीका खेल की वर्तमान स्थिति को भेजकर एक नए अनुरोध का जवाब देना है, फिर क्लाइंट पर गेम और उनके स्कोर की एक सूची प्रदर्शित करें।
यहाँ onOpen विधि का एक कार्यान्वयन है जो यह करता है:

 // src/LiveScores/Scores.php public function onOpen(ConnectionInterface $conn) { // Store the new connection to send messages to later $this->clients->attach($conn); // New connection, send it the current set of matches $conn->send(json_encode(array('type' => 'init', 'games' => $this->games))); echo "New connection! ({$conn->resourceId})\n"; } 

मैं ध्यान देता हूं कि हम संदेश को JSON ऑब्जेक्ट के रूप में भेजते हैं, जहां घटना का प्रकार एक संपत्ति है। JSON का उपयोग करना आवश्यक नहीं है, आप किसी अन्य प्रारूप का उपयोग कर सकते हैं, लेकिन ताकि हम संरचित डेटा भेज सकें।

एचटीएमएल

चूंकि हम एक वेब सॉकेट के माध्यम से डेटा भेजते हैं, और हम उन्हें जावास्क्रिप्ट का उपयोग करके प्रदर्शित करेंगे, पृष्ठ का एचटीएमएल-कोड बहुत सरल है:

 <div id="scoreboard"> <table> </table> </div> 

परिणामों के साथ तालिका में पंक्ति इस तरह दिखाई देगी:

 <tr data-game-id="SOME-IDENTIFIER"> <td class="team home"> <h3>HOME TEAM NAME</h3> </td> <td class="score home"> <div id="counter-0-home"></div> </td> <td class="divider"> <p>:</p> </td> <td class="score away"> <div id="counter-0-away"></div> </td> <td class="team away"> <h3>AWAY TEAM NAME</h3> </td> </tr> 

तत्वों की आईडी काउंटर- * - * हम जेएस प्लगइन में बाद में उपयोग करेंगे।

जावास्क्रिप्ट

चलो जावास्क्रिप्ट के लिए नीचे उतरो। पहली चीज सॉकेट खोलना है:

 var conn = new WebSocket('ws://localhost:8080'); 

आपको निर्दिष्ट सर्वर / डेमन सेटिंग्स के आधार पर होस्ट एड्रेस या पोर्ट को बदलने की आवश्यकता हो सकती है।
अगला, आपको एक ईवेंट हैंडलर की आवश्यकता है जो एक संदेश प्राप्त होने पर निष्पादित करेगा:

 conn.onmessage = function(e) { 

संदेश ईवेंट ऑब्जेक्ट ई के डेटा गुण में है। चूँकि हम JSON में संदेश भेज रहे हैं, हमें पहले इसे पार्स करना चाहिए:

 var message = $.parseJSON(e.data); 

अब हम संदेश प्रकार की जांच कर सकते हैं और संबंधित फ़ंक्शन को कॉल कर सकते हैं:

 switch (message.type) { case 'init': setupScoreboard(message); break; case 'goal': goal(message); break; } 

SetupScoreboard फ़ंक्शन बहुत सरल है:

 function setupScoreboard(message) { // Create a global reference to the list of games games = message.games; var template = '<tr data-game-id="{{ game.id }}"><td class="team home"><h3>{{game.home.team}}</h3></td><td class="score home"><div id="counter-{{game.id}}-home" class="flip-counter"></div></td><td class="divider"><p>:</p></td><td class="score away"><div id="counter-{{game.id}}-away" class="flip-counter"></div></td><td class="team away"><h3>{{game.away.team}}</h3></td></tr>'; $.each(games, function(id){ var game = games[id]; $('#scoreboard table').append(Mustache.render(template, {game:game} )); game.counter_home = new flipCounter("counter-"+id+"-home", {value: game.home.score, auto: false}); game.counter_away = new flipCounter("counter-"+id+"-away", {value: game.away.score, auto: false}); }); } 

इस फ़ंक्शन में, हम बस गेम की एक सरणी के माध्यम से "रन" करते हैं, मूंछों का उपयोग करके अंक तालिका में एक नई लाइन प्रदान करते हैं और प्रत्येक गेम के लिए एनिमेटेड काउंटर की एक जोड़ी को लागू करते हैं। गेम सरणी गेम की वर्तमान स्थिति और काउंटरों के लिंक को संग्रहीत करेगी, ताकि हम उन्हें आवश्यक रूप से अपडेट कर सकें।
इसके बाद लक्ष्य फ़ंक्शन आता है। हम एक वेब सॉकेट के माध्यम से एक संदेश प्राप्त करते हैं, जो हमें एक राज्य परिवर्तन के बारे में संकेत देता है, इसकी संरचना निम्नलिखित है:

 { type: 'goal', game: 'UNIQUE-ID', team: 'home' } 

खेल संपत्ति एक अद्वितीय आईडी है, टीम या तो "घर" या "दूर" है। इस डेटा का उपयोग करके, हम गेम ऐरे में स्कोर को अपडेट कर सकते हैं, हमें जिस काउंटर ऑब्जेक्ट की आवश्यकता है उसे ढूंढ सकते हैं और इसे बढ़ा सकते हैं।

 function goal(message) { games[message.game][message.team]['score']++; var counter = games[message.game]['counter_'+message.team]; counter.incrementTo(games[message.game][message.team]['score']); } 

अब, हमारे लिए जो कुछ भी है वह कमांड लाइन से सर्वर को शुरू करना है:

 php bin/server.php 

निष्कर्ष

इस लेख में, मैंने दिखाया कि JS, HTML और वेब सॉकेट्स का उपयोग करके लाइव अकाउंट विजेट बनाना कितना आसान है। बेशक, यह आमतौर पर केवल एक खाते की तुलना में बहुत अधिक जानकारी देखने की इच्छा है, लेकिन चूंकि हम JSON का उपयोग करते हैं, इसलिए हम आसानी से अन्य डेटा जोड़ सकते हैं।
डेमो ।