GWT + HTML5 SSE(Server Push)

GWT + HTML5 SSE(Server Push)

Read b/m link to know what is SSE
http://www.html5rocks.com/en/tutorials/eventsource/basics/

To integrate SSE in normal GWT Apps, follow b/m codes:

GWT Java


public class SSETest extends VerticalPanel {
TextBox textTo = new TextBox();
TextArea textMsg = new TextArea();
static TextArea textArea = new TextArea();
Button btnStart = new Button("Login");
Button btnStop = new Button("Stop");
Button btnSend = new Button("send");


public SSETest() {


textArea.getElement().setId("result");
textArea.setSize("400", "300");


add(btnStart);
add(btnStop);
add(textTo);
add(textMsg);
add(btnSend);


add(textArea);


btnStart.addClickHandler(new ClickHandler() {


@Override
public void onClick(ClickEvent arg0) {
initSSE(LoginDashboardModule.userName, "", "");
}
});
btnStop.addClickHandler(new ClickHandler() {


@Override
public void onClick(ClickEvent arg0) {
stopSSE();
}
});
btnSend.addClickHandler(new ClickHandler() {


@Override
public void onClick(ClickEvent arg0) {
sendSSE(LoginDashboardModule.userName, textTo.getText(),
textMsg.getText());
}
});


}


public static void updTextArea(String str) {
System.out.println("str=" + str);
if (str.trim().length() > 0)
textArea.setText(textArea.getText().trim() + " \n " + str);
}


public static native void initSSE(String from, String to, String msg) /*-{
$wnd.callJavaTextAreaUpd = $entry(@com.eiw.client.SSETest::updTextArea(Ljava/lang/String;));
$wnd.initSSE(from,null,null);
}-*/;


public static native void sendSSE(String from, String to, String msg) /*-{
$wnd.sendSSE(from, to, msg);
}-*/;


public static native void stopSSE() /*-{
$wnd.stopSSE();
}-*/;
}







Create a new JS and add it to the index.html


var source;
function initSSE(from, to, msg) {
if (source != null)
source.close();
if (typeof (EventSource) !== "undefined") {
source = new EventSource(
"http://localhost:8080/fleettracking/server?from=" + from);
source.onmessage = function(event) {
callJavaTextAreaUpd(event.data);
};
} else {
alert('Sorry, your browser does not support server-sent events...');
}
}


function sendSSE(from, to, msg) {
if (source != null)
source.close();
if (typeof (EventSource) !== "undefined") {
source = new EventSource(
"http://localhost:8080/fleettracking/server?from=" + from
+ "&to=" + to + "&msg=" + msg);
source.onmessage = function(event) {
callJavaTextAreaUpd(event.data);
initSSE(from, null, null);
};
} else {
alert('Sorry, your browser does not support server-sent events...');
}
}


function stopSSE() {
source = new EventSource("http://localhost:8080/fleettracking/server?from="
+ from + "&msg=clear");
source.onmessage = function(event) {
callJavaTextAreaUpd(event.data);
};
}


index.html

<script type="text/javascript" src="index.js"></script>

ServerServlet java

public class ServerServlet extends HttpServlet implements SingleThreadModel {

PrintWriter out = null;

Map<String, List<String>> map = new HashMap<String, List<String>>();

public void doGet(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

synchronized (this) {

System.out.println("Servlet thread...");

resp.setContentType("text/event-stream");

out = resp.getWriter();

String from = req.getParameter("from");

String to = req.getParameter("to");

String msg = req.getParameter("msg");

if ((from == null))

return;

if (from.equalsIgnoreCase(""))

return;

if (msg != null && msg.equalsIgnoreCase("clear")) {

map.clear();

out.print("data: {" + "map cleared}\n\n");

out.flush();

out.close();

}

// if (from.equalsIgnoreCase("tabouk-FM")) {

// System.out.println(to + "|" + msg + "|" + new Date());

// }

// out.print("data: {" + from + "," + to + "," + msg + "," +

// "}\n\n");

// // out.print("retry: 30000\n"); // set the timeout to 10 mins in

// out.flush();

// out.close();

// login

if (map.get(from) == null) {

map.put(from, new ArrayList<String>());

// out.print("data:  Welcome \n\n");

out.print("data: {" + "welcome " + from + "!}\n\n");

out.flush();

out.close();

}

// Send chat

else {

List<String> strs = map.get(to);

if (map.get(to) == null || msg == null) {

} else {

strs.add("From=" + from + ",Msg=" + msg);

map.put(to, strs);

out.print("data:" + "Msg Sent" + new Date() + "\n");

}

// Receive chat

List<String> strsFrom = map.get(from);

for (int i = 0; i < strsFrom.size(); i++) {

out.print("data:" + strsFrom.get(i) + new Date() + "\n");

}

out.print("data:" + "\n\n");

map.get(from).clear();

out.flush();

out.close();

}

}

}

public void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

doGet(req, resp);

}

}

Web xml

<servlet>

<servlet-name>server</servlet-name>

<servlet-class>com.eiw.server.ServerServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>server</servlet-name>

<url-pattern>/server</url-pattern>

</servlet-mapping>

Steps to simulate the working of the Project

> Login into the Application with the user ids you want to chat

> Press the "Login" Button.

> The text Area will show the welcome message

> Type the userid & Text Message and press the "send" button .

> Now youo can see the message on the other id to whom it was sent.