jseteny

1. JEE KURZUS 10. HÉT
SETENY.JANOS@TIGRA.HU
1

2. WebSocket és Push
1. Kétirányú duplex kommunikáció egyetlen TCP socketen
2. Az előző órákon használt HTTP protokol egyirányú request / response
protokol
3. Jellemzően Push - a kliens irányába menő adatforgalomra használják
4. Lásd az alábbi példaalkalmazásokat
http://www.primefaces.org/showcase/push/counter.xhtml
http://www.primefaces.org/showcase/push/chat.xhtml
http://www.primefaces.org/showcase/push/notify.xhtml
http://www.primefaces.org/showcase/push/viewparam.xhtml
http://www.primefaces.org/showcase/push/chart.xhtml
http://www.primefaces.org/showcase/push/photoShare.xhtml
5. https://hu.wikipedia.org/wiki/WebSocket
6. The Java EE Tutorial, Chapter 18 Java API for WebSocket
2

3. pom.xml - Maven függőségek
<!-- WebSocket és Push támogatás -->
<dependency>
<groupId>org.atmosphere</groupId>
<artifactId>atmosphere-runtime</artifactId>
<version>2.4.7</version>
</dependency>
<!-- JavaServer Faces komponensek Push támogatással -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.0</version>
</dependency>
<!-- response.sendRedirect(“index.html”);-hez kell -->
<dependency>
<groupId>org.jboss.spec.javax.servlet</groupId>
<artifactId>jboss-servlet-api_3.1_spec</artifactId>
<scope>provided</scope>
</dependency>
3

4. web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://
xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>PrimePushServlet</servlet-name>
<servlet-class>org.primefaces.push.PushServlet</servlet-class>
<init-param>
<param-name>org.atmosphere.cpr.broadcasterCacheClass</param-name>
<param-value>org.atmosphere.cache.UUIDBroadcasterCache</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>PrimePushServlet</servlet-name>
<url-pattern>/primepush/*</url-pattern>
</servlet-mapping>
</web-app>
4

5. MemberRegistration.java
public void register(Member member) throws Exception {
...
EventBus eventBus = EventBusFactory.getDefault().eventBus();
eventBus.publish("/reload", 1234);
}
// Nem működik a MemberController-ben
@Schedule(hour = "*", minute = "*", second = "*/10")
public void updateTime() {
EventBus eventBus = EventBusFactory.getDefault().eventBus();
Date date = Calendar.getInstance().getTime();
eventBus.publish("/date", String.valueOf(date));
}
5

6. DateResource.java
@PushEndpoint("/date")
public class DateResource {
@OnMessage(encoders = {JSONEncoder.class})
public String onMessage(Date date) {
DateFormat dateFormat =
new SimpleDateFormat("yyyy.MM.dd. HH:mm:ss");
return dateFormat.format(date);
}
}
6

7. MemberController.java
public void register() throws Exception {
...
HttpServletResponse response =
(HttpServletResponse) facesContext
.getExternalContext()
.getResponse();
response.sendRedirect("index.html");
facesContext.responseComplete();
}
7

8. index.xhtml - Allocation list
<h1>Allocation list</h1>
<h:form id="form">
<h:outputText id="out" styleClass="ui-widget display" />
<p:commandButton value="Add" action="add?faces-redirect=true" />
</h:form>
<p:socket onMessage="handleDate" channel="/date" />
<script type="text/javascript">
function handleDate(data) {
$('.display').html(data);
}
</script>
<p:socket onMessage="handleReload" channel="/reload" />
<script type="text/javascript">
function handleReload() {
location.reload();
}
</script>
<h2>Allocations</h2>
8

9. add.xhtml - Add Allocation
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
template="/WEB-INF/templates/default.xhtml">
...
<h:form id="reg">
<h2>Allocation Registration</h2>
<p>Enforces annotation-based constraints defined on the
model class.</p>
<h:panelGrid columns="3" columnClasses="titleCell">
...
<h:outputLabel for="start" value="Start:"/>
<h:inputText id="start"
a:placeholder="2016-10-13 00:00"
value="#{newAllocation.start}">
<f:converter converterId="myDateTimeConverter"/>
</h:inputText>
<h:message for="start" errorClass=“invalid"/>
...
</h:panelGrid>
...
</ui:composition>
9

10. 2. beadandó
1. Az első beadandót kell továbbfejleszteni
2. A feladat lényeges része a csapatjáték
3. Szükséges lesz további kérdésekkel pontosítani
a következő lapon lévő feladatkitűzést
4. Aki 2 kérdést fel tesz a facebook csoportban az
egy jeggyel jobbat kap erre a beadandóra
5. Aki technikai kérdésre helyes választ ad az még
egy jeggyel jobbat kap
10

11. Feladatkitűzés 1. lap
1. Töb terem kezelése:
A menüben fölül lehessen 3 terem közül választani
2. A lista fölött lehessen rádiógombokkal ezeket a szűrési
föltételeket választani: ma, ez a hét, ez a hónap, összes
3. Foglalás törlése
4. Foglalás módosítása (Ez a legkevesebbet érő funkció. Ha a
többi funkció jól sikerült enélkül is lehet 5-öst kapni.)
5. Ne lehessen egymást átfedő intervallumokat foglalni
6. A minimálisan foglalható intervallum 15 perc
7. Ennél kisebb foglalást nem szabad elfogadni
11

12. Feladatkitűzés 2. lap
1. A lista fölött egy Új foglalás nevű gomb legyen
2. Ennek megnyomására váltsunk egy olyan lapra, ahol
meg lehet adni az új foglalás mezőinek értékeit
3. Ugyanezt a lapot használjuk foglalás módosítására is
4. A lista lapra kell visszatérni sikeres foglalás esetén
5. A lista lapon jelenjen meg a pontos idő, amit 15
másodpercenként frissíteni kell
6. A lista lapot akkor is frissíteni kell, ha az adott szerverre
kapcsolódó más fölhasználó vett föl egy új foglalást
12

13. Feladatkitűzés 3. lap
<h:inputText id="start"
a:placeholder="2016-10-13 00:00"
value="#{newAllocation.start}">
<f:converter converterId="myDateTimeConverter"/>
</h:inputText>
13
Az alábbi megoldással és az alábbi formátumban
kell a start és end dátumot és időt bekérni.
Ennek megfelelő konverter osztályt kell írni és
myDateTimeConverter néven eléhetővé tenni.