WebSockets are a technology that creates a persistent connection between a web browser and a web server allowing two way communication between the two to occur at any time. The types of application this technology is best suited are that of real time software applications offering instant updates and that possibly share data between multiple parties. For example WebSockets are used to create such applications as multiplayer online games; chat and videoconferecing; update feeds; collaboration tools and any other application where the sever may be expected to send data to the client at any given time.
Opening a WebSocket
connect to. You may notice in the code snippet below the
ws: URL schema. This
identifies that this URL uses the WebSockets protocol. There is also
making secure WebSocket connections. This is similar to how
https: is used to
Now that a persistent connection has been made with the server, we need to listen for certain events on the connection. The connection object shares with us four properties that can have functions assigned to them. These act as callback when certain events occur.
Within these callbacks you may perform whatever function deemed necessary for
the application being written. Here I have simply output the connection state,
along with any messages that have been received from the server. It is likely
that you will wait until the
onopen callback is fired before any data is
passed to the server.
The server may send to us messages at any time. Whenever this happens the
onmessage callback fires. The callback receives an event object where the
actual message is accessible via the data property.
Sending Messages to the Server
With the connection and callbacks setup we can send messages and other binary data to the server. All types of data are send via the send method, a property of the connection object. The easiest type of data to send is a string which can be passed to the send message as is.
However binary data can also be send to the server using either a blob or an array buffer. These objects are passed into the send method just as a string is.
On the server side a technology capable of sustaining large amounts of concurrent connections open at the same time is required. A preferable technology would be Node.js; capable of running applications designed for high concurrency at a low performance cost. Node.js differs from other runtimes and servers such as it is designed around a non-blocking IO pattern as opposed to more tradition servers such as apache that blocks until an IO operation is complete.