ฉันสามารถค้นหาข้อมูลจำนวนมากเกี่ยวกับวิธีการทำงานของ Long Polling (ตัวอย่างเช่นสิ่งนี้และสิ่งนี้ ) แต่ไม่มีตัวอย่างง่ายๆของวิธีการใช้สิ่งนี้ในโค้ด
ทั้งหมดที่ฉันสามารถหาได้คือcometdซึ่งอาศัยเฟรมเวิร์ก Dojo JS และระบบเซิร์ฟเวอร์ที่ค่อนข้างซับซ้อน ..
โดยทั่วไปแล้วฉันจะใช้ Apache เพื่อตอบสนองการร้องขอได้อย่างไรและฉันจะเขียนสคริปต์อย่างง่าย ๆ (เช่นใน PHP) ซึ่งจะ "สำรวจความยาว" เซิร์ฟเวอร์สำหรับข้อความใหม่ได้อย่างไร
ตัวอย่างไม่จำเป็นต้องปรับขนาดได้ปลอดภัยหรือสมบูรณ์เพียงแค่ต้องทำงาน!
คำตอบ:
มันง่ายกว่าที่ฉันคิดไว้ในตอนแรก .. โดยทั่วไปคุณมีหน้าเว็บที่ไม่ทำอะไรเลยจนกว่าจะมีข้อมูลที่คุณต้องการส่ง (พูดว่ามีข้อความใหม่มาถึง)
นี่คือตัวอย่างพื้นฐานจริง ๆ ซึ่งส่งสตริงง่าย ๆ หลังจาก 2-10 วินาที โอกาส 1 ใน 3 ในการส่งคืนข้อผิดพลาด 404 (เพื่อแสดงการจัดการข้อผิดพลาดในตัวอย่าง Javascript ที่กำลังมา)
msgsrv.php
<?php
if(rand(1,3) == 1){
/* Fake an error */
header("HTTP/1.0 404 Not Found");
die();
}
/* Send a string after a random number of seconds (2-10) */
sleep(rand(2,10));
echo("Hi! Have a random number: " . rand(1,10));
?>
หมายเหตุ: ด้วยไซต์จริงการเรียกใช้สิ่งนี้บนเว็บเซิร์ฟเวอร์ปกติเช่น Apache จะผูก "กระทู้ผู้ทำงาน" ทั้งหมดอย่างรวดเร็วและปล่อยให้มันไม่สามารถตอบสนองต่อคำขออื่น ๆ ได้ .. มีวิธีแก้ไขปัญหานี้อยู่แล้ว แต่ขอแนะนำให้เขียน "เซิร์ฟเวอร์แบบสำรวจความคิดเห็นยาว" ในสิ่งที่คล้ายกับ Python twistedซึ่งไม่ขึ้นอยู่กับหนึ่งเธรดต่อคำขอ cometDเป็นหนึ่งที่ได้รับความนิยม (ซึ่งมีให้บริการในหลายภาษา) และTornadoเป็นเฟรมเวิร์กใหม่ที่สร้างขึ้นเป็นพิเศษสำหรับงานดังกล่าว (มันถูกสร้างขึ้นสำหรับรหัสโพลแบบยาวของ FriendFeed) ... แต่เป็นตัวอย่างง่ายๆ Apache ก็เพียงพอแล้ว ! สคริปต์นี้สามารถเขียนได้อย่างง่ายดายในทุกภาษา (ฉันเลือก Apache / PHP เนื่องจากเป็นเรื่องธรรมดามากและฉันก็เรียกใช้พวกเขาในพื้นที่)
จากนั้นใน Javascript คุณขอไฟล์ด้านบน ( msg_srv.php) และรอการตอบกลับ เมื่อคุณได้รับหนึ่งคุณดำเนินการกับข้อมูล จากนั้นคุณร้องขอไฟล์และรออีกครั้งดำเนินการกับข้อมูล (และทำซ้ำ)
สิ่งต่อไปนี้เป็นตัวอย่างของหน้าดังกล่าว .. เมื่อหน้าโหลดมันจะส่งคำขอเริ่มต้นสำหรับmsgsrv.phpไฟล์ .. ถ้ามันประสบความสำเร็จเราผนวกข้อความไปยัง#messagesdiv แล้วหลังจาก 1 วินาทีที่เราเรียกใช้ฟังก์ชั่น waitForMsg อีกครั้ง ซึ่งก่อให้เกิดการรอคอย
1 ที่สองsetTimeout()เป็นอัตราที่ limiter พื้นฐานจริงๆก็ทำงานได้ดีโดยไม่ต้องนี้ แต่ถ้าmsgsrv.php เสมอจะส่งกลับทันที (ที่มีข้อผิดพลาดทางไวยากรณ์เช่น) - คุณน้ำท่วมเบราว์เซอร์และมันได้อย่างรวดเร็วสามารถแข็งขึ้น สิ่งนี้จะเป็นการดีกว่าถ้าตรวจสอบว่าไฟล์มีการตอบสนอง JSON ที่ถูกต้องและ / หรือรักษาคำขอรวมต่อนาที / วินาทีที่กำลังทำงานอยู่ทั้งหมดและหยุดชั่วคราวอย่างเหมาะสม
หากหน้าผิดพลาดมันจะผนวกข้อผิดพลาดกับ#messagesdiv รอ 15 วินาทีจากนั้นลองอีกครั้ง (เหมือนกับที่เรารอ 1 วินาทีหลังจากแต่ละข้อความ)
ข้อดีของวิธีนี้คือมีความยืดหยุ่น หากการเชื่อมต่ออินเทอร์เน็ตของลูกค้าตายก็จะหมดเวลาจากนั้นลองเชื่อมต่อใหม่ - สิ่งนี้มีอยู่ในการทำงานของหน่วยเลือกตั้งนานไม่ต้องจัดการข้อผิดพลาดที่ซับซ้อน
อย่างไรก็ตามlong_poller.htmรหัสโดยใช้กรอบ jQuery:
<html>
<head>
<title>BargePoller</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
body{ background:#000;color:#fff;font-size:.9em; }
.msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
.old{ background-color:#246499;}
.new{ background-color:#3B9957;}
.error{ background-color:#992E36;}
</style>
<script type="text/javascript" charset="utf-8">
function addmsg(type, msg){
/* Simple helper to add a div.
type is the name of a CSS class (old/new/error).
msg is the contents of the div */
$("#messages").append(
"<div class='msg "+ type +"'>"+ msg +"</div>"
);
}
function waitForMsg(){
/* This requests the url "msgsrv.php"
When it complete (or errors)*/
$.ajax({
type: "GET",
url: "msgsrv.php",
async: true, /* If set to non-async, browser shows page as "Loading.."*/
cache: false,
timeout:50000, /* Timeout in ms */
success: function(data){ /* called when request to barge.php completes */
addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
setTimeout(
waitForMsg, /* Request next message */
1000 /* ..after 1 seconds */
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg, /* Try again after.. */
15000); /* milliseconds (15seconds) */
}
});
};
$(document).ready(function(){
waitForMsg(); /* Start the inital request */
});
</script>
</head>
<body>
<div id="messages">
<div class="msg old">
BargePoll message requester!
</div>
</div>
</body>
</html>
sleep(rand(2,10));อะไร เพื่อที่จะไม่ทำอะไรเลยสำรวจฐานข้อมูลละ 100 milisecs เมื่อไหร่จะตัดสินใจตาย
ฉันมีตัวอย่างเช่นการแชทง่ายจริงๆเป็นส่วนหนึ่งของโคลน
แก้ไข : (เนื่องจากทุกคนวางโค้ดไว้ที่นี่)
นี่คือการแชทแบบหลายผู้ใช้แบบ JSON ที่สมบูรณ์โดยใช้การทำโพลและslosh แบบยาว นี่เป็นตัวอย่างของวิธีการโทรดังนั้นโปรดข้ามปัญหา XSS ไม่มีใครควรปรับใช้สิ่งนี้โดยไม่ทำให้ถูกสุขลักษณะก่อน
ขอให้สังเกตว่าลูกค้ามักจะมีการเชื่อมต่อไปยังเซิร์ฟเวอร์และเร็วที่สุดเท่าที่ทุกคนที่ส่งข้อความไปทุกคนควรเห็นมันประมาณทันที
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2008 Dustin Sallings <dustin+html@spy.net> -->
<html lang="en">
<head>
<title>slosh chat</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<link title="Default" rel="stylesheet" media="screen" href="style.css" />
</head>
<body>
<h1>Welcome to Slosh Chat</h1>
<div id="messages">
<div>
<span class="from">First!:</span>
<span class="msg">Welcome to chat. Please don't hurt each other.</span>
</div>
</div>
<form method="post" action="#">
<div>Nick: <input id='from' type="text" name="from"/></div>
<div>Message:</div>
<div><textarea id='msg' name="msg"></textarea></div>
<div><input type="submit" value="Say it" id="submit"/></div>
</form>
<script type="text/javascript">
function gotData(json, st) {
var msgs=$('#messages');
$.each(json.res, function(idx, p) {
var from = p.from[0]
var msg = p.msg[0]
msgs.append("<div><span class='from'>" + from + ":</span>" +
" <span class='msg'>" + msg + "</span></div>");
});
// The jQuery wrapped msgs above does not work here.
var msgs=document.getElementById("messages");
msgs.scrollTop = msgs.scrollHeight;
}
function getNewComments() {
$.getJSON('/topics/chat.json', gotData);
}
$(document).ready(function() {
$(document).ajaxStop(getNewComments);
$("form").submit(function() {
$.post('/topics/chat', $('form').serialize());
return false;
});
getNewComments();
});
</script>
</body>
</html>Tornadoได้รับการออกแบบมาเพื่อการสำรวจระยะยาวและมีแอพแชท Python ที่น้อยมาก (ไม่กี่ร้อยบรรทัด) ใน/ samples / chatdemoรวมถึงรหัสเซิร์ฟเวอร์และรหัสลูกค้า JS มันได้ผลเช่นนี้:
ลูกค้าใช้ JS เพื่อขออัปเดตตั้งแต่ (จำนวนข้อความล่าสุด) เซิร์ฟเวอร์ URLHandler ได้รับสิ่งเหล่านี้และเพิ่มการโทรกลับเพื่อตอบสนองต่อลูกค้าไปยังคิว
เมื่อเซิร์ฟเวอร์ได้รับข้อความใหม่เหตุการณ์ onmessage จะยิงวนรอบการเรียกกลับและส่งข้อความ
JS ฝั่งไคลเอ็นต์ได้รับข้อความเพิ่มไปยังหน้าจากนั้นขอการปรับปรุงตั้งแต่ ID ข้อความใหม่นี้
ฉันคิดว่าไคลเอนต์ดูเหมือนคำขอ AJAX แบบอะซิงโครนัสปกติ แต่คุณคาดว่าจะใช้เวลา "นาน" ในการกลับมา
เซิร์ฟเวอร์จะมีลักษณะเช่นนี้
while (!hasNewData())
usleep(50);
outputNewData();ดังนั้นคำขอ AJAX จะไปที่เซิร์ฟเวอร์ซึ่งอาจรวมถึงการประทับเวลาของเมื่อมีการอัปเดตครั้งล่าสุดเพื่อที่คุณจะได้hasNewData()ทราบว่ามีข้อมูลใดบ้าง จากนั้นเซิร์ฟเวอร์จะอยู่ในโหมดวนรอบจนกว่าจะมีข้อมูลใหม่ ในขณะที่คำขอ AJAX ของคุณยังคงเชื่อมต่ออยู่แค่รอข้อมูลอยู่ ในที่สุดเมื่อมีข้อมูลใหม่เซิร์ฟเวอร์จะให้ข้อมูลกับคำขอ AJAX ของคุณและปิดการเชื่อมต่อ
นี่คือบางคลาสที่ฉันใช้สำหรับการโพลแบบยาวใน C # โดยทั่วไปมี 6 คลาส (ดูด้านล่าง)
นี่คือหน้าจอ 5 นาทีที่ดีสำหรับวิธีการทำโพลแบบยาวโดยใช้ PHP & jQuery: http://screenr.com/SNH
รหัสค่อนข้างคล้ายกับตัวอย่างของdbrด้านบน
นี่เป็นตัวอย่างการโพลแบบยาวอย่างง่ายใน PHP โดย Erik Dubbelboerโดยใช้Content-type: multipart/x-mixed-replaceส่วนหัว:
<?
header('Content-type: multipart/x-mixed-replace; boundary=endofsection');
// Keep in mind that the empty line is important to separate the headers
// from the content.
echo 'Content-type: text/plain
After 5 seconds this will go away and a cat will appear...
--endofsection
';
flush(); // Don't forget to flush the content to the browser.
sleep(5);
echo 'Content-type: image/jpg
';
$stream = fopen('cat.jpg', 'rb');
fpassthru($stream);
fclose($stream);
echo '
--endofsection
';และนี่คือตัวอย่าง:
ฉันใช้สิ่งนี้เพื่อจับกับ Comet ฉันได้ตั้งค่า Comet โดยใช้เซิร์ฟเวอร์ Java Glassfish และพบตัวอย่างอื่น ๆ มากมายโดยสมัครเป็นสมาชิก cometdaily.com
ลองดูที่โพสต์บล็อกนี้ซึ่งมีรหัสสำหรับ app ง่ายแชทในหลาม / Django / gevent
ด้านล่างนี้เป็นวิธีการสำรวจที่มีความยาวที่ฉันพัฒนาขึ้นสำหรับเว็บ Inform8 โดยทั่วไปคุณจะแทนที่คลาสและใช้เมธอด loadData เมื่อ loadData ส่งคืนค่าหรือการดำเนินการหมดเวลาระบบจะพิมพ์ผลลัพธ์และส่งคืน
หากการประมวลผลสคริปต์ของคุณอาจใช้เวลานานกว่า 30 วินาทีคุณอาจต้องเปลี่ยนการเรียก set_time_limit () เป็นบางสิ่งนานกว่านั้น
Apache 2.0 ลิขสิทธิ์ รุ่นล่าสุดบน github https://github.com/ryanhend/Inform8/blob/master/Inform8-web/src/config/lib/Inform8/longpoll/LongPoller.php
ไรอัน
abstract class LongPoller {
protected $sleepTime = 5;
protected $timeoutTime = 30;
function __construct() {
}
function setTimeout($timeout) {
$this->timeoutTime = $timeout;
}
function setSleep($sleep) {
$this->sleepTime = $sleepTime;
}
public function run() {
$data = NULL;
$timeout = 0;
set_time_limit($this->timeoutTime + $this->sleepTime + 15);
//Query database for data
while($data == NULL && $timeout < $this->timeoutTime) {
$data = $this->loadData();
if($data == NULL){
//No new orders, flush to notify php still alive
flush();
//Wait for new Messages
sleep($this->sleepTime);
$timeout += $this->sleepTime;
}else{
echo $data;
flush();
}
}
}
protected abstract function loadData();
}ขอบคุณสำหรับรหัสDBR เพียงพิมพ์เล็กในlong_poller.htmรอบบรรทัด
1000 /* ..after 1 seconds */ฉันคิดว่ามันควรจะเป็น
"1000"); /* ..after 1 seconds */เพื่อให้มันทำงาน
สำหรับผู้ที่สนใจฉันลอง Django เทียบเท่า เริ่มโครงการ Django ใหม่พูดlpสำหรับการสำรวจแบบยาว:
django-admin.py startproject lpโทรหาแอปmsgsrvสำหรับเซิร์ฟเวอร์ข้อความ:
python manage.py startapp msgsrvเพิ่มบรรทัดต่อไปนี้ในsettings.pyเพื่อให้มีไดเรกทอรีเทมเพลต :
import os.path
PROJECT_DIR = os.path.dirname(__file__)
TEMPLATE_DIRS = (
os.path.join(PROJECT_DIR, 'templates'),
)กำหนดรูปแบบ URL ของคุณในurls.pyเช่น:
from django.views.generic.simple import direct_to_template
from lp.msgsrv.views import retmsg
urlpatterns = patterns('',
(r'^msgsrv\.php$', retmsg),
(r'^long_poller\.htm$', direct_to_template, {'template': 'long_poller.htm'}),
)และ msgsrv / views.pyควรมีลักษณะดังนี้:
from random import randint
from time import sleep
from django.http import HttpResponse, HttpResponseNotFound
def retmsg(request):
if randint(1,3) == 1:
return HttpResponseNotFound('<h1>Page not found</h1>')
else:
sleep(randint(2,10))
return HttpResponse('Hi! Have a random number: %s' % str(randint(1,10)))สุดท้ายเท็มเพลต / long_poller.htmควรตรงกับด้านบนที่มีการแก้ไขการพิมพ์ผิด หวังว่านี่จะช่วยได้
"15000"เป็นข้อผิดพลาดทางไวยากรณ์ setTimeout รับจำนวนเต็มเป็นพารามิเตอร์ตัวที่ 2
นี่เป็นหนึ่งในสถานการณ์ที่ PHP เป็นตัวเลือกที่แย่มาก ดังที่ได้กล่าวไว้ก่อนหน้านี้คุณสามารถผูกมัดพนักงาน Apache ทั้งหมดของคุณได้อย่างรวดเร็วทำสิ่งนี้ PHP ถูกสร้างขึ้นสำหรับการเริ่มต้นดำเนินการหยุด มันไม่ได้ถูกสร้างเพื่อเริ่มต้นรอ ... ดำเนินการหยุด คุณจะชะงักเซิร์ฟเวอร์ของคุณอย่างรวดเร็วและพบว่าคุณมีปัญหาในการปรับขนาดอย่างไม่น่าเชื่อ
ที่กล่าวว่าคุณยังสามารถทำสิ่งนี้กับ PHP และไม่ฆ่าเซิร์ฟเวอร์ของคุณโดยใช้ nginx HttpPushStreamModule: http://wiki.nginx.org/HttpPushStreamModule
คุณตั้งค่า nginx ต่อหน้า Apache (หรืออย่างอื่น) และมันจะดูแลการเปิดการเชื่อมต่อพร้อมกัน คุณเพียงแค่ตอบกลับด้วย payload โดยการส่งข้อมูลไปยังที่อยู่ภายในซึ่งคุณสามารถทำกับงานพื้นหลังหรือเพียงแค่ส่งข้อความไปยังคนที่รออยู่เมื่อใดก็ตามที่มีคำขอใหม่เข้ามาสิ่งนี้ทำให้กระบวนการ PHP ไม่เปิดในระหว่างการเลือกตั้งนาน
นี่ไม่ใช่เอกสิทธิ์ของ PHP และสามารถทำได้โดยใช้ nginx กับภาษาแบ็กเอนด์ โหลดการเชื่อมต่อที่เปิดพร้อมกันจะเท่ากับ Node.js ดังนั้นข้อได้เปรียบที่ยิ่งใหญ่ที่สุดคือมันทำให้คุณออกจาก NEEDING Node สำหรับสิ่งนี้
คุณเห็นผู้คนจำนวนมากพูดถึงห้องสมุดภาษาอื่น ๆ สำหรับการทำโพลแบบยาวและนั่นคือเหตุผลที่ดี PHP นั้นไม่ได้สร้างมาเพื่อพฤติกรรมประเภทนี้
ทำไมไม่ลองพิจารณาเว็บซ็อกเก็ตแทนการทำโพลแบบยาว? มีประสิทธิภาพและติดตั้งได้ง่าย อย่างไรก็ตามพวกเขาได้รับการสนับสนุนเฉพาะในเบราว์เซอร์ที่ทันสมัย นี่คือการอ้างอิงอย่างรวดเร็ว
กลุ่ม WS-I ได้เผยแพร่สิ่งที่เรียกว่า"โปรไฟล์ความปลอดภัยที่เชื่อถือได้"ซึ่งมีการใช้งาน Glass Fish และ. NETซึ่งเห็นได้ชัดว่าใช้งานได้ดี
โชคดีที่มีการใช้Javascriptออกมีเช่นกัน
นอกจากนี้ยังมีการใช้ Silverlight ที่ใช้HTTP Duplex คุณสามารถเชื่อมต่อจาวาสคริปต์กับวัตถุSilverlightเพื่อรับการเรียกกลับเมื่อเกิดการพุช
นอกจากนี้ยังมีรุ่นจ่ายเชิงพาณิชย์เช่นกัน
สำหรับการนำ ASP.NET MVC ไปใช้ให้ดูที่ SignalR ซึ่งมีอยู่ใน NuGetโปรดทราบว่า NuGet มักจะล้าสมัยจากแหล่ง Gitซึ่งได้รับการยอมรับบ่อยครั้ง
อ่านเพิ่มเติมเกี่ยวกับ SignalR ในบล็อกของ Scott Hanselman
คุณสามารถลอง icomet ( https://github.com/ideawu/icomet ) เซิร์ฟเวอร์ดาวหาง C1000K C ++ ที่สร้างด้วย libevent icomet ยังมีห้องสมุด JavaScript ซึ่งใช้งานง่ายเหมือน
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);
}
});icomet รองรับเบราว์เซอร์และระบบปฏิบัติการที่หลากหลายรวมถึง Safari (iOS, Mac), IEs (Windows), Firefox, Chrome, ฯลฯ
NodeJS ที่ง่ายที่สุด
const http = require('http');
const server = http.createServer((req, res) => {
SomeVeryLongAction(res);
});
server.on('clientError', (err, socket) => {
socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
});
server.listen(8000);
// the long running task - simplified to setTimeout here
// but can be async, wait from websocket service - whatever really
function SomeVeryLongAction(response) {
setTimeout(response.end, 10000);
}สถานการณ์การผลิตที่ชาญฉลาดใน Express สำหรับ exmaple คุณจะได้รับresponseในมิดเดิลแวร์ ทำสิ่งที่คุณต้องทำสามารถกำหนดขอบเขตวิธีการสำรวจความยาวทั้งหมดในแผนที่หรือบางสิ่งบางอย่าง (ที่สามารถมองเห็นได้กับกระแสอื่น ๆ ) และเรียกใช้<Response> response.end()เมื่อใดก็ตามที่คุณพร้อม ไม่มีอะไรพิเศษเกี่ยวกับการเชื่อมต่อแบบสำรวจระยะไกล ส่วนที่เหลือเป็นเพียงวิธีที่คุณจัดโครงสร้างแอปพลิเคชันตามปกติ
หากคุณไม่รู้ว่าฉันหมายถึงอะไรโดยการกำหนดขอบเขตสิ่งนี้จะทำให้คุณมีความคิด
const http = require('http');
var responsesArray = [];
const server = http.createServer((req, res) => {
// not dealing with connection
// put it on stack (array in this case)
responsesArray.push(res);
// end this is where normal api flow ends
});
server.on('clientError', (err, socket) => {
socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
});
// and eventually when we are ready to resolve
// that if is there just to ensure you actually
// called endpoint before the timeout kicks in
function SomeVeryLongAction() {
if ( responsesArray.length ) {
let localResponse = responsesArray.shift();
localResponse.end();
}
}
// simulate some action out of endpoint flow
setTimeout(SomeVeryLongAction, 10000);
server.listen(8000);อย่างที่คุณเห็นคุณสามารถตอบสนองต่อการเชื่อมต่อทั้งหมดอย่างใดอย่างหนึ่งทำในสิ่งที่คุณต้องการ มีidสำหรับทุกคำขอดังนั้นคุณควรจะสามารถใช้แผนที่และเข้าถึงเฉพาะการโทรออกจาก API