Sling Academy
Home/JavaScript/Create Persistent Sockets with the WebSockets API in JavaScript

Create Persistent Sockets with the WebSockets API in JavaScript

Last updated: December 14, 2024

WebSockets are an efficient and effective technology for real-time communications in web applications. They provide a persistent connection between the client and the server, which allows for the exchange of messages in real-time without the need for repeated HTTP requests. In this article, we'll explore how to create persistent sockets using the WebSockets API in JavaScript.

Understanding WebSockets

Before diving into the code, let's briefly understand what WebSockets are. In a nutshell, WebSockets is a communication protocol that provides full-duplex communication channels over a single TCP connection. Unlike traditional HTTP, where the client has to poll the server for updates, WebSockets establish a persistent connection after which both client and server can send data at any time.

Setting Up a WebSocket Server

To work with WebSockets, you'll first need a WebSocket server. For demonstration purposes, we will set up a simple WebSocket server using Node.js and the popular 'ws' library. Make sure Node.js is installed on your machine.

// server.js

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // Echo the received message back to the client
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

In this example, we’re creating a WebSocket server that listens on port 8080. It prints a message to the console when a client connects, echoes back any message it receives, and notifies when a client disconnects.

Connecting to a WebSocket Server from a Client

With the server running, let's see how you can connect to it using WebSockets in JavaScript on the client-side. This example can be written directly in an HTML file or in JavaScript code loaded by an HTML page.

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Client</title>
</head>
<body>
  <script>
    const socket = new WebSocket('ws://localhost:8080');

    socket.addEventListener('open', function (event) {
      console.log('Connected to the server');
      socket.send('Hello Server! This is the client.');
    });

    socket.addEventListener('message', function (event) {
      console.log('Message from server: ', event.data);
    });

    socket.addEventListener('close', function (event) {
      console.log('Disconnected from the server');
    });
  </script>
</body>
</html>

The client code connects to the WebSocket server and sends a welcome message once the connection is open. It also listens for any messages from the server and for the closure of the connection.

Handling Advanced Scenarios

A robust WebSocket implementation should handle various advanced scenarios such as reconnection, error handling, and managing different types of messages. Let's enhance our client code to include some of these:

<script>
  let socket = new WebSocket('ws://localhost:8080');

  socket.addEventListener('open', () => {
    console.log('Connected to the server');
  });

  socket.addEventListener('message', (event) => {
    console.log('Message from server:', event.data);
  });

  socket.addEventListener('close', () => {
    console.log('Disconnected from the server');
    // Reconnect after 3 seconds
    setTimeout(() => {
      console.log('Attempting reconnection...');
      socket = new WebSocket('ws://localhost:8080');
    }, 3000);
  });

  socket.addEventListener('error', (error) => {
    console.log('WebSocket error:', error);
  });
</script>

This improved client script attempts to reconnect three seconds after a disconnection and logs any WebSocket errors that occur.

Conclusion

WebSockets provide a powerful solution for real-time web applications, enabling persistent connections and smooth data exchange between client and server. By following the steps in this guide, you can establish WebSocket connections in JavaScript, create a server, and implement advanced handling such as reconnection and error management.

Next Article: Send and Receive Real-Time Data Using JavaScript WebSockets

Previous Article: Negotiate Connections Securely Using the WebRTC API in JavaScript

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration