16 Routes may include a variety of matching conditions, such as the user agent:, :host_name and :provides: get /, :provides => [ rss, atom, xml ] do builder :feed Sing an event stream from the source is a matter of constructing a plaintext response, served with a text/event-stream Content-Type, that follows the Server Sent Event (SSE) format. Sigamos: post / do 18 settings.connections.each { out out << "data: #{params[:msg]}\n\n" } # response without entity body No Content The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. If the client is a user agent, it SHOULD NOT change its document view from that which caused the request to be sent. This response is primarily inted to allow input for actions to take place without causing a change to the user agent s active document view, although any new or updated metainformation SHOULD be applied to the document currently in the user agent s active view. The 204 response MUST NOT include a message-body, and thus is always terminated by the first empty line after the header fields END layout 25 <html> 26 <head> 27 <title>super Simple Chat with Sinatra</title> 28 <meta charset="utf-8" /> 29 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 30 </head> 31 <body><%= yield %></body> 32 </html> The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. The Google Hosted Libraries is a content distribution network for the most popular, open-source JavaScript libraries. To add a library to your site, simply use <script> tags to include the library. See https://developers.google.com/speed/libraries/devguide: jquery snippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> site: versions: 1.8.3, 1.8.2, 1.8.1, 1.8.0,... note: and are not hosted due to their short and unstable lives in the wild. 15

17 jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jquery.min.js is a minified version of the JQuery JavaScript library, which provides a number of basic functions for websites. 34 login 35 <form action= / > 36 <label for= user >User Name:</label> 37 <input name= user value= /> 38 <input type= submit value="go!" /> 39 </form> chat 42 <pre id= chat ></pre> <script> 45 // reading 46 var es = new EventSource( /stream ); 47 es.onmessage = function(e) { $( #chat ).app(e.data + "\n") }; // writing 50 $("form").live("submit", function(e) { 51 $.post( /, {msg: "<%= user %>: " + $( #msg ).val()}); 52 $( #msg ).val( ); $( #msg ).focus(); 53 e.preventdefault(); 54 }); 55 </script> <form> 58 <input id= msg placeholder= type message here... /> 59 </form> Server-Sent Events (SSE) are a standard describing how servers can initiate data transmission towards clients once an initial client connection has been established. They are commonly used to s message updates or continuous data streams to a browser client and designed to enhance native, cross-browser streaming through a JavaScript API called EventSource, through which a client requests a particular URL in order to receive an event stream. The idea behind SSEs is natural: a web app subscribes to a stream of updates generated by a server and, whenever a new event occurs, a notification is sent to the client. When communicating using SSEs, a server can push data to your app whenever it wants, without the need to make an initial request. In other words, updates can be streamed from server to client as they happen. SSEs open a single unidirectional channel between server and client. A Ruby/EventMachine based server implementation for WebSocket and Server-Sent Events is provided by Cramp. The EventSource interface is used to manage server-sent events. The server-sent event API is contained in the EventSource interface. To open a connection to the server to begin receiving events from it, you create a new EventSource object, specifying the URI of a script that generates the events: 16

19 We start with the dollar sign and parentheses: $("form") to specify a selector. The dollar sign ( $ ) is simply shorthand for jquery. With $("form") we select all the elements with tag name form.app( content [, content] ) content: DOM element, HTML string, or jquery object to insert at the of each element in the set of matched elements. content: One or more additional DOM elements, arrays of elements, HTML strings, or jquery objects to insert at the of each element in the set of matched elements..live( events, handler(eventobject) ) Returns: jquery Description: Attach an event handler for all elements which match the current selector, now and in the future. events: A string containing a JavaScript event type, such as click or keydown. As of jquery 1.4 the string can contain multiple, space-separated event types or custom event names. handler(eventobject): A function to execute at the time the event is triggered. jquery.post( url [, data] [, success(data, textstatus, jqxhr)] [, datatype] ) url: A string containing the URL to which the request is sent. data: A map or string that is sent to the server with the request. success(data, textstatus, jqxhr): A callback function that is executed if the request succeeds. datatype: The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html). This is an easy way to s a simple POST request to a server. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). $.post() returns the XMLHttpRequest that it creates. In most cases you won t need that object to manipulate directly, but it is available if you need to abort the request manually..val Get the input value of the first matched element. A value is returned for all input elements, including selects and textareas. For multiple selects an array of values is returned. For example: $( select.foo option:selected ).val(); // get the value from a dropdown select $( select.foo ).val(); // get the value from a dropdown select even eas $( input:checkbox:checked ).val(); // get the value from a checked checkbox $( input:radio[name=bar]:checked ).val(); // get the value from a set of radio buttons.focus( handler(eventobject) ).focus( [eventdata], handler(eventobject) ).focus() handler(eventobject): A function to execute each time the event is triggered. eventdata: A map of data that will be passed to the event handler. 18

20 This method is a shortcut for.trigger( focus ). The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be exted to include all element types by explicitly setting the element s tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element. Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events. event.preventdefault() Returns: undefined Description: If this method is called, the default action of the event will not be triggered. For example, clicked anchors will not take the browser to a new URL. We can use event.isdefaultprevented to determine if this method has been called by an event handler that was triggered by this event. Enlaces Relacionados Simple Chat Application using the Sinatra Streaming API Stream Updates With Server-Sent Events Using server-sent events EventSource Chat Server with server-sent Events A shared canvas where multiple clients can draw lines using EM-Websocket JQuery documentation What is the Document Object Model? JavaScript and HTML DOM Reference Código Completo del Chat [17:51][~/srcSTW/streaming/chat_with_streaming(master)]$ cat chat.rb # coding: utf-8 require sinatra set server: thin, connections: [] get / do halt erb(:login) unless params[:user] erb :chat, locals: { user: params[:user].gsub(/\w/, ) } get /stream, provides: text/event-stream do stream :keep_open do out settings.connections << out out.callback { settings.connections.delete(out) } post / do settings.connections.each { out out << "data: #{params[:msg]}\n\n" } 204 # response without entity body 19

22 enviar WebSockets Que es WebSocket y para que sirve WebSocket es una tecnología que proporciona un canal de comunicación bidireccional y full-duplex sobre un único socket TCP. Está diseñada para ser implementada en navegadores y servidores web, pero puede utilizarse por cualquier aplicación cliente/servidor. The WebSocket specification developed as part of the HTML5 initiative introduced the Web- Socket JavaScript interface, which defines a full-duplex single socket connection over which messages can be sent between client and server. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management. One of the more unique features WebSockets provide is its ability to traverse firewalls and proxies, a problem area for many applications. Comet-style applications typically employ long-polling as a rudimentary line of defense against firewalls and proxies. The technique is effective, but is not well suited for applications that have sub-500 millisecond latency or high throughput requirements. Plugin-based technologies such as Adobe Flash, also provide some level of socket support, but have long been burdened with the very proxy and firewall traversal problems that WebSockets now resolve. A WebSocket detects the presence of a proxy server and automatically sets up a tunnel to pass through the proxy. The tunnel is established by issuing an HTTP CONNECT statement to the proxy server, which requests for the proxy server to open a TCP/IP connection to a specific host and port. Once the tunnel is set up, communication can flow unimpeded through the proxy. Since HTTP/S works in a similar fashion, secure WebSockets over SSL can leverage the same HTTP CONNECT technique. Note that WebSockets are just beginning to be supported by modern browsers (Chrome now supports WebSockets natively). However, backward-compatible implementations that enable today s browsers to take advantage of this emerging technology are available. En el lado del cliente, WebSocket está ya implementado en Mozilla Firefox 8, Google Chrome 4 y Safari 5, así como la versión móvil de Safari en el ios Negociación del protocolo WebSocket Para establecer una conexión WebSocket, el cliente manda una petición de negociación WebSocket, y el servidor manda una respuesta de negociación WebSocket, como se puede ver en el siguiente ejemplo: Petición del navegador al servidor: Respuesta del servidor: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Connection: Upgrade Sec-WebSocket-Key2: Y3 1.P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 46546xW%0l 1 5 Origin: ^n:ds[4u HTTP/ WebSocket Protocol Handshake Upgrade: WebSocket Sec-WebSocket-Origin: Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS y:g*co,wxa- 21

Hoja 1 DE 9 Connecting Cloudino Connector to FIWARE IoT 1. What is FIWARE IoT FIWARE is an open software ecosystem provided by the FIWARE Community (htttp://www.fiware.org). FIWARE exposes to developers

manual de servicio nissan murano z51 Reference Manual To understand featuring to use and how to totally exploit manual de servicio nissan murano z51 to your great advantage, there are several sources of

Your response will be used by Facebook to improve your experience. You can't edit the details of this audience because it was created by someone else and shared with you. La respuesta será usada por Facebook

iclef-2002 at Universities of Alicante and Jaen University of Alicante (Spain) ! Introduction! Passage Retrieval Systems! IR-n system! IR-n system at iclef-2002! Conclusions and Future works ! Introduction!

Setting Up an Apple ID for your Student You will receive an email from Apple with the subject heading of AppleID for Students Parent/Guardian Information Open the email. Look for two important items in

Welcome to lesson 2 of the The Spanish Cat Home learning Spanish course. Bienvenidos a la lección dos. The first part of this lesson consists in this audio lesson, and then we have some grammar for you

& An explanation by Sr. Jdan direct object pronouns We usually use Direct Object Pronouns to substitute f it them in a sentence when the it them follows the verb. Because of gender, him and her could also

Learning Masters Fluent: Wind, Water, and Sunlight What I Learned List the three most important things you learned in this theme. Tell why you listed each one. 1. 2. 3. 22 Wind, Water, and Sunlight Learning

1. Instalar Cygwin Según: http://www.cygwin.com/ What Is Cygwin? Instalación y Configuración de Magic en Windows.. Cygwin is a Linux-like environment for Windows. It consists of two parts: A DLL (cygwin1.dll)