hwios websocket cms explained

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 co­creation (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 web­applications 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:$('.msg­input').val(),to:$('.sel­user').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 web­applicationsLGPL 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/os­networks/HWIOS● Support: #hwios @ irc.freenode.net ● Contact OS­Networks: info@os­networks.net

Information channels