💭 😄 🏤 ストリーミングAPI PHPの小さな例 😍 🤽🏼 🍍

夏には、VKontakteから「ストリーミングAPIコンテスト」というテーマでコンテストが開催されました。参加することにしましたが、ストリーミングAPIのすべての機能を実装するための通常のアイデアが見つからなかったため、指定されたルールに従ってエントリを表示することにしました。

ルールの詳細をご覧ください。

ルールはキーワードのセットであり、オブジェクトのテキストにキーワードが存在するということは、オブジェクトがストリームに分類されることを意味します。二重引用符なしで単語が示されている場合、検索は簡略化されます（すべての単語形式は大文字と小文字が区別されません）。正確な出現（大文字と小文字の区別、単語形式など）で検索するには、各単語を二重引用符で囲む必要があります。

詳細はこちら。

最初はすべてをNode.Jsに実装することを考えていましたが、VPSサーバーで設定する時間を無駄にしないために、PHPを使用することにしました。

プロジェクトのロジック全体をクライアントに提供することにしましたが、サーバー上ではVK APIとアナライザーを操作するための小さな設定のみです。

興味深いことから始めましょう-主なもの：

//    var socket = new WebSocket("wss://streaming.vk.com/stream?key=" + window.key); var close_connect = ge("close_connect"); /* *      */ socket.onmessage = function(event) { var incomingMessage = event.data; var loading = document.getElementById("loading_text"); var preview = document.getElementById("preview_text"); var serf = document.getElementById("serf"); loading.classList.add("none"); preview.classList.add("none"); serf.classList.remove("none"); parser(event.data); //     console.log(event.data); }; socket.onclose = function(event) { if (event.wasClean) { console.warn('  '); } else { console.warn(' '); } console.info(': ' + event.code + ' : ' + event.reason); var loading = ge("loading_text"); if (event.code == 1006) { loading.innerHTML = "     ,     .<br/>  -   .   . <br/>   - " + event.code; } else { loading.innerHTML = "-  -   ... <br/>   - " + event.code; } }; socket.onerror = function(error) {}; //close connect close_connect.addEventListener("click", function() { socket.close(); close_connect.innerHTML = "  ."; ge("analiz_block").classList.remove("none"); }, false);

上記のコードから明らかになったように、サイトにはすべてのユーザーに対して1つのセッションがあります。誰かが座ってルールを解析している間、他の人はサイトにアクセスできません。

マイナスがあります

1人がルールを作成してニュースを受信する間、もう1人はこれらのルールを確認して削除できます。コンテストの後、これに遅れて気づいたので、修正しませんでした。

次に、メイン関数パーサー（event.data）を分析します。テンプレートが大好きです。テンプレートは管理が簡単で、操作も簡単です。

たくさんのコード

 var parser = function(json) { var response = JSON.parse(json); console.log(response); var code = response.code; console.log(code); if (code != 100) return; var tpl_block = document.getElementById("tpl"); var tpl = tpl_block.innerHTML; var main_tpl = tpl_block.innerHTML; var content = document.getElementById("main").innerHTML; var main = document.getElementById("main"); var time = response.event['creation_time']; var date = new Date(time); var type; var cnt = ge("cnt"); var cnt_value = +cnt.innerHTML; cnt.innerHTML = cnt_value + 1; var creation_time = timestampToDate(response.event['creation_time'] * 1000); if (response.event['event_type'] == "post") { type = ""; count['post'] = ++count['post']; } else if (response.event['event_type'] == "comment") { type = ""; count['comment'] = ++count['comment']; } else if (response.event['event_type'] == "share") { type = ""; count['share'] = ++count['share']; } var photo_context; if (response.event.attachments) { //image if (response.event.attachments[0].type == "photo") { photo_context = '<div class="body-img"><img alt="image" src="' + response.event.attachments[0].photo['photo_604'] + '" /></div>'; } else { photo_context = ""; } } else { photo_context = ""; } tpl = tpl.split("{event_type}").join(type); tpl = tpl.split("{text}").join(response.event['text']); tpl = tpl.split("{url}").join(response.event['event_url']); tpl = tpl.split("{date}").join(creation_time); tpl = tpl.split("{photo}").join(photo_context); tpl = tpl.split("{type}").join(response.event['event_type']); tpl = tpl.split("{cnt}").join(cnt_value+1); tpl = tpl.split("\"").join("'"); if (filter.top) main.innerHTML = tpl + "" + content; else main.innerHTML = content + "" + tpl; //post_id if (response.event['event_type'] != "comment") { var post_owner_id = response.event.event_id['post_owner_id']; var post_id = response.event.event_id['post_id']; var wall_id = post_owner_id + "_" + post_id; array_post_id.push(wall_id); } //limit if (cnt_value + 1 >= +filter.limit) { socket.close(); close_connect.innerHTML = "  ."; ge("analiz_block").classList.remove("none"); } }

テンプレート自体：

 <section id="tpl" class="none"> <div class="template-container block-md_" data-type="{type}" data-num="{cnt}"> <div class="template-header"> <div class="template-title" id="tpl_title"><b>{event_type}</b></div> </div> <div class="template-body"> <div data-body-text="data-body-text-{cnt}">{text}</div> {photo} </div> <div class="template-footer flex"> <div>  - {date}</div> <div> <a href="javascript: return;" class="none button-footer-post button-spam" onclick="spam.addMSG({cnt})"></a> <a href="{url}" class="button-footer-post" target="_blank"> </a> </div> </div> </div> </section>

上記のコードで発生します：

1.記録に関する情報（コメント、再投稿、公開）を含むJSONを解析します
2. jsonから受け取った情報に基づいたParsテンプレート

3種類の公開用の1つのテンプレート。便利に。

プロジェクトは機能し、録音が表示され、すべてがゴージャスですが退屈です。そのようなプロジェクトをコンテストに引き渡すことは、提出しないことと同じです。そのため、小さな統計を表示できるレコードで小さなフィルターを作成することにしました。私は、このレコードまたはそのレコードの数、全体のカバレッジ、[いいね！]ボタンと再投稿、および視聴者の平均年齢と性別の割合に関する情報を取得しました。

コード分析

 var analiz = { start: function() { // if (count['post'] == 0 && count['comment'] == 0 && count['share'] == 0) { alert("  .  -   ."); return; } var url = "/vk-competition/VKanaliz.php"; var loading = ge("loading_sp"); var button = ge("btn_analiz"); var analiz_stats = ge("analiz_stats"); loading.classList.remove("none"); button.classList.add("none"); ajax.post({ url: url, data: "post_id=" + array_post_id.join(","), callback: function(data) { var resp = JSON.parse(data); if (resp.error) { alert(resp.error); return; } else { var count_likes_all_ = resp.response.count_likes_all; var count_share_all_ = resp.response.count_share_all; var count_views_all_ = resp.response.count_views_all; var analiz_posts = ge("analiz_post"); var analiz_share = ge("analiz_share"); var analiz_comments = ge("analiz_comments"); var analiz_likes = ge("analiz_likes"); var analiz_views = ge("analiz_views"); var analiz_reposts = ge("analiz_reposts"); var analiz_years = ge("analiz_years_"); var analiz_sex = ge("analiz_sex"); var percent_sex_m, percent_sex_w; if (resp.response.percent_sex_w == "-") percent_sex_w = 0; else percent_sex_w = resp.response.percent_sex_w; if (resp.response.percent_sex_w == "-") percent_sex_m = 0; else percent_sex_m = 100 - +percent_sex_w; console.log("spam " + resp.response.spam + "%"); //insert data analiz_posts.innerHTML = count['post']; analiz_share.innerHTML = count['share']; analiz_comments.innerHTML = count['comment']; analiz_likes.innerHTML = count_likes_all_; analiz_views.innerHTML = "≈" + count_views_all_; analiz_reposts.innerHTML = count_share_all_; analiz_sex.innerHTML = percent_sex_w + "%, " + percent_sex_m + "%"; analiz_years.innerHTML = resp.response.middle_years; //show stats loading.classList.add("none"); analiz_stats.classList.remove("none"); } } }); } }

VKanaliz.php -jsonでデータを返すファイル。その内容はここで見ることができます。

結果は何ですか？結果は、出版物、その範囲、フィードバックを分析できる小さなプロジェクトになりました。以前よりも優れています。

→サンプルはこちらからご覧ください
→ GitHubで入手可能なソースコード

すべての人に良い！

ストリーミングAPI PHPの小さな例

More articles: