Lesson 04-WebSocket Application Example – TianyaSchool – Science, Technology & Engineering Learning Platform

Frontend WebSocket Chat

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <style>
        #chatbox {
            height: 300px;
            border: 1px solid black;
            padding: 10px;
            overflow-y: scroll;
        }
        #messageInput {
            width: 80%;
        }
    </style>
</head>
<body>

<div id="chatbox"></div>
<input type="text" id="usernameInput" placeholder="Enter your username">
<button onclick="connect()">Connect</button>
<br><br>
<input type="text" id="messageInput" placeholder="Type your message">
<button onclick="sendMessage()">Send</button>

<script src="chat.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <style>
        #chatbox {
            height: 300px;
            border: 1px solid black;
            padding: 10px;
            overflow-y: scroll;
        }
        #messageInput {
            width: 80%;
        }
    </style>
</head>
<body>

<div id="chatbox"></div>
<input type="text" id="usernameInput" placeholder="Enter your username">
<button onclick="connect()">Connect</button>
<br><br>
<input type="text" id="messageInput" placeholder="Type your message">
<button onclick="sendMessage()">Send</button>

<script src="chat.js"></script>
</body>
</html>

chat.js

let socket;
let username;

function connect() {
    username = document.getElementById('usernameInput').value;
    if (!username) return alert('Please enter a username.');

    socket = new WebSocket('ws://your-websocket-server.com/chat'); // Replace with your WebSocket server address

    socket.addEventListener('open', (event) => {
        console.log('Connected to WebSocket server');
        document.getElementById('usernameInput').disabled = true;
        sendMessage(username + ' has joined the chat!');
    });

    socket.addEventListener('message', (event) => {
        addMessageToChat(event.data);
    });

    socket.addEventListener('close', (event) => {
        console.log('Disconnected from WebSocket server');
    });

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

function sendMessage(message) {
    if (!socket || socket.readyState !== WebSocket.OPEN) return;
    if (!message.trim()) return;
    socket.send(username + ': ' + message);
    addMessageToChat(username + ': ' + message);
    document.getElementById('messageInput').value = ''; // Clear input field
}

function addMessageToChat(message) {
    const chatBox = document.getElementById('chatbox');
    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to bottom
}

let socket;
let username;

function connect() {
    username = document.getElementById('usernameInput').value;
    if (!username) return alert('Please enter a username.');

    socket = new WebSocket('ws://your-websocket-server.com/chat'); // Replace with your WebSocket server address

    socket.addEventListener('open', (event) => {
        console.log('Connected to WebSocket server');
        document.getElementById('usernameInput').disabled = true;
        sendMessage(username + ' has joined the chat!');
    });

    socket.addEventListener('message', (event) => {
        addMessageToChat(event.data);
    });

    socket.addEventListener('close', (event) => {
        console.log('Disconnected from WebSocket server');
    });

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

function sendMessage(message) {
    if (!socket || socket.readyState !== WebSocket.OPEN) return;
    if (!message.trim()) return;
    socket.send(username + ': ' + message);
    addMessageToChat(username + ': ' + message);
    document.getElementById('messageInput').value = ''; // Clear input field
}

function addMessageToChat(message) {
    const chatBox = document.getElementById('chatbox');
    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to bottom
}

Backend Node.js Server Implementation

server.js

const WebSocket = require('ws');

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

const clients = new Set();

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

    socket.on('message', (message) => {
        console.log(`Received: ${message}`);
        // Broadcast message to all clients
        for (const client of clients) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        }
    });

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

    socket.on('error', (err) => {
        console.error('Socket error:', err);
    });
});

console.log('WebSocket server is running on port 8080');

const WebSocket = require('ws');

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

const clients = new Set();

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

    socket.on('message', (message) => {
        console.log(`Received: ${message}`);
        // Broadcast message to all clients
        for (const client of clients) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        }
    });

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

    socket.on('error', (err) => {
        console.error('Socket error:', err);
    });
});

console.log('WebSocket server is running on port 8080');

Server Logic Explanation

Import ws Library: The ws library is imported using require('ws').
Create WebSocket Server: A WebSocket server listening on port 8080 is created with new WebSocket.Server({ port: 8080 }).
Client Collection: A Set is used to store all connected client socket instances.
Connection Event Handling: When a client connects, the new socket is added to the clients set, and a connection log is printed.
Message Event Handling: Upon receiving a message from a client, the server iterates through the clients set, sending the message to every client in the OPEN state, effectively broadcasting the message.
Close and Error Event Handling: Handles client disconnections and errors by removing disconnected clients from the set and logging relevant information.

Course: WebSocket Deep Guide：Building High-Performance Realtime Systems

Frontend WebSocket Chat

index.html

chat.js

Backend Node.js Server Implementation

server.js

Server Logic Explanation

Trending now