This document discusses integrating WebSocket functionality into TYPO3 Flow applications. It begins with introductions of the presenting team and an overview of TYPO3 Flow. It then defines WebSocket, explaining why and how it is used for real-time communication. The document demonstrates how to configure WebSocket support in TYPO3 Flow by creating a package, and includes a demo of a simple chat application using WebSockets. It concludes that TYPO3 Flow is an easy to use PHP framework well-suited for complex applications, and WebSocket enables real-time interactions in web applications.

1. WebSocket in
TYPO3 Flow
WebSocket
By: Ninja Bug
28th February 2014

2. Agenda
I. Team Introduction
II. TYPO3 Flow
III. WebSocket
IV. Config WebSocket to Flow
V. Demo
VI. Conclusion

3. Team Introduction
3
29

4. Ninja Bug
■ Form in 2013
■ 3 core team
■ First generation of agile team at Web
Essentials
■ Deliver working software
■ Working with TYPO3, TYPO3 Flow,
TYPO3 Neos ...
4
29

5. Ngeth Chanthorn
■ Certified TYPO3 Integrator
■ From Samrong, Takeo
■ Like TYPO3 Coding,
Typoscript Code
■ Working at Web Essentials
■ Email: chanthorn@web-essentials.asia
5
29

6. Nim Chanthou
■ Web Developer
■ From Samrong, Takeo
■ Like Playing Pool,
Football, PHP code
■ Working at Web Essentials
■ Email: chanthou@web-essentials.asia
6
29

7. John Odom
■ Web Developer
■ From Phnom Penh
■ Like Javascript, PHP
Google and Facebook API
■ Working at Web Essentials
■ Email: odom@web-essentials.asia
7
29

8. TYPO3 Flow
■ What is TYPO3 Flow?
■ Why TYPO3 Flow?
■ Requirements
■ Structure
8
29

9. What is TYPO3 Flow?
■ PHP-based Web Application Platform
■ Creates excellent web solutions
■ Fast results!
■ Keep your head clear and let you focus on the
essentials part
■ Reliable foundation for complex applications
9
29

10. Why TYPO3 Flow?
■ Well-suited for enterprise-grade applications
■ Easy-to-read source code
■ Stability, Secure code
■ User experience
■ Backed by one of the biggest PHP
communities (6000 + contributors)
10
29

11. Requirements
Supported Operating System:
■ Linux
■ Mac OSX
■ Windows
11
29

12. Requirements
Supported HTTP server platforms:
■ Apache with mod_rewrite
module enabled
12
29

13. Requirements
PHP:
■ Requires PHP 5.3.2 or higher
Supported Database Systems:
■ All systems supported by Doctrine DBAL can
be used with TYPO3 Flow
13
29

14. Directory Structure
Configuration/
The global configuration folder, grouped by contexts
Data/
Persistent and temporary data, including caches
Packages/
Contains sub directories which in turn
contain package directories
Packages/Framework/
The Framework directory contains packages of the TYPO3 Flow
distribution.
Packages/Application/
The Application directory contains your own / application specific
packages.
Packages/Libraries/
The Libraries directory contains 3rd party packages.
Web/
Public web root
3
14
29
29

15. WebSocket
■
■
■
■
■
■
■
What is WebSocket?
Why use WebSocket?
Where is it use?
Browser Support
Basically work
PHP WebSocket (Server Side)
Javascript API (Client Side)
15
29

16. What is WebSocket?
■ Supported in HTML5 browsers
■ Communication Protocol
■ Real time interaction
■ Full Duplex communication channel
16
29

17. Why WebSocket?
17
29

18. Where is it use?
■ Chat Application
■ Online Game
■ Streaming Application
- Real time news
- Real time alert
■ Other
18
29

19. Browser Support
■ Chrome 4+
■ Safari 5+
■ Firefox 4+
■ Opera 10.7+
■ IE 10+
19
29

20. Basically Work
20
29

21. PHP WebSocket (Server Side)
■ Handshake
■ Unmasking/Encoding
data frame
■ Pushing data
21
29

22. Javascript API (Client Side)
■ Connection
■ Receive
■ Leave
22
29

23. Javascript API (Client Side)
websocket = new WebSocket(‘ws://address:
port’);
websocket.onopen = function(evt) {}
websocket.onmessage = function(evt) {
// use evt.data
}
websocket.onclose = function(evt) {}
websocket.onerror = function(evt) {}
23
29

24. Config WebSocket to Flow
Understand Structure of TYPO3 Flow
Where we put our package.
(Flow.WebSocket)
24
29

25. Config WebSocket to Flow
Understand Structure of Flow Package
Where we put WebSocket
Library
HTML Template
Javascript Function
25
29

26. Demo
Hi! Could you go to
simple chat
application with
me?
Okay! Lets go!
26
29

27. Conclusion
■ TYPO3 Flow is a framework base on PHP
which easy to use and control
■ WebSocket is a new feature of HTML5
which mostly use for real time
interaction
27
29

28. What … ?
How … ?
When … ?
Why … ?
... ?
28
29

29. References
TYPO3 Flow
■ http://flow.typo3.org/home
https://github.com/chanthornngeth/Distribution.git
WebSocket
■ http://srchea.com/blog/tag/websocket/
■ http://www.php.net/manual/en/book.sockets.php
■ http://www.slideshare.net/PaulFryer/web-sockets-8963751
■ https://code.google.com/p/pywebsocket/
■ Book: HTML5 Solutions (Chapter 9: HTML5 WebSocket)
29
29