hwios websocket cms explained
DESCRIPTION
HWIOS is a html5 websocket CMS framework, which make realtime web-applications easy to develop, and efficient to use.TRANSCRIPT
![Page 1: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/1.jpg)
HWIOS
http://hwios.org
![Page 2: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/2.jpg)
About
![Page 3: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/3.jpg)
● Started in 2009● 2 years of 1 FTE development so far● Python based● LGPL license● HTML5 browser engines only● Tested on Chromium/Chrome
General information
![Page 4: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/4.jpg)
● Realtime multi user interaction● Presence ● Activity awareness● Realtime collaboration● Requested & pushed data● Bookmarking/sharing of websocket resources● Networked GUI for other services
Concepts
![Page 5: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/5.jpg)
● MessengerChat, Activity, link invite, Whois
● Profilesprofile management, register/login, details
● Wiki: Collaborative editing, history, wiki links visualisation
● Blog: WYSIWYG, comments, file manager
● Teknon distributed service management
● PagesCollaborative editing custom CMS pages (development)
● SlideCollaborative drawing, approach to slideshow cocreation (development)
Application modules
![Page 6: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/6.jpg)
● Build on top of Twisted & Django● PyPy JIT compatible● Lightweight JSON url routing protocol● Flexible regex based URL handling client/server side● JS/Py event observing for common events● View tracking & navigation bar URL support● I18n user specific language support● Jquery & friends● Consistent UI widgets, based on Jquery UI ● RequireJS modules & optimization workflow● Structured sphinx documentation
Framework
![Page 7: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/7.jpg)
Realtime Suitability
![Page 8: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/8.jpg)
Browser ServerSYN, ACK
Browser ServerSYN
Browser ServerACK
Transport considerations
Browser ServerDATA
Step 1:
Step 2:
Step 3:
Step 4:
Browser ServerFIN,ACK
Browser ServerACK
Browser ServerFIN,ACK
BrowserACK
Server
Step 1:
Step 2:
Step 3:
Step 4:
TCP Connect TCP Disconnect
Persistent websocket connection: 1. TCP Connect● Send/receive data from/to browser● Send/receive data from/to server● ...TCP Disconnect
HTTP request/response: 1. TCP Connect2.Send data to browser3.Receive data from server4.TCP Disconnect● Each HTTP request requires more packet traffic, due to connect and disconnect, which increases latency
compared to a persistent connection.● HTTP is very useful for it's original purpose; fast and efficient traffic of data between a web of HTTP servers
and the user browser.● HTTP has a relatively high latency, header data overhead and a rigid flow order of data, which makes it less
efficient for realtime web applications that rely on bidirectional communication and sending frequent, small data updates.
● Realtime webapplications benefit from a hybrid approach, where JSON formatted data flows through a websocket connection, and web resources like image/css/js files are retrieved with HTTP using the browser DOM parser.
![Page 9: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/9.jpg)
CMS dataflow chartMulti page HTTP CMS
User Interface
ProcessXHR request
HTTP Response
Process Navbar URL
Render main tpl
HTTP Request
HTTP (XHR)
JS
Click URL
DOM Image/CSS/JSResources
HTTP
CSSHTTP
HTTP
Single page WS CMS
User Interface
ProcessWS request
HTTP Response
Process Navbar URL
Render bootstrap tpl
HTTP Request
JS
Click URL
DOM Image/CSS/JSResources
HTTP
CSSHTTP
HTTP
URL Router WS requestfunction
WS(HRM)
WS RouterNavbarHistory API
WS method(push)
WS Router
WS requestfunction
ProcessWS push
WS(HRM)
WS(HRM)
JS
![Page 10: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/10.jpg)
HWIOS Remote Messaging (HRM)Client requestws.remote(url,params,callback);ws.remote('/messenger/messages/send/',{msg:$('.msginput').val(),to:$('.seluser').data('id')}, function(response){});JSON data: [method,params,callback_uuid]
Client responseJSON data: [params, callback_uuid]
Server requestClient.remote(url, params) client.remote('/messenger/messages/private/add/', {'msg':msg_from_usr,'from':src_client.profile.username})
Server responseNot available yet.
Websocket Routing Protocol
![Page 11: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/11.jpg)
● Local links trigger a full page reload● JS state is lost after a full page reload● XHR transport for limited dynamic page updates● HTTP header overhead and high TCP latency ● Emphasis on website as a collection of html documents● SEO well supported● Client/server request/response model
Multi page HTTP CMS
![Page 12: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/12.jpg)
● Local links are routed to clientside functions● Javascript state is maintained● Websocket transport for all dynamic page updates● Lightweight JSON protocol and low TCP latency ● Emphasis on website as an application● No SEO; crawlers can't access websocket resources yet● Bidirectional client/server request/response model
Single page websocket CMS
![Page 13: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/13.jpg)
● Why HWIOS?Clean code baseGood performanceIntuitive URL based routing systemSphinx documentationLow learning curve for Django/Python developersDRY; two years of R&D for freeLots of existing webapplicationsLGPL license permits proprietary modulesBuilt on top of solid frameworks like Python, Twisted, Django and JQuery
● Why Python?Speed; CPython is faster, more flexible than PHP. PyPy JIT is at least as fast as Node.js Rich ecosystem; Python exists since 1991, Node.js since 2009
● Why Twisted?Fast, well tested and flexible async internet server platformRich ecosystem: lots of ready to use server technology
● Why Django?Well documented, maintained, tested and feature rich web frameworkRich ecosystem: Lots of snippets can easily be adapted to work with websockets instead of HTTP
● Why Jquery?Well documented, maintained and testedEasy DOM manipulationJQuery UI
Developing with HWIOS
![Page 14: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/14.jpg)
Questions?
![Page 15: HWIOS Websocket CMS explained](https://reader033.vdocument.in/reader033/viewer/2022050707/549aa470b479590b098b4577/html5/thumbnails/15.jpg)
● Feel free to ask!● Check out community site http://hwios.org● Read the documentation http://hwios.org/docs/● Code: https://github.com/osnetworks/HWIOS● Support: #hwios @ irc.freenode.net ● Contact OSNetworks: info@osnetworks.net
Information channels