echo example - jquery-stream - echo example - comet streaming javascript library - google project...

2/24/12 EchoExample - jquery-stream - Echo Example - Comet Streaming JavaScript Library - Google Project…

1/6code.google.com/p/jquery-stream/wiki/EchoExample

Project Home Downloads Wiki Issues Source

Updated Aug 14, 2011 by [email protected]

My favorites ▼ | Sign in

jquery-streamComet Streaming JavaScript Library Search projects

Search Current pages for Search

EchoExample

Echo Example

Please, see ChatExample for practical use. This wiki will not be updated.

Echo Example

Echo Example

Web Page

WebSocket /HTTP Echo Server

Java - Servlet 3.0

Java - Servlet 3.0 and Jetty 8

Web Page

Web Page is an echo client.

Whenever user enters a message, the page makes JavaScript object containing it and send it to the echo server using the jQuery Stream, andwhen a message returns from the server, the page displays it.

According to the server support, the stream type may have to be set to http and its URL may have to be modified.

Since the web page is plain HTML page and the jQuery Stream is plain JavaScript library, they don't need any server-side support, so choose aserver implementation in WebSocket/HTTP Echo Server according to your preference.

/echo.html

<!DOCTYPE html><html> <head> <title>Echo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="./js/jquery-1.4.1.js"></script> <script type="text/javascript" src="./js/jquery.stream.js"></script> <script type="text/javascript"> $.stream.setup({enableXDR: true}); $(function() { $.stream("./echo", { open: function() { $("#textfield").removeAttr("disabled").focus(); }, message: function(event) { $("<p />").text(event.data).prependTo("#content"); }, error: function() { $("#textfield").attr("disabled", "disabled"); }, close: function() { $("#textfield").attr("disabled", "disabled");

} }); $("#textfield").keyup(function(event) { if (event.which === 13 && $.trim(this.value)) { $.stream().send({message: this.value}); this.value = ""; } }); }); </script> <style> body {padding: 0; margin: 0; font-family: 'Trebuchet MS','Malgun Gothic'; font-size: 62.5%; color: #333333} #editor {margin: 15px 25px;} #textfield {width: 100%; height: 28px; line-height: 28px; font-family: 'Trebuchet MS','Malgun Gothic'; border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;} #content {height: 100%; overflow-y: auto; padding: 0 25px;} #content p {margin: 0; padding: 0; font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;} </style> </head>



</head> <body> <div id="editor"> <input id="textfield" type="text" disabled="disabled" /> </div> <div id="content"></div> </body></html>

WebSocket/HTTP Echo Server

WebSocket/HTTP Echo Server is just a typical echo server which sends back the client's message through ws or http protocol.

See ServerSideProcessing for details about what methods do what.

If you have implemented the server logic using technology or platform not listed, please annotate it and create a issue to append that code to thiswiki.

Java - Servlet 3.0

The Servlet 3.0 specification includes support for asynchronous processing of request, but there is no support for WebSocket.

The following example runs with any servlet container implementing Servlet 3.0 such as Tomcat 7 and Jetty 8 only via HTTP protocol.

flowersinthesand.example.EchoServlet

package flowersinthesand.example;

import java.io.IOException;import java.io.PrintWriter;import java.util.Map;import java.util.UUID;import java.util.concurrent.ConcurrentHashMap;

import javax.servlet.AsyncContext;import javax.servlet.AsyncEvent;import javax.servlet.AsyncListener;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;

// Registers a servlet by newly introduced annotation, @WebServlet@WebServlet(urlPatterns = "/chat", asyncSupported = true)public class EchoServlet extends HttpServlet {

private static final long serialVersionUID = -8823775068689773674L;

private Map<String, AsyncContext> asyncContexts = new ConcurrentHashMap<String, AsyncContext>();

// GET method is used to open stream @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Rejects WebSocket opening handshake if ("websocket".equalsIgnoreCase(request.getHeader("Upgrade"))) { response.sendError(HttpServletResponse.SC_NOT_IMPLEMENTED); return; }

response.setCharacterEncoding("utf-8");

// Content-Type header response.setContentType("text/plain");

// Access-Control-Allow-Origin header response.setHeader("Access-Control-Allow-Origin", "*");

PrintWriter writer = response.getWriter();

// Id final String id = UUID.randomUUID().toString(); writer.print(id); writer.print(';');

// Padding for (int i = 0; i < 1024; i++) { writer.print(' '); } writer.print(';'); writer.flush();

// Starts asynchronous mode // AsyncContext, AsyncListener and AsyncEvent are used for asynchronous operation final AsyncContext ac = request.startAsync(); ac.setTimeout(5 * 60 * 1000);



ac.setTimeout(5 * 60 * 1000); ac.addListener(new AsyncListener() { public void onComplete(AsyncEvent event) throws IOException { asyncContexts.remove(id); }

public void onTimeout(AsyncEvent event) throws IOException { asyncContexts.remove(id); }

public void onError(AsyncEvent event) throws IOException { asyncContexts.remove(id); }

public void onStartAsync(AsyncEvent event) throws IOException {

} });

// Manages AsyncContext instances by the id asyncContexts.put(id, ac); }

// POST method is used to handle data sent by user via the stream @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");

// Finds AsyncContext instance by stream id AsyncContext ac = asyncContexts.get(request.getParameter("metadata.id")); if (ac == null) { return; }

// Close request means that browser closed this stream if ("close".equals(request.getParameter("metadata.type"))) { ac.complete(); return; }

String message = request.getParameter("message"); PrintWriter writer = ac.getResponse().getWriter();

// Sends message writer.print(message.length() + ";" + message + ";"); writer.flush(); }

}

Java - Servlet 3.0 and Jetty 8

Jetty is a servlet container, implements Servlet 3.0 and also provides WebSocket based on servlet.

Currently, Jetty 8.0.0 M3 does not seem to support new annotations.

web.xml

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">

<servlet> <servlet-name>Echo</servlet-name> <servlet-class>flowersinthesand.example.EchoServlet</servlet-class> <async-supported>true</async-supported> </servlet>

<servlet-mapping> <servlet-name>Echo</servlet-name> <url-pattern>/echo</url-pattern> </servlet-mapping>

</web-app>

flowersinthesand.example.EchoServlet

package flowersinthesand.example;

import java.io.IOException;import java.io.PrintWriter;import java.util.Map;import java.util.UUID;import java.util.concurrent.ConcurrentHashMap;



import javax.servlet.AsyncContext;import javax.servlet.AsyncEvent;import javax.servlet.AsyncListener;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;

import org.eclipse.jetty.util.UrlEncoded;import org.eclipse.jetty.websocket.WebSocket;import org.eclipse.jetty.websocket.WebSocketServlet;

// WebSocketServlet extending HttpServlet is base classpublic class EchoServlet extends WebSocketServlet {

private static final long serialVersionUID = -8823775068689773674L;

private Map<String, AsyncContext> asyncContexts = new ConcurrentHashMap<String, AsyncContext>();

@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); response.setContentType("text/plain"); response.setHeader("Access-Control-Allow-Origin", "*");

PrintWriter writer = response.getWriter();

final String id = UUID.randomUUID().toString(); writer.print(id); writer.print(';');

for (int i = 0; i < 1024; i++) { writer.print(' '); } writer.print(';'); writer.flush();

final AsyncContext ac = request.startAsync(); ac.setTimeout(5 * 60 * 1000); ac.addListener(new AsyncListener() { public void onComplete(AsyncEvent event) throws IOException { asyncContexts.remove(id); }

public void onTimeout(AsyncEvent event) throws IOException { asyncContexts.remove(id); }

public void onError(AsyncEvent event) throws IOException { asyncContexts.remove(id); }

public void onStartAsync(AsyncEvent event) throws IOException {

} }); asyncContexts.put(id, ac); }

@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");

AsyncContext ac = asyncContexts.get(request.getParameter("metadata.id")); if (ac == null) { return; }

if ("close".equals(request.getParameter("metadata.type"))) { ac.complete(); return; }

String message = request.getParameter("message"); PrintWriter writer = ac.getResponse().getWriter();

writer.print(message.length() + ";" + message + ";"); writer.flush(); }

// Handles WebSocket connection @Override public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {

// WebSocket for receiving text messages return new WebSocket.OnTextMessage() {

Connection connection;



Connection connection;

@Override public void onOpen(Connection connection) { this.connection = connection; }

@Override public void onClose(int closeCode, String message) {

}

@Override public void onMessage(String data) { // Decodes query string UrlEncoded parameters = new UrlEncoded(data); try { connection.sendMessage(parameters.getString("message")); } catch (IOException e) { throw new RuntimeException(e); } }

}; }

}

Comment by [email protected], May 30, 2011

could you please add comments on what methods do what... ? It would be helpful for newbies like me...

Comment by project member [email protected], May 31, 2011

Okay, I'll do that. This wiki will be completed after the release of jQuery Stream 1.1.

Comment by [email protected], Jun 10, 2011

So, what's "deprecated" about this example??

Comment by project member [email protected], Jun 12, 2011

Nothing. I actually meant 'incomplete', not 'deprecated'.


Hi, I have a problem with the timeout, because when the timeout is finished, it creates a new AsyncContext? instance. Why?


Hello, Because the Stream object will reconnect whenever connection is closed, unless 'reconnect' option is false.


Thanks, I should read everything before asking. Now I have downloaded the version 1.1 and with the same code, in chrome is recived error 501 fromthe server.


Okay, that's because the chrome support WebSocket? but the server doesn't, then you should add type option with a value of http to options as of1.1.

from http://code.google.com/p/jquery-stream/wiki/API#jQuery.stream

$.stream("./echo", {

type: "http" // ...

});




hi! I have a problem with IE8 and XDomainRequest, because when it calls to the server, it generates a new session in the server, so I loose session'sattributes, id, ... Is there any way to preserve the old session?


XDomainRequest excludes cookies when sending so that the session is not maintained in most cases. For details, seehttp://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

Instead of using cookies, you can rewrite a URL to maintain session. it can be used when client's cookies are turned off.

With Java Servlet

$.stream("echo;jsessionid=${pageContext.session.id}", {alias: 'echo'});


thanks!! doing that now it's running perfectly!!


Sure, I recommend you to be aware of session fixation attack.

Comment by [email protected], Jul 6, 2011

Hey, any .Net examples that we can learn?

Comment by project member [email protected], Jul 6, 2011

Sorry, I have never done .Net.

► Sign in to add a comment

©2011 Google - Terms - Privacy - Project Hosting Help

Powered by Google Project Hosting

echo example - jquery-stream - echo example - comet streaming javascript library - google project...

Documents