Skip to content

Latest commit

 

History

History
214 lines (172 loc) · 6.96 KB

event_source.textile

File metadata and controls

214 lines (172 loc) · 6.96 KB
Raw

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 to the 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:

    location /pub {
        # activate publisher (admin) mode for this location
        push_stream_publisher admin;

        # query string based channel id
        push_stream_channels_path               $arg_id;
    }

    location ~ /ev/(.*) {
        # activate event source mode for this location
        push_stream_subscriber eventsource;

        # positional channel path
        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;
    }

Client:

<!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>

Using Channels by argument

By default pushstream.js send the desired channels to the server as part of the url.
If needed you can change this behavior changing the javascript usage, like the example bellow, to not set the location as a regular expression.

Server:

    location /pub {
        # activate publisher (admin) mode for this location
        push_stream_publisher admin;

        # query string based channel id
        push_stream_channels_path               $arg_id;
    }

    location /ev {
        # activate event source mode for this location
        push_stream_subscriber eventsource;

        # positional channel path
        push_stream_channels_path                   $arg_channels;
        # message template
        push_stream_message_template                "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\"}";

        # ping frequency
        push_stream_ping_message_interval           10s;
    }

Client:

<!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",
      channelsByArgument: true,
      channelsArgument: 'channels' //this is the default value, you have to change it to be the same value used on push_stream_channels_path directive
    });
    pushstream.onmessage = messageReceived;
    pushstream.addChannel('ch1');
    pushstream.connect();
    // ]]>
    </script>
</body>
</html>

Getting old messages

To get old messages you can set a backtrack, an event id or a time in the past.
To proper work on reconnections you should set ~tag~ and ~time~ on the message template, and configure the server to receive the values.

Server:

    location /pub {
        # activate publisher (admin) mode for this location
        push_stream_publisher admin;

        # query string based channel id
        push_stream_channels_path               $arg_id;

        # store messages in memory
        push_stream_store_messages              on;
    }

    location ~ /ev/(.*) {
        # activate event source mode for this location
        push_stream_subscriber eventsource;

        # positional channel path
        push_stream_channels_path                   $1;

        push_stream_last_received_message_time      "$arg_time";
        push_stream_last_received_message_tag       "$arg_tag";

        # message template
        push_stream_message_template                "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\",\"tag\":\"~tag~\",\"time\":\"~time~\"}";

        # ping frequency
        push_stream_ping_message_interval           10s;

    }

Client:

<!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",
      messagesPublishedAfter: 5,
      messagesControlByArgument: true
    });
    pushstream.onmessage = messageReceived;
    pushstream.addChannel('ch1');
    pushstream.connect();
    // ]]>
    </script>
</body>
</html>

Observations:

  • push_stream_message_template should be exactly like as the example to be used with PushStream class
  • WebSocket, EventSource and Forever iFrame may be combined setting /ws, /sub and /ev locations on same server and setting modes: “websocket|eventsource|stream” on client. With that if the browser supports Websocket or Event Source, it will use it, if not it will use iFrame, following the order on modes attribute.