JSON का उपयोग करके Icecast2 के लिए अब बजने वाले अनुभाग का एक सरल कार्यान्वयन

नमस्कार, हेब्र!
आज मुझे रेडियो के साथ पृष्ठ पर वर्तमान ट्रैक और बुनियादी जानकारी प्रदर्शित करने की समस्या का सामना करना पड़ा।
प्रदर्शित करने के सर्वोत्तम तरीके की खोज में, मैंने खौफनाक PHP स्क्रिप्ट्स को ठोकर दी, जो कि आइसकास्ट स्टेटस पेज को बेवकूफ़ बना देती है। इसके अलावा, इंटरनेट रेडियो के बारे में एक मंच में, मैं एक बहुत ही दिलचस्प सवाल पर आया - "आप मेरी सांस क्यों खींच रहे हैं?"। सच में, क्यों?
और मैंने JSON प्रारूप में स्टेशन के बारे में जानकारी बनाने के लिए, और अपने सभी विचारों के साथ साझा करने के लिए एक ही समय में निर्णय लिया।

तो, हमें इसके लिए क्या चाहिए: सर्वर खुद, आइसकास्ट के लिए XSLT फ़ाइल, डेटा पार्स करने के लिए JS स्क्रिप्ट और एक PHP फ़ाइल (मैं आपको बाद में बताऊंगा)।

एक कदम: आइसकास्ट को अनुकूलित करें

Icecast2 सर्वर आपको स्टेशन जानकारी प्रदर्शित करने के लिए कस्टम XSL फाइल बनाने की अनुमति देता है। वैसे, इस प्रारूप में मूल पृष्ठ भी लिखा गया है।
सबसे पहले, पता करें कि icecast अपनी फ़ाइलों की तलाश में कहां है। यह पथ सेटिंग्स फ़ाइल में पंजीकृत है (डिफ़ॉल्ट रूप से यह / usr / शेयर / icecast2 है)।
हम / usr / share / icecast2 / www निर्देशिका में जाते हैं और वहां info.xsl फ़ाइल बनाते हैं - एक फ़ाइल जो माउंट बिंदुओं के बारे में जानकारी प्रदान करेगी।
परीक्षण और त्रुटि का उपयोग करते हुए, मैंने एक XSLT फ़ाइल संकलित की, जो माउंट पॉइंट्स के बारे में जानकारी के साथ मान्य JSON कोड उत्पन्न करती है, जिसे नामित ऑब्जेक्ट के रूप में दर्शाया गया है:

अद्यतन: Habrahabr पार्सर कोड को थोड़ा गड़बड़ कर दिया। यह तय लग रहा है।

<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" > <xsl:output omit-xml-declaration="yes" method="text" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="no" encoding="UTF-8" /><xsl:strip-space elements="*"/> <xsl:template match = "/icestats" > {<xsl:for-each select="source"> "<xsl:value-of select="@mount" />": { <!--      --> "name" : "<xsl:value-of select="server_name"/>", "listeners" : "<xsl:value-of select="listeners" />", "description" : "<xsl:value-of select="server_description" />", "title" : "<xsl:value-of select="title" />", "genre" : "<xsl:value-of select="genre" />", "url" : "<xsl:value-of select="server_url" />" }<xsl:if test="position() != last()"><xsl:text>,</xsl:text></xsl:if> <!-- ,   ,   -   --> </xsl:for-each> } </xsl:template> </xsl:stylesheet> 

जानकारी प्राप्त करने के लिए, हम सर्वर को इस प्रारूप में बदलते हैं: example.com:8000/info.xsl

जवाब में, हम सभी मौजूदा माउंट बिंदुओं के बारे में संरचित जानकारी प्राप्त करते हैं। मेरे मामले में, यह इस तरह दिखता है:

 { "/ns": { "name" : "Nyan-nyan :3", "listeners" : "3", "description" : "This is sparta~", "title" : "Freaking On Shpongle - Dorset Perception Remix", "genre" : "Kircore", "url" : "http://*********.com" } } 

चरण 2: प्रॉक्सी सेट करना

हमने जानकारी उत्पन्न की, लेकिन परेशानी यह है: जावास्क्रिप्ट का उपयोग करके आप किसी अन्य डोमेन या पोर्ट तक भी नहीं पहुंच सकते। इससे कोई फर्क नहीं पड़ता, हम इस तरह की एक एडाप्टर स्क्रिप्ट बनाते हैं:

 <?php $s = file_get_contents("http://example.com:8000/info.xsl"); echo($s); ?> 

मुझे लगता है कि PHP केवल अनुरोध करने, अनुरोध करने, पार्स करने, नियमित अंतराल पर आवश्यक डेटा बाहर निकालने और फिर बस जानकारी देने के लिए बहुत आसान होगा। इस स्क्रिप्ट को "get.php" पर कॉल करें और इसे एक सुविधाजनक स्थान पर सर्वर पर रखें।

चरण 3: जावास्क्रिप्ट को कॉन्फ़िगर करें

इसलिए, अब हम जानकारी उत्पन्न और प्राप्त कर सकते हैं, मामला छोटा है - इसे उपयोगकर्ता को प्रदर्शित करें।
यहाँ मैं खुद को उस पर टिप्पणी के साथ कोड तक सीमित करूंगा:

 //    ,    DOM.  -  ! function set (id, dat) { var d = document.getElementById(id); d.innerHTML = dat; } function getXmlHttp() //   XMLHttpRequest,      { var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function req () //   { var xmlhttp = getXmlHttp() xmlhttp.open("GET", "get.php", true); //        xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) processResult(xmlhttp.responseText); //    } }; xmlhttp.send(null); } function processResult (res) //    { var csRes = eval("(" + res + ")"); // -,    jQuery,     . ,       ,     . var a = []; //  ,    //       -   (/stream)  ,  ,    (/ns). if (csRes["/stream"] != null) //   ? { a = csRes["/stream"]; //  ,      set("sName", " "); //  ""    } else //      - { a = csRes["/ns"]; set("sName", "Non-Stop ( )"); //  ""   } set("trackholder", a["title"]); //    //      (, - ,    ..) set("sGenre", a["genre"]); set("sListeners", a["listeners"]); set("sDescr", a["description"]); setTimeout("req()", 15000); //    ,  15      //   setInterval  setTimeout,    icecast     . } req(); //   

चरण 4: पृष्ठ सेटअप

सब कुछ उतना ही सरल है। हम पृष्ठ बनाते हैं, ऊपर दिए गए स्क्रिप्ट में उपयोग किए गए नामों के साथ div तत्वों को सेट करते हैं, और इन तत्वों के बाद स्क्रिप्ट का लिंक निर्दिष्ट करते हैं:

 ... <div id="sDescr"> </div> <script type="text/javascript" src="./track.js"></script> 

परिणाम

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


जब आप किसी ट्रैक के साथ एक लाइन पर क्लिक करते हैं, तो आप स्टेशन के बारे में जानकारी खुद देख सकते हैं:


यह सभी जानकारी पृष्ठ को फिर से लोड किए बिना अपडेट की जाती है।