WebSocket
WebSocket in a Web environment enables connection-oriented full duplex communication, as with a TCP socket. (The server and browser can send and receive data in real-time through a continuously connected TCP line.)
The difference between the previously used communication method in the Web environment and the new Web socket lies in the protocol. The Web socket protocol uses HTTP in establishing a connection, however, all communication after the connection is established happens using the Web socket’s independent protocol.
With a Web socket, the used header is extremely small, causing very little overhead. A long-term connection is used as a basis, meaning that if there is connection, sending data from client or server is possible. The long-term connection means that data can be sent and received through 1 connection, and you do not need to establish a separate connection for each sending and receiving instance. Ping and pong frames can also be used.
The main features of the WebSocket API include:
-
Connecting to a server
To connect to a server, you must create a WebSocket interface with the socket server URL as a mandatory parameter. The URL format has some restrictions, for example, it must use the
ws
orwss
protocol. If the URL is not valid or uses a wrong protocol, a syntax error occurs. -
Sending data
By using the
send()
method of theWebSocket
interface, you can send data to the server. The data is transmitted using the established connection. If thereadyState
attribute value isCONNECTING
, the method throws anInvalidStateError
exception. -
Receiving data
You can receive data from the server through the
message
event. -
Closing a socket
When the connection is no longer needed, you can close the connection with the
close()
method.
Connecting to the Socket Server
To use the Web socket features in your application, you must learn to connect to a socket server:
-
Create a WebSocket interface instance using a valid socket server URL as a parameter:
var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo'; var webSocket = new WebSocket(webSocketURL);
If the socket server URL is valid, the connection is created automatically. When the instance is created, the
readyState
attribute of theWebSocket
instance must be set to0
(CONNECTING). -
Use the
open
anderror
events to track the connection status:/* If the connection is established */ webSocket.onopen = function(e) { console.log('connection open, readyState: ' + e.target.readyState); }; /* If the connection fails or is closed with prejudice */ webSocket.onerror = function(e) { /* Error handling */ };
If the connection is established, the
readyState
attribute is changed to1
and theopen
event is triggered. If the connection fails, the attribute value is set to3
, and the HTTP 503 error is returned.
Source Code
For the complete source code related to this use case, see the following file:
Sending Data to the Server
To use the Web socket features in your application, you must learn to connect to send data to the server:
-
Create a WebSocket interface instance using a valid socket server URL as a parameter:
var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo'; var webSocket = new WebSocket(webSocketURL);
-
Check the
readyState
attribute value, which is1
(OPEN), if the socket is connected.If the socket is connected, use the
send()
method to send the data.function sendMessage(msg) { if (webSocket.readyState === 1) { webSocket.send(msg); } }
Source Code
For the complete source code related to this use case, see the following file:
Receiving Data from the Server
To use the Web socket features in your application, you must learn to receive data from the server:
-
Create a WebSocket interface instance using a valid socket server URL as a parameter:
var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo'; var webSocket = new WebSocket(webSocketURL);
-
Register the
message
event in theWebSocket
instance. The event is triggered when data is received from the server.webSocket.onmessage = function(e) { console.log('server message: ' + e.data); };
Source Code
For the complete source code related to this use case, see the following file:
Closing the Socket Connection
To use the Web socket features in your application, you must learn to close the socket connection:
-
Create a WebSocket interface instance using a valid socket server URL as a parameter:
var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo'; var webSocket = new WebSocket(webSocketURL);
-
Register a
close
event in theWebSocket
instance to be notified when the connection closes:webSocket.onclose = function(e) { console.log('connection close, readyState: ' + e.target.readyState); };
-
Check the
readyState
attribute value, which is1
(OPEN), if the socket is connected.If the socket is connected, use the
close()
method to close the connection between the client and the server.function closeConnection() { if (webSocket.readyState === 1) { webSocket.close(); } }
Source Code
For the complete source code related to this use case, see the following file:
Related Information
- Dependencies
- Tizen 2.4 and Higher for Mobile
- Tizen 2.3.1 and Higher for Wearable
- Tizen 3.0 and Higher for TV