Simple Socket.IO Demo with Node.js & TypeScript

M.b.patel October 31, 2025

In this tutorial, we will create a simple Socket.IO chat demo using Node.js + TypeScript. The setup includes a server and a client (HTML + JS) to test real-time communication.

Simple Socket.IO Demo with Node.js & TypeScript

1) Install Packages

npm init -y
npm install express socket.io
npm install -D typescript tsx @types/node @types/express @types/socket.io
npx tsc --init

2) Server Code (index.ts)

import express from "express";
import http from "http";
import { Server as IOServer } from "socket.io";

const app = express();
const server = http.createServer(app);
const io = new IOServer(server);

app.use(express.static("public"));

io.on("connection", (socket) => {
  console.log("Client connected:", socket.id);

  socket.emit("welcome", { message: "Welcome! You are connected." });

  socket.on("chat:message", (payload) => {
    io.emit("chat:message", { from: socket.id, text: payload.text });
  });

  socket.on("disconnect", () => {
    console.log("Client disconnected:", socket.id);
  });
});

server.listen(3000, () => console.log("Server running on http://localhost:3000"));

3) Client Code (index.html)

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Socket.IO Demo</title>
</head>
<body>
  <h3>Chat Demo</h3>
  <div id="log"></div>
  <input id="msg" placeholder="Type message..." />
  <button id="send">Send</button>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const log = (msg) => {
      const div = document.createElement("div");
      div.innerText = msg;
      document.getElementById("log").appendChild(div);
    };
    socket.on("chat:message", (m) => log(m.from + ": " + m.text));
    document.getElementById("send").onclick = () => {
      const text = document.getElementById("msg").value;
      socket.emit("chat:message", { text });
      document.getElementById("msg").value = "";
    };
  </script>
</body>
</html>

4) Run the Server

npm run dev
# open http://localhost:3000 in two browser tabs to test

That’s it ✅. You now have a working Socket.IO demo where multiple clients can chat in real time.

Simple Socket.IO Demo with Node.js & TypeScript

In this tutorial, we will create a simple Socket.IO chat demo using Node.js + TypeScript. The setup includes a server and a client (HTML + JS) to test real-time communication.

1) Install Packages

2) Server Code (index.ts)

3) Client Code (index.html)

4) Run the Server

Post a Comment

analytics

Popular Posts

laravel request array validation |validate array of objects | validate array without keys | tips Message Validation rule requires at least 2 parameters

[NEW] Effortless User Registration with Laravel, Vue.js, and Axios: A Comprehensive Guide

PHP-ML vs. Rubix ML: A Complete Comparison for PHP Developers | laravel php machine learning tutorial 1

Login Page Section Html And Css Black And Red Color

🔥 Send Push Notifications in Laravel 12 (Android & iOS) – All Methods

Labels

Most Recent

About Us

Follow Us

Footer Copyright

Contact form

Simple Socket.IO Demo with Node.js & TypeScript

In this tutorial, we will create a simple Socket.IO chat demo using Node.js + TypeScript. The setup includes a server and a client (HTML + JS) to test real-time communication.

1) Install Packages

2) Server Code (index.ts)

3) Client Code (index.html)

4) Run the Server

You may like these posts

Post a Comment

Contact form