WebSocket: Exchanging Data Using a Socket Server

This tutorial demonstrates how you can manage the client-server communication.

Warm-up

Become familiar with the WebSocket API basics by learning about:

Connecting to the Socket Server
Open a connection to the socket server and track the connection status.
Sending Data to the Server
Send data to the socket server.
Receiving Data from the Server
Receive data from the socket server.
Closing the Socket Connection
Close the connection to the socket server, and track the closing status.

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 the WebSocket instance must be set to 0 (CONNECTING).

Use the open and error 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 to 1 and the open event is triggered.

Source Code

For the complete source code related to this use case, see the following file:

web_socket.htm

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 is 1 (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:

web_socket.htm

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 the WebSocket 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:

web_socket.htm

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);

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

Check the readyState attribute value, which is 1 (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:

web_socket.htm