Overview

This article demonstrates the usage of W3C Web Sockets in Tizen web application. The WebSocket will establish "socket" connections between a web browser and a server. It provides a connection oriented full-duplex communication. A long-term connection is used as a basis, means that data can be sent and received through one connection, and no need to establish a separate connection for each sending and receiving instance.

Web Sockets html page

index.html

This page contains a 'link' to connect with the server, a text box to enter the message and two buttons one for sending the message to server, another for closing the connection.

<div data-role="content" id="logs">
  <a id="connect_id">Click here</a> to connect with Server using web sockets.
  <div id="output"></div>
  <p>Enter the data to send:<input type="text" id="text_field">
  <button onclick="senddata()">Send</button>
  <button onclick="Disconnect()">Disconnect</button>
</div>

Interacting with server using javascript

In order to interact with the server, follow the below steps

Connecting to a server

To connect with a server, create a WebSocket interface with the socket server URL as a mandatory parameter. The URL must use the ws or wss protocol. If the URL is not valid or uses a wrong protocol, a syntax error occurs.

var webSocketUrl = "socket-server-url";
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 the WebSocket instance will be 0 (CONNECTING). There is an echo server "ws://echo.websocket.org" to interact, which can be used as "socket-server-url". To encrypt the connection use wss:URL(wss://echo.websocket.org). WebSocket uses TLS(Transport Layer Security) protocol for encrypting the data over connection. It uses Origin-based security model which is commonly used by web browsers as defined by RFC 6454. To track the connection status open and error events are used.

Prerequisites:

Add <access origin="http://websocket.org" subdomains="true"/> or <access origin="ws://websocket.org" subdomains="true"/> in the config.xml file to have connection with the server.

webSocket.onopen = function(evt)
{
  console.log('connection open, readyState: ' + evt.target.readyState);
};
webSocket.onerror = function(evt)
{
  console.log('error, readyState: ' + evt.target.readyState);
};

If the connection with the socket server succeeds, the readyState attribute value is set to 1. If the connection fails the attribute value is set to 3, and the HTTP 503(Service Unavailable) error is returned.

Sending data

To send data to the server use send() method of the WebSocket interface. The data is transmitted using the established connection. If the readyState attribute value is CONNECTING, the method throws an InvalidStateError exception.

function sendMessage(msg)
{
  if (webSocket.readyState === 1)
  {
	webSocket.send(msg);
  }
};

If the readyState attribute value is 1(socket is connected), then use 'send()' method to send the data.

Receiving data

To receive data from the server register the 'message' event in the WebSocket instance. The event is triggered when data is received from the server.

webSocket.onmessage = function(evt)
{
  console.log('server message: ' + evt.data);
};

Closing connection

Close the connection when it is no longer needed. If the readyState attribute value is 1(socket is connected), then use close() method to close the connection between the client and the server.

function closeConnection()
{
  if (webSocket.readyState === 1)
  {
    webSocket.close();
  }
};

A close event has to be registered to notify the closing of connection.

webSocket.onclose = function(evt)
{
  console.log('connection close, readyState: ' + evt.target.readyState);
};

References

WebSocket api tutorial

Demo on WebSockets

Screen Shot