HWIOS
http://hwios.org
About
● 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
● Realtime multi user interaction● Presence ● Activity awareness● Realtime collaboration● Requested & pushed data● Bookmarking/sharing of websocket resources● Networked GUI for other services
Concepts
● 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
● 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
Realtime Suitability
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.
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
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
● 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
● 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
● 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
Questions?
● 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
Top Related