Front-end Design And Implementation Of General WebIM Component Based On HTML5

As the Internet produces more and more influence to human's daily life, the information communication based on web has became more frequently. People are never just satisfied with non-instant communication tools. More people turn to IM for communication. For desktop version of IM tools need to be installed and configured, its cost will be high when we choose them. But those web-based IMs in current Internet have many limits, so not any website can add this function easily. From this starting point, a WebIM component based on HTML5 is brought forward. It focuses on compatibility and generality, so its applicability is very extensive.The thesis focuses on the front-end of the WebIM compontent. By using many new technologies, such as HTML5, CSS3, Websocket, the component had strong adaptable and good compatibility. Based on comparative study of some relevant technologies, the thesis finally decided to choose Websocket communication model as default. In the design part, following the normal production design process, the thesis described from user role analysis to prototype design, then to interactive design, the last was the struction design of presentation layer and behavior layer. In the implementation part, the web page structure was build by some new tag in HTML5, style rewriting part was used"Progressive Enhancement"theory. The behavior layer was builded based on a new independent front-end library. In the period of designing this library, all the compatibility problems of different web browers has been packaged inside the library. To make sure the component can work well in all popular web browers, for some web browers which was not support websocket technology, an another alternative solution by using other communication models will be get ready in any time.Testing and verify the WebIM component by running it in an emulate enviroment. The result indicated that the component worked welll, and the websocket communication model used in component realized the real instant communication based on web.