1.
HTML5.
어느 때부터인가 자주 언급되는 단어입니다. HTML5를 도입하면 동영상 재생을 HTML에서 지원한다는 정도외에 아는 지식도 없고 관심도 없었습니다. 몇 년전까지만 해도 PM이자 기획자였기 때문에 알아야 한다고 생각했지만 이제는 그저 사용자일 뿐이라고 생각했습니다. 예전에 SDP를 간단히 소개하면서 실시간웹기술을 소개한 적이 있었습니다.
이 때 Ajax와 Comet기술을 소개하였습니다. HTML5를 발표하면서 실시간처리가 가능하도록 하는 표준을 발표하였습니다. 그런데 금융산업이 HTML5에 많은 관심을 가진 듯 합니다.
먼저 HTML5의 전도사역할을 하시는 Channy님이 정리한 글을 보죠.
4.1 Server-Sent Events
웹 서버로 부터 전달(Push)되는 데이터 예를 들어 SMS 같은 것을 받을 수 있도록 EventSource를 정의하고 이벤트를 기다릴 수 있도록 하는 API를 기술하고 있다.4.2 HTML5 Communications
이 스펙은 기존 Ajax의 단점으로 알려진 크로스 도메인 문서 접근을 가능하게 해 주는 스펙이다. 마이크로소프트의 XHR 때문에 약간 논의가 지지부진한 면이 있지만 텍스트를 위한 서버 통신을 지원해 준다. 물론 보안 사항에 대한 부분도 중요하게 다루어지고 있다.4.3 Web SQL Database
자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API이다. 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 준다.4.4 Web Sockets API
한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API이다.4.5 Web Workers
웹 애플리케이션이 주 문서와 병렬적으로 스크립트를 백그라운드로 수행할 수 있게 해 주는 API. 쓰레드 기반 메시지 처리를 가능하게 해 준다. CPU 부하를 많이 잡는 작업을 여러 워커(worker)로 나누어 작업하거나 클라이언트 DB를 업데이트 하거나 나누어서 작업이 가능한 자바 스크립트 API를 제공해 준다. 흥미로운 점은 암호화 작업에 대한 유즈케이스를 담고 있어서 웹 브라우저들이 지원만 한다면 향후 전자 서명 기능을 제공해 줄 수도 있을 듯.
HTML5의 모든 것중에서
그러면 지난 번에 소개한 Comet와 Websockets의 차이점을 알아보겠습니다.
Comet introduced an even greater departure from the HTTP communications model by enabling “push”-style of communications over HTTP. Comet defines several techniques that allow the server to send information to the browser without prompting from a client. With the help of an additional HTTP connection, Comet can even facilitate bi-directional communications over two HTTP connections. However, the trouble with Comet is its lack of standard implementation due the varying levels of support provided by browser vendors for XHR and iFrames?the two building blocks of Comet-style communications. In addition, there is a significant amount of overhead, both in terms of networking and development, to manage two connections for communications. These costs can introduce latency into Comet applications that limit the accuracy of the real-time communications they provide.
HTML 5 WebSocket represents the next evolution of Comet and Ajax in an attempt to stand HTTP communications on its head. The HTML 5 WebSocket specification defines a single-socket full-duplex (or bi-directional) connection for pushing and pulling information between the browser and server. Thus, it avoids the connection and portability issues of Comet and provides a more efficient solution than Ajax polling. At present HTML 5 WebSockets is the predominant mechanism for facilitating full-duplex, real-time communications on the Web.
HTML 5 Web Sockets vs. Comet and Ajax중에서
Web Socket을 좀더 자세하게 소개한 한글문서입니다.
2.
앞서 Channy님이 정리한 내용을 SDP를 웹환경으로 개발하고 있는 Ian Alderson, Caplin Trader Product Manager의 버전을 살펴보겠습니다.
Web Sockets provided they iron out all the kinks,Web Sockets should provide the ideal connection type for streaming real-time data
Web Workers although the main browser thread is the only one allowed to interact with the DOM, you can pass off all other work, such as message parsing, to web workers to utilise the multiple cores that are ubiquitous these days. The result: better performance, lower latency and greater predictability.
Application Cache pre-HTML5 solutions to this had to rely on a combination of the base tag and cache control settings. HTML5 replaces this home-grown functionality and additionally enables applications to work offline (potentially useful if the application is running on a mobile device that may experience transient connectivity issues)
Local/session storage if the application can’t access the web server, layouts and other information can’t be saved. Local storage could be used to save layouts to the local browser database, then submit them (possibly the next time the user logs in) to the web server
Canvas great for building graphical displays such as charts. Although Canvas has been supported in Firefox for a long time, IE has been stuck with VML
Video/Audio tags no need for external plug ins (provided the video is using the right codec), easier to embed video/audio content
CSS Transitions pretty much had to be implemented in JavaScript previously, now a whole load of effects can be done in CSS and they look greatStacks of CSS eye-candy ? things such as rounded corners that previously could only be done using images
HTML5: what does it mean for capital markets e-commerce?중에서
HTML5에서 제공하는 기술들이 트레이딩시스템을 개발할 때 어떻게 적용할 수 있는지 보여줍니다. Websockets을 이용하여 트레이딩시스템을 구축하는데 적극적인 회사가 Kaasing이며 Open Gateway라는 제품입니다. Web Sockets제품과 Messaging 제품을 결합하여 아래와 같은 시스템 구성이 가능하다고 말합니다.
출처:HTML5 Web Sockets: A Quantum Leap in Scalability for the Web
발표한 자료는 How to build an enterprise trading solution using HTML 5’s WebSockets
3.
이상으로 Comet과 Web Sockets을 비교정리하였습니다. 그런데 Web Sockets을 도입하는데 몇가지 걸림돌이 있다고 Caplin Technology는 주장합니다.
1. Browser support
We still have to deal with IE6 at the moment and WebSocket is not supported yet in the current browsers (apart from Chrome). So when can a web developer realistically rely on WebSocket being available for the majority of his users? This is likely to remain an issue for a long time.
2. Proxy support
WebSocket through proxies are a fairly unknown quantity ? WebSocket is designed to fail cleanly so falling back to another mechanism is possible. However we don’t really know how many proxies will work with WebSocket. This includes server side proxies, which are often overlooked and are usually out of the control of the server side developer.
3. Features
What I am referring to here are the low level features that Greg talks about. His blog demonstrates that you cannot just take the simple WebSocket API and write a real time application (other than a demo) without taking into account the kind of edge cases he describes. Without this a web application could appear unstable for many users.
Why we don’t need HTML5 WebSocket중에서
특히 트레이딩시스템의 경우 고객중 Proxy Server를 사용할 경우 실패할 확률이 높을 수 있기때문에 좀더 신중한 접근을 필요로 합니다.
How HTML5 Web Sockets Interact With Proxy Servers
마지막으로 HTML5를 이용하여 파일럿제품으로 개발한 SDP(Sing Dealer Platform)/SBP(Single Bank Platform)의 스크린을 보시길 바랍니다. 상업투자은행의 딜러가 사용하기에 부족함이 없을 듯 합니다.
와우.. 이 많은 자료와 시각은 어떻게… 입이 떡 벌어집니다…
^^
저의 주특기는 Copy&Paste입니다.또 웹기술은 개인적으로 관심을 가지고 있기도 하고….