কীভাবে ফেসবুক, জিমেইল রিয়েল টাইম নোটিফিকেশন পাঠায়?


269

আমি এই বিষয় সম্পর্কে কিছু পোস্ট পড়েছি এবং উত্তরগুলি ধূমকেতু, বিপরীত এজাক্স, HTTP স্ট্রিমিং, সার্ভার পুশ ইত্যাদি etc.

Gmail এ আগত মেল বিজ্ঞপ্তি কীভাবে কাজ করে?

জিএমএল চ্যাট ক্লায়েন্টের মিথস্ক্রিয়া ছাড়াই কীভাবে এজেএক্স অনুরোধ করতে সক্ষম?

আমি জানতে চাই যে কোনও সাধারণ রেফারেন্স রয়েছে যা আমি খুব সাধারণ উদাহরণটি লিখতে অনুসরণ করতে পারি। অনেক পোস্ট বা ওয়েবসাইট কেবল প্রযুক্তি সম্পর্কে কথা বলে। একটি সম্পূর্ণ নমুনা কোড পাওয়া কঠিন। এছাড়াও, মনে হচ্ছে ধূমকেতুটি বাস্তবায়নের জন্য অনেকগুলি পদ্ধতি ব্যবহার করা যেতে পারে, যেমন হিডেন আইফ্রেম, এক্সএমএলএইচটিপিআরকোয়েস্ট। আমার মতে XMLHttpRequest ব্যবহার করা আরও ভাল পছন্দ। আপনি বিভিন্ন পদ্ধতির উপকারিতা এবং কনস সম্পর্কে কী ভাবেন? জিমেইল কোনটি ব্যবহার করে?

আমি জানি এটি সার্ভার সাইড এবং ক্লায়েন্ট পক্ষ উভয় ক্ষেত্রেই করা দরকার। কোনও পিএইচপি এবং জাভাস্ক্রিপ্ট নমুনা কোড আছে?

উত্তর:


428

ফেসবুক যেভাবে এটি করে তা বেশ আকর্ষণীয়।

এই জাতীয় বিজ্ঞপ্তিগুলি করার একটি সাধারণ পদ্ধতি হ'ল সার্ভারের কোনও স্ক্রিপ্ট (এজেএক্স ব্যবহার করে) একটি নির্দিষ্ট ব্যবধানে (সম্ভবত প্রতি কয়েক সেকেন্ডে) পোল করা, কিছু হয়েছে কিনা তা পরীক্ষা করা to যাইহোক, এটি চমত্কার নেটওয়ার্ক নিবিড় হতে পারে এবং আপনি প্রায়শই অর্থহীন অনুরোধ করেন, কারণ কিছুই ঘটেনি।

ফেসবুক যেভাবে এটি করে তা ধূমকেতু পদ্ধতির ব্যবহার করে একটি বিরতিতে ভোট দেওয়ার পরিবর্তে, একটি পোল সমাপ্ত হওয়ার সাথে সাথে এটি অন্য একটি বিষয় জারি করে। তবে, সার্ভারের স্ক্রিপ্টে প্রতিটি অনুরোধের একটি দীর্ঘ দীর্ঘ সময়সীমা রয়েছে এবং কোনও কিছু ঘটলে সার্ভার কেবলমাত্র অনুরোধটির প্রতিক্রিয়া জানায়। আপনি যদি ফেসবুকে থাকাকালীন ফায়ারব্যাগের কনসোল ট্যাবটি উপস্থিত করেন, সম্ভবত কোনও স্ক্রিপ্টে কয়েক মিনিট সময় নেওয়ার অনুরোধ সহ এটি ঘটতে দেখতে পারেন। এটি সত্যিই বেশ জ্ঞানসম্মত, যেহেতু এই পদ্ধতিটি অনুরোধের সংখ্যার উভয়ই তত্ক্ষণাত্ হ্রাস করে দেয় এবং আপনাকে কতবার তা প্রেরণ করতে হয়। আপনার কাছে এখন কার্যকরভাবে একটি ইভেন্ট ফ্রেমওয়ার্ক রয়েছে যা সার্ভারকে 'ফায়ার' ইভেন্টগুলিতে অনুমতি দেয়।

এর পিছনে, সেই পোলগুলি থেকে ফিরে আসা প্রকৃত সামগ্রীর পরিপ্রেক্ষিতে এটি একটি JSON প্রতিক্রিয়া, যা ইভেন্টগুলির একটি তালিকা এবং তাদের সম্পর্কে তথ্য বলে মনে হয় with যদিও এটি মাইনিডেড, তাই পড়া কিছুটা কঠিন।

প্রকৃত প্রযুক্তির ক্ষেত্রে, এজেএক্স হ'ল এখানে যাওয়ার উপায়, কারণ আপনি অনুরোধের সময়সীমা এবং অন্যান্য অনেকগুলি বিষয়গুলি নিয়ন্ত্রণ করতে পারেন। আমি এজেএক্স করতে jQuery ব্যবহার করে (এখানে ওভারফ্লো ক্লিচকে স্ট্যাক করুন) সুপারিশ করব, এটি ক্রস-কমপ্লেবিলিটি সমস্যাগুলি অনেক দূরে নেবে। পিএইচপি-র শর্তাবলী, আপনি কেবল আপনার পিএইচপি স্ক্রিপ্টে কোনও ইভেন্ট লগ ডাটাবেস টেবিলটি পোল করতে পারেন এবং যখন কিছু ঘটে তখন কেবল ক্লায়েন্টের কাছে ফিরে যেতে পারেন? আমি এটি বাস্তবায়নের অনেকগুলি উপায় আশা করি of

রূপায়ন:

সার্ভার সাইড:

পিএইচপি-তে ধূমকেতু গ্রন্থাগারগুলির কয়েকটি প্রয়োগ রয়েছে বলে মনে হয়, তবে সত্যি বলতে কী, এটি সত্যিই খুব সাধারণ, সম্ভবত নীচের সিউডোকোডের মতো কিছু:

while(!has_event_happened()) {
   sleep(5);
}

echo json_encode(get_events());
  • Has_event_happened ফাংশনটি কেবল কোনও ইভেন্ট টেবিল বা কিছুতে কিছু ঘটেছে কিনা তা পরীক্ষা করে দেখবে এবং তারপরে get_events ফাংশনটি সারণীতে নতুন সারিগুলির একটি তালিকা ফিরিয়ে দেবে? সমস্যার প্রসঙ্গে সত্যই নির্ভর করে।

  • আপনার পিএইচপি সর্বাধিক সম্পাদনের সময় পরিবর্তন করতে ভুলবেন না, অন্যথায় এটি সময় শেষ হয়ে যাবে!

মক্কেলের পক্ষে:

ধূমকেতু ইন্টারঅ্যাকশন করার জন্য jQuery প্লাগইনটি একবার দেখুন:

এটি বলেছিল, প্লাগইনটি মোটামুটি জটিলতার যোগ করতে পারে বলে মনে হচ্ছে এটি ক্লায়েন্টের পক্ষে খুব সহজ, সম্ভবত (jQuery সহ) এরকম কিছু:

function doPoll() {
   $.get("events.php", {}, function(result) {
      $.each(result.events, function(event) { //iterate over the events
          //do something with your event
      });
      doPoll(); 
      //this effectively causes the poll to run again as
      //soon as the response comes back
   }, 'json'); 
}

$(document).ready(function() {
    $.ajaxSetup({
       timeout: 1000*60//set a global AJAX timeout of a minute
    });
    doPoll(); // do the first poll
});

আপনার বিদ্যমান আর্কিটেকচারটি কীভাবে একসাথে রাখা হয় তার উপর পুরো বিষয়টি অনেকটাই নির্ভর করে।


2
এটি একটি খুব সুন্দর এবং বিস্তারিত ব্যাখ্যা। ধন্যবাদ. এটি প্রয়োগের বিভিন্ন উপায়ে একটির জন্য আপনার কি কোনও নমুনা কোড রয়েছে?
বিলি

45
আমি মনে করি পিএইচপি কে এমন ভাষা / প্ল্যাটফর্ম হিসাবে লেবেলিং করা যায় যা ভালভাবে স্কেল করে না। এটি অত্যন্ত বৃহত আকারের সিস্টেম বিকাশ করতে ব্যবহার করা যেতে পারে। ফেসবুক তাকান। যদি বিকাশকারী এটি সঠিকভাবে করেন তবে তা স্কেল হবে, যদি তা না হয় তবে তা হবে না। নির্দিষ্ট ওয়েব প্ল্যাটফর্মটি ব্যবহারযোগ্যতার গ্যারান্টি নয়। ওহ, এবং এছাড়াও, প্রশ্নটি পিএইচপি চেয়েছিল।
অ্যালিস্টায়ার ইভান্স

5
@ কাজার: "ফেসবুক পিএইচপি ব্যবহার করে" কিছুটা বিভ্রান্তিকর - সর্বশেষ আমি শুনেছি তারা পিএইচপি কে সি ++ এ রূপান্তর করার অভিব্যক্তির উদ্দেশ্যে হিপহপ তৈরি করেছে, কারণ পিএইচপি যথেষ্ট ভাল পারফর্ম করছে না।
সিএইচও

14
@ সিএইচও: ফেসবুক হিপহপ ব্যবহার শুরু করার আগে এটি একটি সুস্পষ্ট বিষয়, তবে এই উত্তরটি ২০০৯ সালে লেখা হয়েছিল। ফেইসবুকটি তখনও নিজস্ব একটি পিএইচপি ব্যবহার করে খুব বড় আকারের সিস্টেম ছিল।
অ্যালিস্টায়ার ইভান্স

6
সুতরাং কৌশলটি হ'ল একটি সংযোগ ক্রমাগত খোলা রাখুন যা একটি সার্ভারকে একটি ধ্রুবক চাপে রাখবে। গড়পড়তা ওয়েব-সার্ভারের জন্য সামঞ্জস্যপূর্ণ সংযোগগুলির পরিমাণ প্রায় 200, তবে একসাথে অনলাইনে থাকা ফেসবুক ব্যবহারকারীর সংখ্যা একটি উপায় বড়। তারা কিভাবে সেটি করে?
পল

43

হালনাগাদ

আমি এটির উপর ক্রমাগত প্রাপ্তি অব্যাহত রাখার সাথে সাথে আমি মনে করি যে এই উত্তরটি 4 বছরের পুরাতন মনে রাখা যুক্তিযুক্ত। ওয়েব সত্যিই দ্রুত গতিতে বেড়েছে, সুতরাং দয়া করে এই উত্তরটি সম্পর্কে সচেতন হন।


আমি সম্প্রতি একই সমস্যা ছিল এবং বিষয়টি নিয়ে গবেষণা করেছি।

প্রদত্ত সমাধানটিকে দীর্ঘ পোলিং বলা হয় এবং সঠিকভাবে এটি ব্যবহার করার জন্য আপনাকে অবশ্যই নিশ্চিত হওয়া উচিত যে আপনার এজেএক্স অনুরোধটির একটি "বড়" সময়সীমা শেষ হয়েছে এবং সর্বদা শেষের পরে (সময়সীমা, ত্রুটি বা সাফল্য) পরে এই অনুরোধটি করা উচিত।

দীর্ঘ পোলিং - ক্লায়েন্ট

এখানে কোডটি সংক্ষিপ্ত রাখতে আমি jQuery ব্যবহার করব:

function pollTask() { 

    $.ajax({

        url: '/api/Polling',
        async: true,            // by default, it's async, but...
        dataType: 'json',       // or the dataType you are working with
        timeout: 10000,          // IMPORTANT! this is a 10 seconds timeout
        cache: false

    }).done(function (eventList) {  

       // Handle your data here
       var data;
       for (var eventName in eventList) {

            data = eventList[eventName];
            dispatcher.handle(eventName, data); // handle the `eventName` with `data`

       }

    }).always(pollTask);

}

এটি মনে রাখা গুরুত্বপূর্ণ ( jQuery ডক্স থেকে ):

JQuery 1.4.x এবং এর নীচে XMLHttpRequest অবজেক্টটি যদি অনুরোধটির সময়সীমা বেঁধে দেয় তবে অবৈধ অবস্থায় থাকবে; যে কোনও অবজেক্টের সদস্যদের অ্যাক্সেস ব্যতিক্রম হতে পারে। শুধুমাত্র ফায়ারফক্স 3.0.০+ তে, স্ক্রিপ্ট এবং জেএসএনপি অনুরোধগুলি একটি সময়সীমা দ্বারা বাতিল করা যায় না; স্ক্রিপ্টটি সময়সীমা পেরিয়ে যাওয়ার পরেও চলবে।

দীর্ঘ পোলিং - সার্ভার

এটি কোনও নির্দিষ্ট ভাষায় নয়, তবে এটি এমন কিছু হবে:

function handleRequest () {  

     while (!anythingHappened() || hasTimedOut()) { sleep(2); }

     return events();

} 

এখানে, hasTimedOutআপনার কোডটি চিরকালের জন্য অপেক্ষা না করে তা নিশ্চিত করবে এবং anythingHappenedকোনও ইভেন্ট হ্যাণ্ডড হয়েছে কিনা তা পরীক্ষা করবে will এটি sleepহ'ল আপনার থ্রেডটি অন্যান্য জিনিসগুলি করার জন্য মুক্ত করার জন্য যখন কিছুই ঘটে না। eventsJSON ফর্ম্যাটে ঘটনা অভিধান (অথবা অন্য কোন ডাটা স্ট্রাকচার আপনি পছন্দ করতে পারেন) ফিরে আসবে (অথবা অন্য কোন আপনি পছন্দ)।

এটি অবশ্যই সমস্যার সমাধান করে, তবে, যদি আপনি গবেষণা করার সময় যেমন ছিলাম তেমনি স্কেল্যাবিলিটি এবং পারফরম্যান্স সম্পর্কে উদ্বিগ্ন হন তবে আপনি খুঁজে পেতে পারেন এমন আরও একটি সমাধান বিবেচনা করতে পারেন।

সমাধান

সকেট ব্যবহার করুন!

ক্লায়েন্ট পক্ষ থেকে, কোনও সামঞ্জস্যতা সমস্যা এড়ানোর জন্য, সকেট.ইও ব্যবহার করুন । এটি সরাসরি সকেট ব্যবহার করার চেষ্টা করে এবং সকেট পাওয়া না গেলে অন্যান্য সমাধানগুলিতে ফলব্যাক থাকে।

সার্ভারের পাশে, নোডজেএস (উদাহরণস্বরূপ ) ব্যবহার করে একটি সার্ভার তৈরি করুন । ক্লায়েন্ট সার্ভারের সাথে তৈরি এই চ্যানেলটির (পর্যবেক্ষক) সাবস্ক্রাইব করবে। যখনই কোনও বিজ্ঞপ্তি প্রেরণ করতে হবে, এটি এই চ্যানেলে প্রকাশিত হবে এবং সাবস্ক্রিপ্টর (ক্লায়েন্ট) অবহিত হবে।

আপনি যদি এই সমাধানটি পছন্দ না করেন তবে এপিই ( আজাক্স পুশ ইঞ্জিন ) ব্যবহার করে দেখুন।

আশা করি আমি সাহায্য করেছি।


আপনি কি মনে করেন 1 অন্যটির প্রতিস্থাপন বা একই প্রকল্পে উভয় প্রযুক্তির প্রয়োজন আছে?
tq

আপনি যদি এপিই এবং নোডজেএস বোঝাতে চান তবে আপনি তাদের মধ্যে একটি চয়ন করতে পারেন। যদি আপনি সাময়িকিক এজেএক্স অনুরোধগুলি এবং আমি প্রস্তাবিত একটি বোঝাতে চাইছি তবে সল্ট সাপোর্টের অভাব হলে আমার সমাধান অজ্যাক্সের কাছে ফ্যালব্যাক হতে পারে (সকেট.ও ডক্স দেখুন)। উভয় ক্ষেত্রেই আপনার কেবল একটি সমাধান প্রয়োজন।
ওয়াল্টার ম্যাকম্বিরা

ওহে ওয়াল্টার, আমি আমার সাইটের কোনও একটিতে আপনার পরামর্শটি ব্যবহার করতে চাই। আপনি কি জানেন কোথায় আমি সকেট সার্ভার পেতে পারি? ধন্যবাদ!
প্রোগো

1
আপনি এটি বাস্তবায়ন করতে পারেন। নোড এটি সত্যিই সহজ করে তোলে।
ওয়াল্টার ম্যাকম্বিরা

কীভাবে সনাক্ত করব hasTimedOut()?
মোবাশ্বের ফসিহি

18

ফেসবুকের মেসেজিং সিস্টেম সম্পর্কিত একটি স্লাইডশো অনুসারে , ওয়েব ব্রাউজারগুলিতে বার্তা "ধাক্কা" দিতে ফেসবুক ধূমকেতু প্রযুক্তি ব্যবহার করে। ফেসবুকের ধূমকেতু সার্ভারটি উন্মুক্ত উত্সাহিত এরলং ওয়েব সার্ভার মোচিওয়েবে নির্মিত।

নীচের ছবিতে "চ্যানেল ক্লাস্টারস" শব্দটির অর্থ "ধূমকেতু সার্ভার"।

সিস্টেমের সংক্ষিপ্ত বিবরণ

অন্যান্য অনেক বড় ওয়েবসাইট তাদের নিজস্ব ধূমকেতু সার্ভার তৈরি করে, কারণ প্রতিটি সংস্থার প্রয়োজনের মধ্যে পার্থক্য রয়েছে। তবে ওপেন সোর্স ধূমকেতু সার্ভারে আপনার নিজস্ব ধূমকেতু সার্ভার তৈরি করা ভাল পদ্ধতির।

আপনি আইকোমেট চেষ্টা করতে পারেন , একটি C1000K সি ++ ধূমকেতু সার্ভার মুক্তির সাথে নির্মিত। আইকোমেট একটি জাভাস্ক্রিপ্ট লাইব্রেরি সরবরাহ করে, এটি এত সহজ ব্যবহার করা সহজ:

var comet = new iComet({
    sign_url: 'http://' + app_host + '/sign?obj=' + obj,
    sub_url: 'http://' + icomet_host + '/sub',
    callback: function(msg){
        // on server push
        alert(msg.content);
    }
});

আইকোমেট সাফারি (আইওএস, ম্যাক), আইইএস (উইন্ডোজ), ফায়ারফক্স, ক্রোম ইত্যাদি সহ বিভিন্ন ব্রাউজার এবং ওএসএস সমর্থন করে supports


এই চিত্রটি দৃশ্যের বর্ণনা খুব ভাল করে দিয়েছে। যদি অ্যাকশন উদাহরণটি দেওয়া হত তবে দুর্দান্ত হত। উদাহরণস্বরূপ, কোনও ব্যক্তি যখন কোনও বন্ধুর সাথে একটি চ্যাটবক্স খোলেন (শুরু করেন) তখন কী হয়? কীভাবে ফেসবুক এই নির্দিষ্ট কথোপকথনে টিউন করে এবং উভয় প্রান্তে বার্তা ঠেলে দেয়? (কেবলমাত্র একটি অনুমান: আমি কেবল কল্পনা করতে পারি যে অ্যাপ্লিকেশন প্রোগ্রামটি একটি সকেট খোলে এবং উভয় ক্লায়েন্টের ঠিকানা আবদ্ধ করে এবং বাক্সে যখনই বার্তা লেখা হয় কেবল শুনতে এবং লিখতে
থাকি

5

ফেসবুক এইচটিটিপির পরিবর্তে এমকিউটিটি ব্যবহার করে। ভোট দেওয়ার চেয়ে পুশ ভাল। এইচটিটিপি-র মাধ্যমে আমাদের ক্রমাগত সার্ভারটি পোল করতে হবে তবে এমকিউটিটি সার্ভারের মাধ্যমে ক্লায়েন্টদের কাছে বার্তাটি ঠেলে দেওয়া হচ্ছে।

এমকিউটিটি এবং এইচটিটিপি: http://www.youtube.com/watch?v=-KNPXPmx88E এর মধ্যে তুলনা

দ্রষ্টব্য: আমার উত্তরগুলি মোবাইল ডিভাইসের জন্য সেরা ফিট করে।


3
অতিরিক্তভাবে, গুগল অ্যান্ড্রয়েডের জন্য জিসিএম পরিষেবা ব্যবহার করে, এটি বিকাশকারীরা পুশ বার্তা পরিষেবা প্রয়োগের জন্য ব্যবহার করতে পারেন। developer.android.com/google/gcm/index.html যদি উত্তরটি দরকারী মনে হয় তবে তা গ্রহণ করুন।
অভি

5

দীর্ঘ ভোটদানের সাথে একটি গুরুত্বপূর্ণ সমস্যা হ'ল ত্রুটি পরিচালনা। দুটি ধরণের ত্রুটি রয়েছে:

  1. অনুরোধটির মেয়াদ উত্তীর্ণ হতে পারে সেই ক্ষেত্রে ক্লায়েন্টকে তত্ক্ষণাত সংযোগটি পুনরায় প্রকাশ করতে হবে। কোনও বার্তা না এলে দীর্ঘ ভোটদানের এটি সাধারণ ঘটনা।

  2. একটি নেটওয়ার্ক ত্রুটি বা একটি কার্যকরকরণের ত্রুটি। এটি একটি আসল ত্রুটি যা ক্লায়েন্টকে দয়া করে গ্রহণ করতে হবে এবং সার্ভারটি অন-লাইনে ফিরে আসার জন্য অপেক্ষা করা উচিত।

মূল সমস্যাটি হ'ল যদি আপনার ত্রুটি হ্যান্ডলারের সাথে সংযোগটি তাত্ক্ষণিকভাবে টাইপ 2 ত্রুটির জন্যও পুনরায় প্রকাশ করা হয়, ক্লায়েন্টরা সার্ভার ডস করে।

কোড নমুনা সহ উভয় উত্তর এটি মিস করে।

function longPoll() { 
        var shouldDelay = false;

        $.ajax({
            url: 'poll.php',
            async: true,            // by default, it's async, but...
            dataType: 'json',       // or the dataType you are working with
            timeout: 10000,          // IMPORTANT! this is a 10 seconds timeout
            cache: false

        }).done(function (data, textStatus, jqXHR) {
             // do something with data...

        }).fail(function (jqXHR, textStatus, errorThrown ) {
            shouldDelay = textStatus !== "timeout";

        }).always(function() {
            // in case of network error. throttle otherwise we DOS ourselves. If it was a timeout, its normal operation. go again.
            var delay = shouldDelay ? 10000: 0;
            window.setTimeout(longPoll, delay);
        });
}
longPoll(); //fire first handler
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.