WebSockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.
Source: [WebSockets – A Conceptual Deep Dive](https://ably.com/topic/websockets)
Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.
Following is the API which creates a new WebSocket object.
var Socket = new WebSocket(url, [protocal] );
Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.
A simple example
To open a websocket connection, we need to create new WebSocket using the special protocol ws in the url:
var Socket = new WebSocket("ws://howto.lintel.in/");
There’s also encrypted wss:// protocol. It’s like HTTPS for websockets.
wss://The wss:// protocol not only encrypted, but also more reliable.
That’s because ws:// data is not encrypted, visible for any intermediary. Old proxy servers do not know about WebSocket, they may see “strange” headers and abort the connection.
On the other hand, wss:// is WebSocket over TLS, (same as HTTPS is HTTP over TLS), the transport security layer encrypts the data at sender and decrypts at the receiver, so it passes encrypted through proxies. They can’t see what’s inside and let it through.
WebSocket Attributes
Following are the attribute of WebSocket object. Assuming we created Socket object as mentioned above:-
| Sr.No. | Attribute & Description |
|---|---|
| 1 | Socket.readyState
The readonly attribute readyState represents the state of the connection. It can have the following values:-
|
| 2 | Socket.bufferedAmount
The readonly attribute bufferedAmount represents the number of bytes of UTF-8 text that have been queued using send() method. |
WebSocket Events
Following are the events associated with WebSocket object. Assuming we created Socket object as mentioned above:-
| Event | Event Handler | Description |
|---|---|---|
| open | Socket.onopen | This event occurs when socket connection is established. |
| message | Socket.onmessage | This event occurs when client receives data from server. |
| error | Socket.onerror | This event occurs when there is any error in communication. |
| close | Socket.onclose | This event occurs when connection is closed. |
WebSocket Methods
These are the methods associated with WebSocket object. Assuming we created Socket object as mentioned above:-
| Sr.No. | Method & Description |
|---|---|
| 1 | Socket.send()
The send(data) method transmits data using the connection. |
| 2 | Socket.close()
The close() method would be used to terminate any existing connection. |
WebSocket Example
WebSocket is a standard bidirectional TCP socket between the client and the server. The socket starts out as a HTTP connection and then “Upgrades” to a TCP socket after a HTTP handshake. After the handshake, either side can send data.
Client Side HTML & JavaScript Code
At the time of writing this tutorial, there are only few web browsers supporting WebSocket() interface. You can try following example with latest version of Chrome, Mozilla, Opera and Safari.
<!DOCTYPE HTML>
<html>
<head>
function WebSocketTest() {
if ("WebSocket" in window) {
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:1234/test");
ws.onopen = function() {
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {
// websocket is closed.
alert("Connection is closed...");
};
}
else {
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</head>
<body>
<a href="javascript:WebSocketTest()">Run WebSocket</a>
</body>
</html>
