The Project | About Us | Contribute | Donations | License

HOME

WebSockets provide a full-duplex communication channel over a single, long-lived connection. This allows for real-time data transfer between a client and a server, making it ideal for applications that require frequent updates, such as chat applications, live sports updates, or online gaming.

Key Concepts

Full-Duplex Communication: Unlike HTTP, which is a request-response protocol, WebSockets allow for two-way communication between the client and server.
Persistent Connection: Once a WebSocket connection is established, it remains open until either the client or server decides to close it.
Low Latency: WebSockets reduce the latency involved in establishing new connections, making them suitable for real-time applications.

Setting Up a WebSocket Server

To demonstrate WebSockets, we will use Node.js with the ws library to set up a WebSocket server.

Step-by-Step Guide

Install Node.js and npm: Ensure you have Node.js and npm installed on your machine.
Create a new project: Initialize a new Node.js project.
```
mkdir websocket-demo
cd websocket-demo
npm init -y
```
Install the ws library:
```
npm install ws
```

Create a WebSocket server: Create a file named server.js and add the following code:

const WebSocket = require('ws');

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

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

  // Send a message to the client
  ws.send('Welcome to the WebSocket server!');

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

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

console.log('WebSocket server is running on ws://localhost:8080');

Explanation

Creating the Server: We create a WebSocket server that listens on port 8080.
Handling Connections: When a new client connects, we log a message and send a welcome message to the client.
Receiving Messages: We listen for messages from the client and echo them back.
Handling Disconnections: We log a message when a client disconnects.

Creating a WebSocket Client

To interact with our WebSocket server, we need a client. We can create a simple HTML page with JavaScript to connect to the server.

Step-by-Step Guide

Create an HTML file: Create a file named index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Client</title>
</head>
<body>
  <h1>WebSocket Client</h1>
  <div id="messages"></div>
  <input type="text" id="messageInput" placeholder="Type a message">
  <button id="sendButton">Send</button>

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

    ws.onopen = () => {
      console.log('Connected to the server');
    };

    ws.onmessage = (event) => {
      const messagesDiv = document.getElementById('messages');
      const message = document.createElement('div');
      message.textContent = event.data;
      messagesDiv.appendChild(message);
    };

    ws.onclose = () => {
      console.log('Disconnected from the server');
    };

    document.getElementById('sendButton').addEventListener('click', () => {
      const input = document.getElementById('messageInput');
      ws.send(input.value);
      input.value = '';
    });
  </script>
</body>
</html>

Explanation

Connecting to the Server: We create a new WebSocket connection to ws://localhost:8080.
Handling Messages: We display messages from the server in a div element.
Sending Messages: We send messages to the server when the user clicks the "Send" button.

Practical Exercise

Task

Set up the WebSocket server using the provided server.js code.
Create the WebSocket client using the provided index.html code.
Open the index.html file in a web browser and interact with the WebSocket server.

Solution

Follow the step-by-step guides provided above to set up both the server and the client. Ensure that the server is running before opening the index.html file in your browser.

Common Mistakes and Tips

Server Not Running: Ensure that your WebSocket server is running before trying to connect with the client.
Port Conflicts: Make sure that the port you are using (8080 in this case) is not being used by another application.
Browser Security: Some browsers may block WebSocket connections from file:// URLs. Use a local server to serve your HTML file if you encounter issues.

Conclusion

In this section, you learned how to set up a WebSocket server and client, enabling real-time, two-way communication. This foundational knowledge will help you build more interactive and responsive web applications. In the next section, we will explore Service Workers and Progressive Web Apps (PWAs), which further enhance the capabilities of modern web applications.

WebSockets

Key Concepts

Setting Up a WebSocket Server

Step-by-Step Guide

Explanation

Creating a WebSocket Client

Step-by-Step Guide

Explanation

Practical Exercise

Task

Solution

Common Mistakes and Tips

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project