Clever Geek Handbook

ページをリロードせずにVkontakteメッセージカウンターを更新する

私はいくつかの理由で同じソーシャルネットワークを使用していますが、その理由の1つはテキストメッセージを交換する能力です（私の友人の一部は原則としてインスタントメッセンジャーを使用しないため、適応する必要があります）。 以前は、新しいメッセージを見つけるためにページを絶えず更新する必要がありましたが、少し前にVkontakteインスタントメッセンジャーサービスが登場しましたが、すぐに気に入らなかったため、プロセスを自動化することにしました。



このトピックでは、ページをリロードせずにマイメッセージインジケーターを更新するメカニズムの実装について説明します。 詳細を知りたいですか？ 猫へようこそ！



理論



スクリプトはjQueryを使用して実装され、 Greasemonkeyを使用してサイトに接続します。



まず、指の動作原理を説明します。



練習する



ページにスクリプトを埋め込むために、FirefoxユーザーとしてGreasemonkeyプラグインを使用しました。 私の知る限り、Google Chrome用のGreasemonkeyのバージョンがあります。Opera自体は、カスタムスクリプトをすぐに実行できます。 スクリプトをOperaとChromeに適合させることは、短く簡単な問題だと思います。



Greasemonkeyがスクリプトを受け入れるためには、2つの基準を満たす必要があります。





スクリプトのタイトル： 

// ==UserScript== // @name DynamicVK // @namespace vk.com/stryaponoff // @description Makes VK dynamic // @author stryaponoff // @include *vk.com/* // @include *vkontakte.ru/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js // ==/UserScript==




次に、メッセージをチェックする時間間隔（ミリ秒単位）を指定します。 

 var RefreshInterval = 20000;




JavaScriptを初めて知って以来、文字列内の部分文字列の出現回数を見つける必要がありました。 JSで対応する関数が見つからなかったときの驚きを想像してください。 その結果、次のコードが生まれました。 

 function SubStrCount(source, string) { var pos = 0; var count = 0; var offset = -1; var len = 0; while ((offset = source.indexOf(string, offset + 1)) != -1) { if (len > 0 && (offset + string.length) > len) { return false; } else { count++; } } return count; }


動作の原理は次のとおりです。文字列ソースで部分文字列が最初に出現する文字を見つけるだけです。 インクリメントカウンター。 次に、同じことを繰り返します。検索の開始時のみ、文字列sourceの最初の文字ではなく、見つかったエントリの直後の次の文字を取得します。 そして、文字列全体をループするまで続きます。



次に、楽しみが始まります-スクリプトのメイン関数を作成します。 

 function CheckMail() { //       var mail_href = $('#l_msg a').attr('href'); //   AJAX   $.get(mail_href, function(data) { //     var NewMessagesCount = SubStrCount(data, 'read=\\"0\\"'); //       ,  if (NewMessagesCount != 0) { //    "  (N)" $('#l_msg a').html('  (<b>' + NewMessagesCount + '</b>)'); //    ... } else { //   " " $('#l_msg a').html(' '); } }); }


AJAXリクエストへの回答として来るコードには、エスケープされた引用符が含まれています（特に、興味のあるHTML属性read="0"



read=\"0\"



）。 したがって、このテキストを正確に見つけるには、スラッシュと一緒にそれを探す必要があります。実際には、「スクリーニングをエスケープする」ために必要です:) read=\\"0\\"



をread=\\"0\\"



。



そして最後に、適切なタイミングで関数を呼び出す必要があります。 ページを読み込んだ後、ページを1回実行し、呼び出しを繰り返す間隔を設定します（この場合、20秒を思い出してください）。 

 $(document).ready(function() { CheckMail(); setInterval(function() { CheckMail() }, RefreshInterval); });


あまりにも頻繁に、問題の道徳的な側面を気にしなくても、ページを更新しないでください（頻繁に更新すると、サーバーに追加の負荷がかかります-ミニDoS攻撃の一種です）。 リクエストが頻繁すぎるという一定の制限を超えた場合、リクエストは単に一時的にブロックされます。



完全なスクリプトコード 


 // ==UserScript== // @name DynamicVK // @namespace vk.com/stryaponoff // @description Makes VK dynamic // @author stryaponoff // @include *vk.com/* // @include *vkontakte.ru/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js // ==/UserScript== var RefreshInterval = 20000; function SubStrCount(source, string) { var pos = 0; var count = 0; var offset = 0; var len = 0; while ((offset = source.indexOf(string, offset + 1)) != -1) { if (len > 0 && (offset + string.length) > len) { return false; } else { count++; } } return count; } function CheckMail() { var mail_href = $('#l_msg a').attr('href'); $.get(mail_href, function(data) { var NewMessagesCount = SubStrCount(data, 'read=\\"0\\"'); if (NewMessagesCount != 0) { $('#l_msg a').html('  (<b>' + NewMessagesCount + '</b>)'); } else { $('#l_msg a').html(' '); } }); } $(document).ready(function() { CheckMail(); setInterval(function() { CheckMail() }, RefreshInterval); });


jQueryを使用しないスクリプトオプション
（推奨されるオプション、多くのバグが修正されているため） 

 // ==UserScript== // @name DynamicVK // @namespace vk.com/stryaponoff // @description Makes VK dynamic // @author stryaponoff // @include *vk.com/* // @include *vkontakte.ru/* // ==/UserScript== var RefreshInterval = 20000; function CheckMail() { //   AJAX- var XmlHttp = new XMLHttpRequest(); //    var MsgCount = 0; //        XmlHttp.onreadystatechange = function() { //    ... if (XmlHttp.readyState == 4) { //    ,  ... if (XmlHttp.status == 200) { //     var RegEx = /messages{count=(.*?)}/; MsgCount = RegEx.exec(XmlHttp.responseText)[1]; //      //         //          var sidebar; if (document.getElementById('side_bar') == null) { sidebar = document.getElementById('sideBar'); } else { sidebar = document.getElementById('side_bar'); } for (i = 0; i < sidebar.getElementsByTagName('a').length; i++) { if (sidebar.getElementsByTagName('a')[i].href.indexOf('mail.php') != -1) { //  -    ,  ... if (MsgCount != 0) { //    "  (MsgCount)" sidebar.getElementsByTagName('a')[i].innerHTML = '  <span>(<b>' + MsgCount + '</b>)</span>'; } else { //    " " sidebar.getElementsByTagName('a')[i].innerHTML = ' '; } return; } } } } } //    XmlHttp.open('GET', '/feed.php', true); XmlHttp.send(''); } CheckMail(); setInterval(function() { CheckMail() }, RefreshInterval);


使用する



ブラウザでスクリプトを使用するには、スクリプトファイル（ dynamicvk.user.js ）をブラウザウィンドウにドラッグアンドドロップするだけで、次のウィンドウが表示されます。



あなたに必要なのは、 「インストール」をクリックすることだけです。 使用を開始できます:)



おわりに



このトピックが私以外の誰にも役立つことを願っています。 原則として、壁や友人や他のページへの招待を更新できるのと同じ方法で、アクションの原則を説明しました。 以下の出版物の間違いを繰り返さないために、この投稿について建設的な批判とコメントを聞いてうれしいです。 また、私のカルマを高め、この投稿の公開を可能にしたすべての人に感謝します。 よろしくお願いします！



誰かが質問や問題がある場合-書き込み、私たちはそれを把握しようとします。 ご清聴ありがとうございました！



More articles:


All Articles