Skip to content

N
nginx-push-stream-module
Commit 36bab57a authored by Wandenberg Peixoto's avatar Wandenberg Peixoto
Browse files
Options

adding examples for eventsource, stream and longpolling

parent e482488a
Hide whitespace changes
Inline Side-by-side
Showing with 384 additions and 6 deletions
README.textile
View file @ 36bab57a
...@@ -152,6 +152,234 @@ one terminal and start playing http pubsub: ...@@ -152,6 +152,234 @@ one terminal and start playing http pubsub:
</pre> </pre>
h1(#examples). Some Examples
h2(#forever-iframe). Forever iFrame
Using an invisible iFrame on the page to receive the messages and pass them to main page.
*This example uses the PushStream class present in _misc/js/pushstream.js_ file, copy it to your server htdocs.*
Configure your server like suggested bellow. You should complete this configuration with other directives according with target application.
Create a html page with the content on **Client** part, access it from browser and try with the command *curl http://localhost/pub?id=ch1 -d "Some Text"*.
*Server:*
<pre>
location /pub {
# activate publisher (admin) mode for this location
push_stream_publisher admin;
# query string based channel id
set $push_stream_channel_id $arg_id;
}
location ~ /sub/(.*) {
# activate subscriber (streaming) mode for this location
push_stream_subscriber;
# positional channel path
set $push_stream_channels_path $1;
# header to be sent when receiving new subscriber connection
push_stream_header_template "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-store\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-cache\">\r\n<meta http-equiv=\"Pragma\" content=\"no-cache\">\r\n<meta http-equiv=\"Expires\" content=\"Thu, 1 Jan 1970 00:00:00 GMT\">\r\n<script type=\"text/javascript\">\r\nwindow.onError = null;\r\ndocument.domain = 'localhost';\r\nparent.PushStream.register(this);\r\n</script>\r\n</head>\r\n<body onload=\"try { parent.PushStream.reset(this) } catch (e) {}\">";
# message template
push_stream_message_template "<script>p(~id~,'~channel~','~text~');</script>";
# footer to be sent when finishing subscriber connection
push_stream_footer_template "</body></html>";
# content-type
push_stream_content_type "text/html; charset=utf-8";
# ping frequency
push_stream_ping_message_interval 10s;
}
</pre>
*Client:*
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Forever iFrame Example</title>
</head>
<body>
<p>Messages:</p>
<div id="messages" style="width:800px;height:300px;overflow:scroll;"></div>
<script src="/js/pushstream.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function messageReceived(text, id, channel) {
document.getElementById('messages').innerHTML += id + ': ' + text + '<br>';
};
var pushstream = new PushStream({
host: window.location.hostname,
port: window.location.port,
modes: "stream"
});
pushstream.onmessage = messageReceived;
pushstream.addChannel('ch1');
pushstream.connect();
// ]]>
</script>
</body>
</html>
</pre>
h2(#event-source). Event Source
Using EventSource to receive the messages.
*This example uses the PushStream class present in _misc/js/pushstream.js_ file, copy it to your server htdocs.*
Configure your server like suggested bellow. You should complete this configuration with other directives according with target application.
Create a html page with the content on **Client** part, access it from browser and try with the command *curl http://localhost/pub?id=ch1 -d "Some Text"*.
*Server:*
<pre>
location /pub {
# activate publisher (admin) mode for this location
push_stream_publisher admin;
# query string based channel id
set $push_stream_channel_id $arg_id;
}
location ~ /ev/(.*) {
# activate subscriber mode for this location
push_stream_subscriber;
# activate event source support for this location
push_stream_eventsource_support on;
# positional channel path
set $push_stream_channels_path $1;
# message template
push_stream_message_template "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\"}";
# ping frequency
push_stream_ping_message_interval 10s;
}
</pre>
*Client:*
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Event Source Example</title>
</head>
<body>
<p>Messages:</p>
<div id="messages" style="width:800px;height:300px;overflow:scroll;"></div>
<script src="/js/pushstream.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function messageReceived(text, id, channel) {
document.getElementById('messages').innerHTML += id + ': ' + text + '<br>';
};
var pushstream = new PushStream({
host: window.location.hostname,
port: window.location.port,
modes: "eventsource"
});
pushstream.onmessage = messageReceived;
pushstream.addChannel('ch1');
pushstream.connect();
// ]]>
</script>
</body>
</html>
</pre>
*Observations:*
* _push_stream_message_template_ should be exactly like as the example to be used with PushStream class
* EventSource and Forever iFrame may be combined setting _/sub_ and _/ev_ locations on same server and setting *modes: "eventsource|stream"* on client. With that if the browser supports Event Source, it will use it, if not it will use iFrame.
h2(#long-polling). Long Polling
Using jQuery to receive the messages.
*This example uses jQuery file, put it on your server htdocs.*
Configure your server like suggested bellow. You should complete this configuration with other directives according with target application.
Create a html page with the content on **Client** part, access it from browser and try with the command *curl http://localhost/pub?id=ch1 -d "Some Text"*.
*Server:*
<pre>
location /pub {
# activate publisher (admin) mode for this location
push_stream_publisher admin;
# query string based channel id
set $push_stream_channel_id $arg_id;
}
location ~ /lp/(.*) {
# activate long-polling mode for this location
push_stream_subscriber long-polling;
# positional channel path
set $push_stream_channels_path $1;
# message template
push_stream_message_template "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\"}";
# connection timeout
push_stream_longpolling_connection_ttl 30s;
}
</pre>
*Client:*
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Long Polling Example</title>
</head>
<body>
<p>Messages:</p>
<div id="messages" style="width:800px;height:300px;overflow:scroll;"></div>
<script src="/js/pushstream.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function messageReceived(text, id, channel) {
document.getElementById('messages').innerHTML += id + ': ' + text + '<br>';
};
var pushstream = new PushStream({
host: window.location.hostname,
port: window.location.port,
modes: "longpolling"
});
pushstream.onmessage = messageReceived;
pushstream.addChannel('ch1');
pushstream.connect();
// ]]>
</script>
</body>
</html>
</pre>
*Observations:*
* _push_stream_message_template_ should be exactly like as the example to be used with PushStream class
h1(#variables). Variables h1(#variables). Variables
......
misc/examples/chat_longpolling.html 0 → 100644
View file @ 36bab57a
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Chat Long Polling - Push Stream Module Example</title>
</head>
<body>
<form action="/pub" method="POST">
<p>
<span style="display: block; float: left; width: 55px;">mode:</span>
<span id="mode" style="display:none;"></span>
</p>
<p>
<span style="display: block; float: left; width: 55px;">satus:</span>
<span class="online" style="display:none; color:green">online</span>
<span class="offline" style="display:block; color:red">offline</span>
</p>
<p>
<label for="room">Room:</label>
<input type="text" name="room" value="example" id="room" />
</p>
<p>
<label for="nick">Nick:</label>
<input type="text" name="nick" value="" id="nick" />
</p>
<p>
<label for="chat">Chat:</label>
<textarea name="chat" rows="8" cols="40" id="chat" readonly="readonly"></textarea>
</p>
<p>
<label for="message">Text:</label>
<textarea name="message" rows="2" cols="40" id="message"></textarea>
</p>
<p><input type="submit" value="Send" id="sendButton"/></p>
</form>
<p><input type="button" value="Show Log" id="showLog"/></p>
<div id="Log4jsLogOutput" style="width:800px;height:200px;overflow:scroll;display:none;"></div>
<script src="/js/jquery.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script src="/js/pushstream.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
PushStream.LOG_LEVEL = 'debug';
var pushstream = new PushStream({
host: window.location.hostname,
port: window.location.port,
modes: "longpolling"
});
pushstream.onmessage = _manageEvent;
pushstream.onstatuschange = _statuschanged;
function onSendText() {
$("#message").val('');
};
function _manageEvent(eventMessage) {
var chat = $("#chat");
if (eventMessage != '') {
var values = $.parseJSON(eventMessage);
var line = values.nick + ': ' + values.text;
if (chat.val() == '') {
chat.val(line);
} else {
chat.val(chat.val() + '\n' + line);
}
}
chat.scrollTop(chat[0].scrollHeight - chat.height());
};
function _statuschanged(state) {
if (state == PushStream.OPEN) {
$(".offline").hide();
$(".online").show();
$("#mode").html(pushstream.wrapper.type).show();
} else {
$(".offline").show();
$(".online").hide();
$("#mode").html("").hide();
}
};
function _connect(channel) {
pushstream.removeAllChannels();
pushstream.addChannel(channel);
try {
pushstream.connect();
} catch(e) {alert(e)};
$("#chat").val('');
}
$("#sendButton").click(function(){
if (($("#nick").val() != "") && ($("#message").val() != "") && ($("#room").val() != "")) {
$.post( '/pub?id=' + $("#room").val(), '{"nick":"' + $("#nick").val() + '", "text":"' + $("#message").val() + '"}', onSendText);
} else {
alert("nick, room and text are required");
}
return false;
});
$("#room").change(function(){
_connect($("#room").val());
});
$("#showLog").click(function(){
$("#Log4jsLogOutput").show();
});
_connect($("#room").val());
// ]]>
</script>
</body>
</html>
misc/nginx.conf
View file @ 36bab57a
...@@ -4,6 +4,9 @@ error_log logs/nginx-main_error.log debug; ...@@ -4,6 +4,9 @@ error_log logs/nginx-main_error.log debug;
# Development Mode # Development Mode
master_process off; master_process off;
daemon off; daemon off;
worker_rlimit_core 500M;
working_directory /tmp/nginx;
worker_processes 2; worker_processes 2;
events { events {
...@@ -41,11 +44,25 @@ http { ...@@ -41,11 +44,25 @@ http {
push_stream_ping_message_interval 10s; push_stream_ping_message_interval 10s;
# connection ttl to enable recycle # connection ttl to enable recycle
push_stream_subscriber_connection_ttl 15m; push_stream_subscriber_connection_ttl 15m;
# connection ttl for long polling
push_stream_longpolling_connection_ttl 30s;
# broadcast # broadcast
push_stream_broadcast_channel_prefix "broad_"; push_stream_broadcast_channel_prefix "broad_";
#push_stream_message_template "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\",\"eventid\":\"~event-id~\"}";
push_stream_message_template "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\"}";
# subscriber may create channels on demand or only authorized
# (publisher) may do it?
push_stream_authorized_channels_only off;
push_stream_broadcast_channel_max_qtd 3;
server { server {
listen 80; listen 9080 default_server;
#listen 9443 ssl;
#ssl_certificate /usr/local/nginx/ssl/server.crt;
#ssl_certificate_key /usr/local/nginx/ssl/server.key;
server_name localhost; server_name localhost;
location /channels-stats { location /channels-stats {
...@@ -62,6 +79,7 @@ http { ...@@ -62,6 +79,7 @@ http {
# query string based channel id # query string based channel id
set $push_stream_channel_id $arg_id; set $push_stream_channel_id $arg_id;
# store messages in memory # store messages in memory
push_stream_store_messages on; push_stream_store_messages on;
...@@ -78,18 +96,35 @@ http { ...@@ -78,18 +96,35 @@ http {
# positional channel path # positional channel path
set $push_stream_channels_path $1; set $push_stream_channels_path $1;
# header to be sent when receiving new subscriber connection # header to be sent when receiving new subscriber connection
push_stream_header_template "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-store\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-cache\">\r\n<meta http-equiv=\"Pragma\" content=\"no-cache\">\r\n<meta http-equiv=\"Expires\" content=\"Thu, 1 Jan 1970 00:00:00 GMT\">\r\n<script type=\"text/javascript\">\r\nwindow.onError = null;\r\ndocument.domain = 'localhost';\r\nparent.PushStream.register(this);\r\n</script>\r\n</head>\r\n<body onload=\"try { parent.PushStream.reset(this) } catch (e) {}\">"; push_stream_header_template "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-store\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-cache\">\r\n<meta http-equiv=\"Pragma\" content=\"no-cache\">\r\n<meta http-equiv=\"Expires\" content=\"Thu, 1 Jan 1970 00:00:00 GMT\">\r\n<script type=\"text/javascript\">\r\nwindow.onError = null;\r\ntry{ document.domain = (window.location.hostname.match(/^(\d{1,3}\.){3}\d{1,3}$/)) ? window.location.hostname : window.location.hostname.split('.').slice(-2).join('.');}catch(e){}\r\nparent.PushStream.register(this);\r\n</script>\r\n</head>\r\n<body>";
# message template # message template
#push_stream_message_template "<script>p(~id~,'~channel~','~text~','~event-id~');</script>";
push_stream_message_template "<script>p(~id~,'~channel~','~text~');</script>"; push_stream_message_template "<script>p(~id~,'~channel~','~text~');</script>";
# footer to be sent when finishing subscriber connection # footer to be sent when finishing subscriber connection
push_stream_footer_template "</body></html>"; push_stream_footer_template "</body></html>";
# content-type # content-type
push_stream_content_type "text/html; charset=utf-8"; push_stream_content_type "text/html; charset=utf-8";
# subscriber may create channels on demand or only authorized }
# (publisher) may do it?
push_stream_authorized_channels_only off; location ~ /ev/(.*) {
push_stream_broadcast_channel_max_qtd 3; # activate subscriber mode for this location
push_stream_subscriber;
# positional channel path
set $push_stream_channels_path $1;
# activate event source support for this location
push_stream_eventsource_support on;
}
location ~ /lp/(.*) {
# activate long-polling mode for this location
push_stream_subscriber long-polling;
# positional channel path
set $push_stream_channels_path $1;
} }
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023