Invited Paper
A Study of Internet of Things Real-time Data Updating Based on WebSocket Shoulin Wei*, Konglin Yu, Wei Dai, Bo Liang, Xiaoli Zhang Computer Technology Application Key Lab of Yunnan Province, Kunming University of Science and Technology, Kunming, 650500, China
ABSTRACT The Internet of Things (IoT) is gradually entering the industrial stage. Web applications in IoT such as monitoring, instant messaging, real-time quote system changes need to be transmitted in real-time mode to client without client constantly refreshing and sending the request. These applications often need to be as fast as possible and provide nearly real-time components. Real-time data updating is becoming the core part of application layer visualization technology in IoT. With support of data push in server-side, running state of "Things" in IoT could be displayed in real-time mode. This paper discusses several current real-time data updating method and explores the advantages and disadvantages of each method. We explore the use of WebSocket in a new approach for real-time data updating in IoT, since WebSocket provides low delay, low network throughput solutions for full-duplex communication. Keywords: WebSocket, Real-time data updating, Internet of Things, HTML5
1. INTRODUCTION The Internet of Things (IoT) is a novel paradigm that is rapidly gaining ground in the scenario of modern wireless telecommunications [1]. With the development of sensor and the gradual maturity of sensing technology, Internet of Things has been widely applied to industrial process monitoring, production chain management, material supply chain management, product quality control, equipment maintenance, inspection and production safety with energy management and other processes of production [2]. It is helpful to establish a coordination mechanism applied to improve efficiency in industrial production and product quality, also to achieve intensive industrial production, business intelligent management and energy saving. The common architecture of IoT can be divided into three levels: First, sensing layer, that is, two-dimensional code label, RFID, sensors and other sensing terminal, identification of objects and collecting information; Second, transport network layer, through the existing Internet, radio and television networks and cloud computing platform, realizes data transmission which is responsible for the transmission and processing information obtained from sensing layer; The Third is application layer, which is focused on user interface and combined with the industry needs to realize intelligent networking applications[3]. This paper will show research on real-time data application layer. The rest of the paper is organized as follows. Section 2 presents and discusses visualization in IoT with real-time data. Section 3 presents traditional methods of Web real-time data updating without refreshing html page. Section 4 describes WebSocket protocol, and then gives implementation of server-side and client-side in WebSocket. Finally, in Section 5 we discuss some concluding remarks and planned future research work.
2. REAL-TIME DATA VISUALIZATION IN IOT Users use various devices to access their IoT’s systems for interactive command, meanwhile, they also need to be informed when some alarms happened (as shown in Fig.1). Data produced by sensor or parameters of sensor in IoT is usually collected at a certain frequency periodically. The changes need to be updated in front end constantly. There are a large number of various types of sensors usually in a system of IoT, if the frequency of collection is more intensive, the runtime data generated will be increased dramatically. To facilitate staff to manage more effectively and solve the problems in working, Visualization technology of various type of data emerged as the times require. Real-time data visualization technology as demonstrated in the central part, especially real-time alarm abnormal situations, is the most concern for managers. It reflects the current status of real-time running system. Through monitoring and analysis of these data. Managers could understand the performance of the device, operating status and health, the production system in order to ensure normal and stable operation.
Sixth International Conference on Electronics and Information Engineering, edited by Qiang Zhang, Proc. of SPIE Vol. 9794, 97940T · © 2015 SPIE CCC code: 0277-786X/15/$18 · doi: 10.1117/12.2203128
Proc. of SPIE Vol. 9794 97940T-1
Downloaded From: http://proceedings.spiedigitallibrary.org/ on 12/16/2015 Terms of Use: http://spiedigitallibrary.org/ss/TermsOfUse.aspx
Realization of real-time in Web form is usually driven by browser and achieves pseudo real-time monitoring function. It is not the complete real-time monitoring. With the development of HTML5, WebSocket communication protocol as a standard of HTML5 has gained wide attention. It can provide based on a two-way channel TCP connection between browser and server. Server and browser can realize two-way communication through this channel. The bidirectional communication capability makes it possible to build real-time visualization in IoT possible.
User Devices Servers Sensors
Interactive Cbmmand
1 Real -time Updating
Figure 1. Interactive mode between users and IoT’s system.
3. TRADITIONAL METHODS OF WEB REAL-TIME DATA UPDATING
HTTP Pulling HTTP protocol is based on the request / response paradigm. When accessing a Web page, usually browser sends a HTTP request to the web server. Web server recognizes the request and then responds. When the content of page from the server back to the page, it may not be up to date. According to the importance of real-time information to the user of Internet of things, it is not practical that user manually refresh web page to obtain real-time information. At present, web application basically achieves real-time information exchange through polling and other server pushing. The most commonly used is polling and long polling technique. (1) Polling, Browser sends a HTTP request periodically, and then receives response content, which is the first real-time pushing scheme. A Client sends requests to server in a certain time interval to keep client and server-side synchronization. This method is usually implemented by the HTML tag “iframe” in a pure HTML page. The communication procedure is shown in Fig2. The biggest problem of the synchronization scheme is that when a client requests to the server at a fixed frequency, the server-side data may not be updated. It will bring a lot of unnecessary network traffic, so it is a very inefficient real-time scheme, also in polling interval between two cycles, user can't get real-time changes. (2) Asynchronous JavaScript and XML (Ajax), a browser feature accessible in JavaScript, allows a script to make an HTTP request to a website behind the scenes, without the need for a page reload [4]. With the appearance of AJAX browser can call XMLHttpRequest object and sends a HTTP request using JavaScript. According to information returned from server, JavaScript callback function update partial HTML page. "Server Push" implemented by AJAX is different from traditional AJAX applications [5, 6]. Server will block until data transmission finish or request is timeout. After dealing with information returned from server, client JavaScript response function request again and re-establish a connection. The use of long polling based on AJAX will lead to establish a lot of connections and bring adverse effect on server performance.
Proc. of SPIE Vol. 9794 97940T-2
Downloaded From: http://proceedings.spiedigitallibrary.org/ on 12/16/2015 Terms of Use: http://spiedigitallibrary.org/ss/TermsOfUse.aspx
Brower Server
1, HTTP Request
is response: no data
2, HTTP Request lo- 2's response: no data
3, HTTP Request
3's response with data
Figure 2. Communication Procedure of HTTP Polling. (3) Long Polling, HTTP long connection is supported in the HTTP1.1 version, the same TCP connection send and receive multiple HTTP request / response, rather than for each new request / response to open a new connection[7]. This can reduce the number of TCP requests and network jam. But in different browsers the number of HTTP connection which the same client can establish is different, there are some restrictions, in addition to the server side without prepared data waiting for connections will cause waste of resources.
Flash Socket Flash Socket allows Flash player through a specified port to communicate with the server in the connection. The biggest difference between Flash Socket and other communication technologies is socket connection will not turn off automatically after data transmission is completed [8]. When a socket connection is created, the connection will remain until the client (Flash Player) or server actively close. The server can send data to the client at any time without client request, so as to realize real-time communication. But Flash Socket relies on the Flash plugin, some client device, such as iPhone, does not support Flash. In the end of June 2012, Adobe officially announced that the system does not support android4.1 later, which basically declared Flash's death on the mobile terminal [9]. While its requirement of 843 firewall ports are open, so that Flash component is able to send a request to retrieve a policy file that contains the domain authority. If the client is behind a proxy server, then the connection to port 843 may be rejected.
BlazeDS Data Push BlazeDS is a free data service of Adobe's open source framework for RIA applications to simplify data access and drive [10]. Using AMF binary transfer protocol, it can greatly improve data access performance. The most critical function is with real-time data pushing capabilities. BlazeDS 's message pushing in the underlying implementation is also based on HTTP long connection. It uses the standard HTTP protocol. Flex client component configuration of the channel through the Consumer sends a request to BlazeDS service endpoint. This requires that the client needs to be written using Flex, but also browser need to rely on Flash plugin.
4. DATA PUSH BASED ON WEBSOCKET HTTP is not for real-time, full-duplex communication design. Several methods of the previous discussion solve the real- time data updating to a certain extent, but in terms of performance, compatibility, there are kinds of problem. But WebSocket can change this situation, because it establishes two-way communication mechanism between browser and server.
Proc. of SPIE Vol. 9794 97940T-3
Downloaded From: http://proceedings.spiedigitallibrary.org/ on 12/16/2015 Terms of Use: http://spiedigitallibrary.org/ss/TermsOfUse.aspx WebSocket WebSocket is a web technology providing full-duplex communications channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C [11].
Figure 3. Communication Procedure of WebSocket. The protocol of WebSocket is essentially a TCP-based protocol. In order to establish a WebSocket connection, the browser would initiate an HTTP request to server. The request that contains some additional header information is different from usual HTTP request. "Upgrade: WebSocket" in the additional header information indicates that it is an application request for upgrading protocol. After the server-side parses this additional header information and generates response message back to the client, WebSocket connection is established. The two sides can use this connection channel to transfer information freely. The connection will remain until the client or the server-side party close the connection actively. The communication procedure of WebSocket is shown in Fig3. Because of these characteristics of WebSocket, it is very suitable for web application of IoT to do real-time data push. While HTML5 WebSocket is used to achieve the same with TCP Socket function at the application layer, it can be traversal of firewalls and routers seamlessly and support cross-domain exchanges, perfect integration of Cookie based authentication, compatibility with binary data. Currently, the popular browsers support WebSocket protocol, such as Chrome, Safari, Firefox, IE, etc. With the constant change of the WebSocket draft, each browser on the implementation of the protocol are also constantly updated. Mainstream browsers with support of WebSocket are as the following Table 1. Table 1. Browers with Support of WebSocket Browers Supported Version Chrome Supported in version 4+ Firefox Supported in version 4+ Internet Explorer Supported in version 10+ Opera Supported in version 10+ Safari Supported in version 5+
Server-side Implementation To build a server of WebSocket, you can choose to use open-source framework. Basically every mainstream language has a corresponding implementation, such as TooTallNate, PyWebSocket, WebSocket-Node, LibWebSockets etc [12]. These libraries have implemented packet encapsulation and resolution of WebSocket. Here we use NodeJS. NodeJS
Proc. of SPIE Vol. 9794 97940T-4
Downloaded From: http://proceedings.spiedigitallibrary.org/ on 12/16/2015 Terms of Use: http://spiedigitallibrary.org/ss/TermsOfUse.aspx
itself does not have native WebSocket support, but there are third-party implementations using express and socket.io to build a WebSocket server. As the following Table2: Table 2. The procedure of creating a WebSocket’s server var ex = require('express').createServer(), io = require('socket.io').listen(ex; ex.listen(3000); io.sockets.on('connection', function (socket) { socket.emit('sensor_data', {id: '1',value:1.2});...... (1) socket.broadcast.emit('connected'); ...... (2) io.sockets.emit('new connection'); ...... (3) }); (1) Sending sensor's data as JSON to the current client (2) Broadcasting to all clients but the current client (3) Broadcasting to all clients
Client-side Implementation In the browsers with support of WebSocket, you can use the WebSocket object in JavaScript to achieve communication directly. WebSocket object's readyState property to indicate current state, there are four states: CONNECTING (0): indicates not establish a connection; OPEN (1): connection has been established, you can communicate; CLOSING (2): By closing handshake, being close the connection; CLOSED (3): the connection has been closed or not open; WebSocket object mainly use onopen, onmessage, onclose and onerror to realize response of socket asynchronous message. The procedure of creating a WebSocket client call as the codes of Table3: var wsServer = 'ws://localhost:3000'; var websocket = new WebSocket(wsServer); //create WebSocket Object websocket.onopen = function (evt) { // triggered after websocket opened }; websocket.onclose = function (evt) { //triggered after websocket closed }; websocket.onmessage = function (evt) { //receive message stored in evt.data from WebSocket Server }; websocket.onerror = function (evt) { //error handler };
Proc. of SPIE Vol. 9794 97940T-5
Downloaded From: http://proceedings.spiedigitallibrary.org/ on 12/16/2015 Terms of Use: http://spiedigitallibrary.org/ss/TermsOfUse.aspx 5. CONCLUSION This paper provided an introduction to real-time data updating techniques. It discussed different methods to implement real-time data updating, and it explained the advantages and drawbacks for each method. Then, this paper present a new approach: WebSocket. Though not all browsers support it yet, WebSocket will definitely be a very good communication medium for real-time data updating in IoT, since WebSocket will remove all constraints relative to the stateless characteristic of a HTTP connection. In future, we will do further research on WebSocket in web visualization of IoT and attempt to develop new WebSocket Develop Kit.
6. ACKNOWLEDGMENTS The system discussed in this paper is a collaborated project between Kunming University of Science and Technology and Yunnan Observatories of Chinese Academy of Sciences. This paper is funded by National Natural Science Foundation of China under Grant No.11403009 and Application Foundation of Yunnan under Grant No.2013FZ018. The first author thanks Feng Wang, Sheng Zheng for their helpful discussion.
REFERENCES [1] Luigi, A., Antonio, L., and Giacomo, M., "The Internet of Things: A survey," Computer Networks, 54, 2787-2805 (2010). [2] Bandyopadhyay, D., and Sen, J., "Internet of Things: Applications and Challenges in Technology and Standardization," Wireless Personal Communications, 58, 49-69 (2011). [3] Borgia, E., "The Internet of Things vision: Key features, applications and open issues," Computer Communications, 54, 1-31 (2014). [4] Reverse Ajax, Part 1: Introduction to Comet,
Proc. of SPIE Vol. 9794 97940T-6
Downloaded From: http://proceedings.spiedigitallibrary.org/ on 12/16/2015 Terms of Use: http://spiedigitallibrary.org/ss/TermsOfUse.aspx